Easy way to add a dark theme on your website.

What is a dark theme?

A dark theme displays dark color in the maximum of the UI, reducing strain in our eyes. Recently, a dark theme is a common trend, that can be seen on most websites and apps.

Here in this blog, I am going to share one of the easy ways to add a dark theme when we click a button.

Turn Your webpage from here:

To here:

Our main concern is to change the theme, so we are not focusing on beauty and other functionality.

HTML

We are just creating a button, so we need just a single button tag in the HTML file.

<button id="myBtn">Push Me</button>

CSS

The below code is used to create the basic light theme on the page.

* {
    margin: 0;
    padding: 0;
    border: none;
    box-sizing: border-box;
}

body {
    font-family: 'Open Sans', sans-serif;
    background: #ededed;
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
}

button {
    color: #000;
    background: #fff;
    border: solid .12rem #121212;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 2rem;
    width: 4rem;
    border-radius: 7%;
}

The below code is concerned about the UI(User Interface) of the dark-theme.

.dark-mode {
    background: #121212;
}

.dark-mode > button {
    background: #000;
    color: #fff;
    border-color: #ededed;
}

JavaScript

This is the main script involved in giving the dark-theme to our website when the push me key is pressed.

document.getElementById("myBtn").addEventListener("click", function() {
    var element = document.body;
    element.classList.toggle("dark-mode");
});

Walla! Our fully functioning toggle dark theme is completed. Isn't it short and simple?

There is a small limitation, link to your JavaScript file in the body tag, and not in the head tag of your HTML code.

You can check the full functioning button by pressing here.

Comments

[Shafi]

I am no expert, but this is far from what you call a dark theme. What if your webpage have thousands of elements? Are you going to handpick each element one by one? Just think about how the JS file would look like, changing class on every element, you'll get shivers.
And what about saving user specific preferences? Would they have to switch to it every time they visit your site?

[Ishan Bagchi]

Thanks for the question. Actually, if I had plenty of elements on my webpage, still my JS file would be of the same length. Here in the JS is just adding the class dark-mode to the body tag when the button with the class myBtn is pressed. If more element is there our CSS file will increase. For eg: if I add a div tag with background color blue by default, and want to change it to yellow in the dark-mode, we just had to add the code below in the CSS file:

.dark-mode > div {
    background: yellow;
}

May this example help. :-)

[DigitalNXZ]

Looks good but I still miss a store function in your code :D

In a way to store it in the cookies whatever, without any pieces of information about the user/privacy.
I never learned JavaScript so it would be great to learn it.

"Our main concern is to change the theme, so we are not focusing on beauty and other functionality." - maybe in your next post ;) with a function?!

I'll look into your other posts, thank you.

[Ishan Bagchi]

Sure I'll write a blog on that too. Thanks for your suggestion. :-D