DEV Community 👩‍💻👨‍💻

Ishan Bagchi
Ishan Bagchi

Posted on

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:

Button Light

To here:

Button Dark

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>
Enter fullscreen mode Exit fullscreen mode

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%;
}
Enter fullscreen mode Exit fullscreen mode

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;
}
Enter fullscreen mode Exit fullscreen mode

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");
});
Enter fullscreen mode Exit fullscreen 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.

Top comments (4)

Collapse
 
shafiemoji profile image
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?

Collapse
 
ishanbagchi profile image
Ishan Bagchi Author

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. :-)

Collapse
 
digitalnxz profile image
DigitalNXZ • Edited on

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.

Collapse
 
ishanbagchi profile image
Ishan Bagchi Author

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

🌚 Life is too short to browse without dark mode