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
Amit Meena@amit_meena18:17 PM - 03 Mar 2020
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
Write your code to allow the user to change the class of theelement. 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,
Thanks for reading.
Top comments (0)