DEV Community

bearded-impala
bearded-impala

Posted on

Implement Themes/Dark Mode in Your Front-End in 5 Minutes

No matter if you write your own CSS or use frameworks such as Semantic or Bootstrap, implementing dark mode is often the most procrastinated feature

Letโ€™s cut to the chase:

  1. Write a CSS mixin containing classes of the DOM elements we want to style as a part of our theme

  2. Including our mixin in the style-sheet meant to be imported in the entry javascript(index.js) or the topmost component(App.js)

  3. Write your code to allow the user to change the class of the

    element. In my case, I have provided a drop-down.
    Now depending on whether you want a light switch to go dark or a dropdown to select from multiple themes (Iโ€™m using a DropDown from Semantic UI), you can have the same setTheme method for the onChange event.
  4. Everything should work now unless the user refreshes. The setTheme method already sets the body class and stores userโ€™s selection to localStorage, but we need to read that on a page load or refresh. Place the following script in your appโ€™s entry point, either index.html or index.js, preferably the latter.

All done !!

GitHub logo bearded-impala / CSS-Theming

A framework/library agnostic way to implement themes in CSS

And the GitHub page of that repository,
https://bearded-impala.github.io/CSS-Theming

Thanks for reading.

Top comments (0)