The easiest way to add a light/dark theme to your website

Hi, hope you guys are doing good 😀

As we know, The Dark Mode Themes are trending nowadays. Whether its a mobile app, website, PC app, or anything, everyone shows great interest in Dark Themes.

Similarly, web designers and web developers are also working to add dark mode feature on their projects as well. Most of the big brands like Facebook, WhatsApp, Instagram, Google Chrome and many other platforms have introduced dark modes and users have appreciated a lot.

So, I will share a very basic and straight-forward technique using basic CSS and JS that can be used by beginner to advanced developers to add dark mode to there website.

The power of CSS Variables

First of all, lets discuss about color schemes. It is a very good practice in CSS to create variables in :root for each and every color you have used in your stylesheet. You can use those colors by referring to corresponding variables instead of copying color codes everywhere. Also, if you have to change color, just change the variable's value. So, first, any color you have in your stylesheet, create a variable for that. You can learn CSS Variables on W3Schools or Mozilla Dev Network. Remember, if you want to switch any colors (e.g. light/dark themes), separately create currently used variables.

Example

:root {
    /*Global color pallete*/
    --light-background-color: #ffffff;
    --light-foreground-color: #341f97;
    --dark-background-color: #000000;
    --dark-foreground-color: #48dbfb;

    /*Currently used*/
    --cur-bg: var(--light-background-color);
    --cur-fg: var(--light-foreground-color);
}

Manipulating Stylesheets using JS

When you are done with styling the default theme colors, use Javascript to directly modify the stylesheet. Use the following scheme.

Define the :root for both dark and light themes in JS for convenience.

const lightThemeRoot = ":root { --light-background-color: #ffffff; --light-foreground-color: #341f97; --dark-background-color: #000000; --dark-foreground-color: #48dbfb; --cur-bg: var(--light-background-color); --cur-fg: var(--light-foreground-color);}";

const darkThemeRoot = ":root { --light-background-color: #ffffff; --light-foreground-color: #341f97; --dark-background-color: #000000; --dark-foreground-color: #48dbfb; --cur-bg: var(--dark-background-color); --cur-fg: var(--dark-foreground-color);}";

Find the Stylesheet Index of the CSS file where you defined color variables to be used in switching themes.

const MY_CSS_FILE = window.location.origin + "/css/style.css"; //store path to your css file here
var myFileIndex = 0;
const ALL_CSS_FILES = document.stylesheets;
for(i = 0; i < ALL_CSS_FILES.lengh; i++) {
    if(ALL_CSS_FILES.item(i).href == MY_CSS_FILE) {
        myFileIndex = i;
    }
}
//now we have the file index i

Manipulate the :root of stylesheet to switch theme when a button is clicked.

if(ALL_CSS_FILES.item(myFileIndex).rules.item(':root').cssText == lightThemeRoot) {
    ALL_CSS_FILES.item(myFileIndex).removeRule(':root');
    ALL_CSS_FILES.item(myFileIndex).insertRule(darkThemeRoot);
} else {
    ALL_CSS_FILES.item(myFileIndex).removeRule(':root');
    ALL_CSS_FILES.item(myFileIndex).insertRule(lightThemeRoot);    
}

Finishing

Finally, lets bring all this together so that you can better understand the scenario.

HTML Element

<span onclick="switchTheme();">Switch Theme</span>

CSS Root

:root {
    /*Global color pallete*/
    --light-background-color: #ffffff;
    --light-foreground-color: #341f97;
    --dark-background-color: #000000;
    --dark-foreground-color: #48dbfb;

    /*Currently used*/
    --cur-bg: var(--light-background-color);
    --cur-fg: var(--light-foreground-color);
}

JS Method

function switchTheme() {
    //remember to change these variables if you change the :root in CSS
    const lightThemeRoot = ":root { --light-background-color: #ffffff; --light-foreground-color: #341f97; --dark-background-color: #000000; --dark-foreground-color: #48dbfb; --cur-bg: var(--light-background-color); --cur-fg: var(--light-foreground-color);}";
    const darkThemeRoot = ":root { --light-background-color: #ffffff; --light-foreground-color: #341f97; --dark-background-color: #000000; --dark-foreground-color: #48dbfb; --cur-bg: var(--dark-background-color); --cur-fg: var(--dark-foreground-color);}";


    //switching scheme
    const MY_CSS_FILE = window.location.origin + "/css/style.css"; //store path to your css file here
    var myFileIndex = 0;
    const ALL_CSS_FILES = document.stylesheets;
    for(i = 0; i < ALL_CSS_FILES.lengh; i++) {
        if(ALL_CSS_FILES.item(i).href == MY_CSS_FILE) {
            myFileIndex = i;
        }
    }
    if(ALL_CSS_FILES.item(myFileIndex).rules.item(':root').cssText == lightThemeRoot) {
        ALL_CSS_FILES.item(myFileIndex).removeRule(':root');
        ALL_CSS_FILES.item(myFileIndex).insertRule(darkThemeRoot);
    } else {
        ALL_CSS_FILES.item(myFileIndex).removeRule(':root');
        ALL_CSS_FILES.item(myFileIndex).insertRule(lightThemeRoot);    
    }
}

Conclusion

There are a lot of different methods to achieve the dark theme. But here I have shared the most straight-forward and basic method to do this. So, tell me in comments, which method do you use and prefer for applying the dark theme in website!

Blog