The issue

Looking through my classmates' contributions for Hacktoberfest, I found badge-generator - a cool tool that helps us create markdown badges for our documentations. The owner wants to implement the dark mode for the site, and since the tool is written with VueJS, I decided to challenge myself as I could also continue to learn this framework.

The implementation

The owner suggested some resources for my inspirations. I found them very useful and had some basic ideas for this.

First, I added the dark and light theme for the site and applied them to the elements that would be affected by the theme change such as the background, the font of the main content as well as the links and logo.

:root.light-theme {
  --background-color-primary: #ffffff;
  --background-color-secondary: #eeeeee;
  --accent-color: var(--grey);
  --text-primary-color: #222;
}
:root.dark-theme {
  --background-color-primary: #1e1e1e;
  --background-color-secondary: #3f3f3f;
  --accent-color: #e4e4e4;
  --text-primary-color: #f3f3f3;
}

The next thing I did was to create a ThemeToggle component and add the it to the App component. ThemeToggle includes 3 parts: the template, the script and the style. For the template, I used input of a checkbox so I could switch between 2 modes. The styling was inspired by tq-bit's blog, which was one of the owner's suggestions.

In the script, I added one data that is userTheme and 3 methods. These include

• getMediaPreference() is used to retrieve the initial theme when the website is launched
• setTheme() will set the class name of the root element to "light-theme" or "dark-theme"
• toggleTheme() will switch to the other theme on user's click action

I also added a mounted() hook to set a theme for the website on initialization:

mounted() {
    const initUserTheme = this.getMediaPreference();
    this.setTheme(initUserTheme);
  },

After I sent my pull request, the owner requested some changes including removal of unnecessary class and refactoring code with shorter syntax for readability. For example, he suggested that I should use the ternary operator instead of traditional if ... else statements.

if (hasDarkPreference) {
  return "dark-theme";
} else {
  return "light-theme";
}

can be changed into

return hasDarkPreference ? "dark-theme" : "light-theme"

Final thoughts

Working with dark mode, I have learned a lot. Last time when I worked with Vue for my 4th contribution in Hacktoberfest, I only had to migrate the existing code to a newer version of Vue. This time, I got the chance to create a brand new component, which gave me better understanding of how the component works. I also learned the general steps to create a dark mode for an application and this is a good foundation for me to generate different themes not just with Vue but with any other frameworks as well.

The details of the PR can be found here