Creating dark mode for the first time 
Tags: opensource, osd600
Published: 2021-11-19 03:03:53

### The issue

Looking through my classmates' contributions for Hacktoberfest, I found [badge-generator](https://github.com/MichaelCurrin/badge-generator) - a cool tool that helps us create markdown badges for our documentations. The owner wants to implement the [dark mode](https://github.com/MichaelCurrin/badge-generator/issues/106) for the site, and since the tool is written with [VueJS](https://vuejs.org/), 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.

```css
: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](https://dev.to/tqbit/create-your-own-dark-mode-toggle-component-with-vue-js-1284), 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:
```javascript
mounted() {
    const initUserTheme = this.getMediaPreference();
    this.setTheme(initUserTheme);
  },
```

After I sent my [pull request](https://github.com/MichaelCurrin/badge-generator/pull/130), 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.
```javascript
if (hasDarkPreference) {
  return "dark-theme";
} else {
  return "light-theme";
}
```
can be changed into
```javascript
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](https://github.com/MichaelCurrin/badge-generator/pull/130)