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: Dark theme <!DOCTYPE html> < = > html lang "en" < > head < = > meta charset "UTF-8" < = = > meta name "viewport" content "width=device-width, initial-scale=1.0" < > title </ > 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: Night Mode < = > div class "form-check form-switch" < = = = > input class "form-check-input" type "checkbox" id "nightModeSwitch" < = = > label class "form-check-label" for "nightModeSwitch" </ > 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: Dark theme Night Mode Created by Nima Owji <!DOCTYPE html> < = > html lang "en" < > head < = > meta charset "UTF-8" < = = > meta name "viewport" content "width=device-width, initial-scale=1.0" < > title </ > 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" </ > label </ > div < > br < > h1 </ > 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. { : flex; : column; : center; : center; : ; : ;
} .myContainer display flex-direction align-items justify-content 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. { : (3);
} .form-check transform scale 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: nightModeSwitch = .getElementById( ); isNightModeEnabled = ;

nightModeSwitch.addEventListener( , {

    isNightModeEnabled = nightModeSwitch.checked;

    $( ).toggleClass( );

}); var document "nightModeSwitch" var false "click" ( ) function "*" "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.

How to Put a "Send us a Private Message" Button in a Tweet

How to Use jQuery: An Introduction to the JavaScript Library

Follow me on Twitter!

2021 - HackerNoon Contributor of the Year - HTML

2021 - HackerNoon Contributor of the Year - CSS

Nominated for 2022 - HackerNoon Contributor of the Year - Product Hunt

Nominated for 2022 - HackerNoon Contributor of the Year - News

Nominated for 2022 - HackerNoon Contributor of the Year - Instagram

Too Long; Didn't Read

Make resilience your competitive advantage

How To Create A "Night Mode" For Your Website

How To Create A "Night Mode" For Your Website

About Author

Comments

TOPICS

THIS ARTICLE WAS FEATURED IN

Related Stories

Untitled Story

CSS Grid Layout: How It Works

10 Fascinating PHP and PHP-friendly admin templates

20+ Bootstrap 4 Template for 2020

15 Best Web Development Tools To Use In 2021

6 Reasons for Using Bootstrap Framework

CSS Grid Layout: How It Works

10 Fascinating PHP and PHP-friendly admin templates

20+ Bootstrap 4 Template for 2020

15 Best Web Development Tools To Use In 2021

6 Reasons for Using Bootstrap Framework

Light-Mode

Classic

Newspaper

Dark-Mode

Neon Noir

Minty

HN StartUps