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 (@ - ,@ - ,@ ,@ - ) { : @ - ; : @ - ; { : @menu; .menu.transition.visible { : @menu; } } { : @font-color; } { : @card-bg; .header, .meta { : @font-color; } } } .theme bg color font color menu card bg background-color bg color color font color .menu background-color background-color .text color .ui .card background-color color 2. Including our mixin in the style-sheet meant to be imported in the entry javascript(index.js) or the topmost component(App.js) @ ; // @ - : # ; @ - : rgba( , , , ); // @ - : rgb( , , ); @ - : # ; @ - : rgba( , , , ); { .theme(@algae-bg,@dark-font,@algae-menu,@algae-card); } // @ - : # ; @ - : # ; @ - : # b1c1d; { .theme(@charcoal-bg,@light-font,@charcoal-menu,@charcoal-card); } // @ - : rgb( , , ); @ - : rgb( , , ); @ - : rgba( , , , ); { .theme(@lavender-bg,@dark-font,@lavender-menu,@lavender-card); } // @ - : #f4f4f4; @ - : rgba( , , , ); @ - : #fff; { .theme(@paper-bg,@dark-font,@paper-menu,@paper-card); } import "./Theme.less" generic dark font 333 light font 255 255 255 0.9 algae algae bg 191 211 206 algae menu 116466 algae card 140 170 150 0.7 body .algae charcoal charcoal bg 373737 charcoal menu 272727 charcoal card 1 body .charcoal lavender lavender bg 224 191 224 lavender menu 180 140 180 lavender card 219 212 196 0.699 body .lavender paper paper bg paper menu 110 110 110 1 paper card body .paper 3. Write your code to allow the user to change the class of the <body> element. In my case, I have provided a drop-down. setTheme(themeName) { .getElementById( ).className = themeName; localStorage.setItem( , themeName); } document "body" "theme" this.setTheme("algae")} /> this.setTheme("charcoal")} /> this.setTheme("lavender")} /> this.setTheme("paper")} /> < = > Dropdown text "Select Theme" item < > Dropdown.Menu < = = => Dropdown.Item content "Algae" onClick {() < = = => Dropdown.Item content "Charcoal" onClick {() < = = => Dropdown.Item content "Lavender" onClick {() < = = => Dropdown.Item content "Paper" onClick {() </ > Dropdown.Menu </ > Dropdown 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. .onload = { (localStorage.getItem( )) { .getElementById( ).className = localStorage.getItem( ) || ; } }; window ( ) function if "theme" document "body" "theme" "paper" All done !! And the GitHub page of that repository, https://github.com/bearded-impala/CSS-Theming https://bearded-impala.github.io/CSS-Theming Thanks for reading.
