427 reads

How To Create A "Night Mode" For Your Website

by Nima OwjiDecember 31st, 2020

Too Long; Didn't Read

Are you interested in learning how to create a simple night mode for your website? In this article, I use jQuery and Bootstrap 5.

People Mentioned

Companies Mentioned

featured image - How To Create A "Night Mode" For Your Website

Are you interested in learning how to create a simple night mode for your website? In this article, I use jQuery and Bootstrap 5. You can use any version of Bootstrap. You can also use another framework or write your own CSS styles for night mode. Okay, let's start!

Downloading jQuery and Bootstrap

First of all, you should download Bootstrap and jQuery. You can also use a CDN for all of them.

If you don't know how to use jQuery, you can read my article about using jQuery which is published on Hackernoon. Click here to read!

Okay, you can download Bootstrap from here.

Creating Your files

When you downloaded them, you should create a folder called "Night Mode" and in that folder, you should create these files:

index.html
styles.css
nightmode.js

You should also paste Bootstrap and jQuery into this folder. Like this image:

"css" and "js" folders are our Bootstrap files!

Including our files

Now, you should open "index.html" with a code editor. I will use vs code!

After you opened our HTML file, you should write these codes in index.html:

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Dark theme</title>
    <link rel="stylesheet" href="css/bootstrap.min.css">
    <link rel="stylesheet" href="styles.css">
</head>

<body>

</body>

<script src="js/bootstrap.min.js"></script>
<script src="jquery-3.5.1.min.js"></script>
<script src="nightmode.js"></script>

</html>

As you can see here, I included jQuery, Bootstrap, styles.css, and nightmode.js to this page.

Creating a Switch For Night Mode

Now we need a switch to toggle night mode. You can use any kind of switch or you can also design your own switch.

In Bootstrap 5, there is a really nice switch. I will use it in this article!

You should write these codes to use the Bootstrap 5 switch:

<div class="form-check form-switch">
    <input class="form-check-input" type="checkbox" id="nightModeSwitch">
    <label class="form-check-label" for="nightModeSwitch">Night Mode</label>
</div>

I want to put this switch in the center of the page and I also want to make it a little larger with my own styles, so I will put this switch in a "div" tag with "myContainer" class. I also want to write my name under this switch.

Index.html file is like this now:

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Dark theme</title>
    <link rel="stylesheet" href="styles.css">
    <link rel="stylesheet" href="css/bootstrap.min.css">
</head>

<body>
    <div class="myContainer">
        <div class="form-check form-switch">
            <input class="form-check-input" type="checkbox" id="nightModeSwitch">
            <label class="form-check-label" for="nightModeSwitch">Night Mode</label>
        </div>
        <br>
        <h1>Created by Nima Owji</h1>
    </div>
</body>

<script src="js/bootstrap.min.js"></script>
<script src="jquery-3.5.1.min.js"></script>
<script src="nightmode.js"></script>

</html>

Writing our styles in the "styles.css" file

Now, we should write our styles in "styles.css". Before we writing our styles, our page is this:

I want to put them in the center of the page and make that switch a little larger. So let's open the "styles.css" file.

I will start by putting them in the center of the page. So we should assign these styles to "myContainer" div.

.myContainer {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100vh;
    transition: 0.5s;
}

After that, I want to make that switch a little larger. So I will assign these styles to the ".form-check" class which is one of the Bootstrap classes.

.form-check {
    transform: scale(3);
}

Now, the page is like this:

You can also add a transition to make it smoother! Like this:

.bg-dark,
.text-light {
    transition: 0.5s;
}

How to redesign the page for night mode?

If you are using Bootstrap like me, there are two classes in Bootstrap for night mode. "bg-dark" and "text-light". If we add these two classes to our element, it will be dark.

If you are not using Bootstrap, you should create a class in your CSS and assign some styles like "background-color: black;" and "color: white;" to that class.

Then we will add these classes to all of our elements with js when night mode enabled!

Writing Your JavaScript Codes

Okay, now we should open the "nightmode.js" file in our code editor and write these codes:

var nightModeSwitch = document.getElementById("nightModeSwitch");
var isNightModeEnabled = false;

nightModeSwitch.addEventListener("click", function() {

    isNightModeEnabled = nightModeSwitch.checked;

    $("*").toggleClass("bg-dark text-light");

});

In these codes, we assigned our switch to "nightModeSwitch" variable. We can access it whenever we want.

After that, we defined a boolean variable called "isNightModeEnabled" to save the night mode state. You can also save this variable in a cookie and check if the user turned it on before.

Then we will add the "onclick" event to the night mode switch and we will assign the switch value to the "isNightModeEnabled" variable.

We will also add or remove "bg-dark" and "text-light" classes to all of our elements using jQuery. When we use "toggleClass", it will add these classes when the elements don't have them and will remove classes when the elements have them!

Finished, it's complete now.

Now, it looks like this:

I hope you liked this

I hope you liked this. My name is Nima Owji. I am a 14-year-old programmer. Don't forget to like it and share this with all of your friends! You can also tweet this and mention me in your tweet! If you have any questions, please don't hesitate to contact me.