Skip to main content

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%;
}
.dark-mode {
    background: #121212;
}

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

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.

Labels

Labels:

Comments

Post a Comment

Popular posts from this blog

Windows Terminal Context Menu - How To Setup

When I heard about The new Windows Terminal I was mind Blown because of how beautiful it is to customize your own terminal window. Terminals are one tool most programmers use to automatically generate something or build something. So having this kind of terminal is awesome. After Downloading the terminal there is something missing. And that is opening the Windows Terminal in the context menu. What A context menu is when you right-click on a directory and an option will show up. Something like this image. This is really a good feature to have because you can just easily open your project by doing it. And so because of that, I created a simple PROJECT that is easy and simple to setup. So, to set up this, Important You should have installed the Windows Terminal on your system. If you haven't installed yet, you can go to these options to download the app: Microsoft Store - you directly download it on the Mic...
Post a Comment
Read more

Solid - The best JavaScript UI library?

A while ago, I wrote a post on some of the most important advantages of Svelte. Back then, the framework had just received a major update, and it was quite a hot topic to cover. Now, after the dust has settled, Svelte still has a lot going for it, but it also has some drawbacks that previously went unnoticed. I don't want to rant over these small issues because that's not the point of this article, and besides - I really like Svelte! But for your information, these are: TypeScript support - although it's been added recently, it wasn't there at the time Svelte exploded in popularity. Thus, most of its still small, but very important for the framework ecosystem will most likely not support it. Syntax differences - Svelte feels good when you get used to it, but because of its compiler-bas...
Post a Comment
Read more