How to add dark mode to your websites with CSS ?

This is my second article related to CSS, i'm in love with this maybe coz in the #100DaysOfCode challenge i did CSS all the 60days.

So,

Necessary thing that the user finds on a website is the ease of using and reading. Dark mode is a trend (i think so) that many websites uses and many will use after reading this (you will😂) Article.

So basically we're going to have 3 different options for the theme - Auto, Light and Dark.

Hmm.. I won't be showing you how to add those 3 on your website (it's understandable).

Let's dig in it..

Adding the HTML

Let's start with the HTML, you can think of the value attribute as being the identifier for each theme:

<select id="theme">
    <option value="auto">Auto</option>
    <option value="light">Light</option>
    <option value="dark">Dark</option>
</select>

Adding the CSS

Let's now add a bit of CSS to the body element, here is where you specify your colors for the Light Theme using CSS Variables (Here you can add many modes also except dark one 😂😂):

body {
    --background-color: #ffffff;
    --text-color: #000000;
}

Next, you'll want to make use of your CSS Variables throughout your style sheet - this is key to how our solution is going to work. You may do:

.main-content {
    background: var(--background-color);
    color: var(--text-color);
}

.nav {
    color: var(--text-color);
}

We're going to be applying a dark theme by simply changing the values of the above declared variables in examples where we're going to be using a dark theme. Herez the CSS:

:root {
    --dark-background-color: #111111;
    --dark-text-color: #eeeeee;
}

body.theme-dark {
    --background-color: var(--dark-background-color);
    --text-color: var(dark-text-color);
}

Now, if you add the theme-dark class to your <body> element, you should see the dark theme working.

Implementing our Auto option now:

media (prefers-color-scheme: dark) {
    body.theme-auto {
        --background-color: var(--dark-background-color);
        --text-color: var(--dark-text-color);
    }
}

So basically "Does the operating system prefer dark mode, and does the <body> have a class of theme-auto? If it is then let's use Dark Mode."

See the website on your phone with Dark Mode enabled.

Adding the JavaScript

Now that our CSS is working(your's will work too if it doesn't try finding the where you went wrong), we can move onto getting our theme selector drop-down to work. Let's add the following JavaScript:

function applyTheme(theme) {
    document.body.classList.remove("theme-auto", "theme-light", "theme-dark");
    document.body.classList.add(`theme-${theme}`);
}

document.addEventListener("DOMContentLoaded", () => {
   document.querySelector("#theme").addEventListener("change", function() {
        applyTheme(this.value);
   });
});

Here, we are waiting for the DOM (Document Object Model) to be ready for us to start using it, and once it's ready, we are listening for when the user chooses an option in the theme selector drop-down. Once they choose an option, we remove all existing theme classes from the <body> (if any) and then simply add the selected theme with this.value.

So done with this so called tutorial, i learned this from YouTube. This Video.

Thanks for Reading 🤘

Search This Blog

RAHULISM