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:
-
Write a CSS mixin containing classes of the DOM elements we want to style as a part of our theme
-
Including our mixin in the style-sheet meant to be imported in the entry javascript(index.js) or the topmost component(App.js)
-
Write your code to allow the user to change the class of the
element. In my case, I have provided a drop-down. -
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 !!
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)