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)

How did this page load so fast?

Caching at DEV

  • DEV uses caching to speed up page loads and reduce server load
  • Redis caching system is used for frequently accessed data
  • Expiration policies are applied depending on data type
  • Caching system is monitored and optimized for performance
  • Caching has helped improve user experience and scale the platform