Home Web Design CSS HTML CSS Mode Change With JavaScript | Switch Light & Dark Mode

HTML CSS Mode Change With JavaScript | Switch Light & Dark Mode

May 26, 2019

28069

How to add a feature for switch day or night mode on a website? See this HTML CSS Mode Change With JavaScript, Switch Light & Dark Mode.

I am sure that, you had seen light and dark mode on some websites and browsers. Many peoples love dark background with white text, that’s why this feature comes. This is nothing else, its all about the color change. The best thing about this effect is, you can customize your view according to day and night.

Now question is that how we can create dark and light mode on our website? The solution is here. Today I am sharing HTML CSS Mode Change With JavaScript program. In other words, Switch light and dark mode feature. You can add this feature on your websites also, after understanding the code.

This is a CSS based mode change program, But JavaScript also has a major role. Because CSS change the color and style property, but javascript manage the whole program listening to toggle button. I had used a toggle button to switch light and dark mode. No any library used in this program, this is in pure HTML CSS & JavaScript.

If now you are thinking how this program actually looks, then see the preview given below.

Preview Of Switch Light & Dark Mode

See this video preview to getting an idea of how this program looks like.

Now you can see this program visually. If you like this then get the source code of its.

HTML CSS Mode Change With JavaScript Source Code

Before sharing source code, let’s talk about the program. As you know this is an HTML CSS Mode Change program. Basically, with this program, you can switch light to dark mode. The whole program is CSS var (get info) based, I used CSS variable to change color. Because the variable method is easy to work, you don’t need to put the same color in multiple fields. Just create a variable and put var name all place.

I put all conditions for dark and light mode in CSS, & I used javascript as a controller. JavaScript listen to the toggle switch and change value according to request.

For creating this program you have to create 3 files. First for HTML, second for CSS, and third for JavaScript. Follow the steps to creating this program without any error.

index.html

Create an HTML file named ‘index.html‘ and put these codes given here below.

<!DOCTYPE html>
<!-- code by webdevtrick ( https://webdevtrick.com ) -->
<html>

<head>
  <meta charset="UTF-8">
  <title>Dark &amp; Light Mode | Webdevtrick.com</title>
      <link rel="stylesheet" href="style.css">
 
</head>

<body>

   <div class="container">
        <h1>Light &amp; Dark Mode</h1>
	    <h2>Coe By WebDevTrick.Com</h2>

        <input class="container_toggle" type="checkbox" id="switch" name="mode">
        <label for="switch">Toggle</label>
    </div>

 <script  src="function.js"></script>
</body>

</html>

<!DOCTYPE html>

<html>

<head>

<title>Dark & Light Mode | Webdevtrick.com</title>

</head>

<body>

<h1>Light & Dark Mode</h1>

<h2>Coe By WebDevTrick.Com</h2>

<label for="switch">Toggle</label>

</div>

</body>

</html>

style.css

Create a CSS file named ‘style.css‘ and put these codes.

/** code by webdevtrick ( https://webdevtrick.com ) **/
@import url("https://fonts.googleapis.com/css?family=Fredoka+One&display=swap");
html {
  background: var(--backg);
  --btn: #2ab1ce;
  --backg: #fff;
  --colorx: #232323;
	  width: 100%;
  height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

html[data-theme='dartheme'] {
  background: var(--backg);
  --btn: #ea4b3c;
  --backg: #232323;
  --colorx: #fff;
}

h1 {
  font-family: 'Fredoka One', cursive;
  font-weight: 300;
  color: var(--colorx);
}
h2 {
  font-family: 'Fredoka One', cursive;
  font-weight: 100;
  color: var(--colorx);
}

input[type=checkbox] {
  visibility: hidden;
  height: 0;
  width: 0;
  
}

label {
  margin: 0 auto;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 100px;
  position: relative;
  cursor: pointer;
  text-indent: -9999px;
  width: 55px;
  height: 30px;
  background: var(--btn);
}

label:after {
  border-radius: 50%;
  position: absolute;
  content: '';
  background: #fff;
  width: 20px;
  height: 20px;
  top: 5px;
  left: 4px;
  transition: ease-in-out 200ms;
}

input:checked + label {
  background: #ea4b3c;
}

input:checked + label:after {
  left: calc(100% - 5px);
  transform: translateX(-100%);
}

html.transition,
html.transition *,
html.transition *:before,
html.transition *:after {
  transition: ease-in-out 200ms !important;
  transition-delay: 0 !important;
}

/** code by webdevtrick ( https://webdevtrick.com ) **/

@import url("https://fonts.googleapis.com/css?family=Fredoka+One&display=swap");

html {

background: var(--backg);

--btn: #2ab1ce;

--backg: #fff;

--colorx: #232323;

width: 100%;

height: 100vh;

display: flex;

flex-direction: column;

justify-content: center;

align-items: center;

}

html[data-theme='dartheme'] {

background: var(--backg);

--btn: #ea4b3c;

--backg: #232323;

--colorx: #fff;

}

h1 {

font-family: 'Fredoka One', cursive;

font-weight: 300;

color: var(--colorx);

}

h2 {

font-family: 'Fredoka One', cursive;

font-weight: 100;

color: var(--colorx);

}

input[type=checkbox] {

visibility: hidden;

height: 0;

width: 0;

}

label {

margin: 0 auto;

display: flex;

justify-content: center;

align-items: center;

border-radius: 100px;

position: relative;

cursor: pointer;

text-indent: -9999px;

width: 55px;

height: 30px;

background: var(--btn);

}

label:after {

border-radius: 50%;

position: absolute;

content: '';

background: #fff;

width: 20px;

height: 20px;

top: 5px;

left: 4px;

transition: ease-in-out 200ms;

}

input:checked + label {

background: #ea4b3c;

}

input:checked + label:after {

left: calc(100% - 5px);

transform: translateX(-100%);

}

html.transition,

html.transition *,

html.transition *:before,

html.transition *:after {

transition: ease-in-out 200ms !important;

transition-delay: 0 !important;

}

function.js

Now create a JavaScript file named ‘function.js‘ and put the codes.

 /** code by webdevtrick ( https://webdevtrick.com ) **/
 var checkbox = document.querySelector('input[name=mode]');

        checkbox.addEventListener('change', function() {
            if(this.checked) {
                trans()
                document.documentElement.setAttribute('data-theme', 'dartheme')
            } else {
                trans()
                document.documentElement.setAttribute('data-theme', 'lighttheme')
            }
        })

        let trans = () => {
            document.documentElement.classList.add('transition');
            window.setTimeout(() => {
                document.documentElement.classList.remove('transition');
            }, 1000)
        }

/** code by webdevtrick ( https://webdevtrick.com ) **/

var checkbox = document.querySelector('input[name=mode]');

checkbox.addEventListener('change', function() {

if(this.checked) {

trans()

document.documentElement.setAttribute('data-theme', 'dartheme')

} else {

trans()

document.documentElement.setAttribute('data-theme', 'lighttheme')

}

})

let trans = () => {

document.documentElement.classList.add('transition');

window.setTimeout(() => {

document.documentElement.classList.remove('transition');

}, 1000)

}

That’s It. Now you have successfully created an HTML CSS Mode Change With JavaScript or Switch Light & Dark Mode. If you have any doubt or question comment down below.

Thanks For Visiting, Keep Visiting.

20 COMMENTS

Karan May 26, 2019 At 5:28 pm

Hello sir I love your blog I need admin panel to my website pls make one blog about it

Reply
- shaan May 26, 2019 At 5:36 pm
  
  Thank you very much, First tell me your website based on which language? or you are using any CMS like wordpress?
  
  Reply
Maxime May 26, 2019 At 7:20 pm

Unfortunately, the following won’t work in IE if you have to support it since they don’t have any support for CSS variables. So it only gives us the choice to change CSS stylesheet on-the-fly.

Maybe you should update your article to mention it.

Reply
- shaan May 27, 2019 At 2:20 am
  
  sure, I will update soon.
  
  Reply
Ozumba Galatico Rooney May 26, 2019 At 9:52 pm

Wow 😮 ….. Don’t know what 😦 say 🙊….. 😘😍😘💪👍👍👍

Reply
- shaan May 27, 2019 At 2:19 am
  
  Thank you very much, stay connected.
  
  Reply
Ankit sharma May 27, 2019 At 2:56 am

Wow Bravo 😉😉😉

Reply
- shaan May 27, 2019 At 3:53 am
  
  Thank you very much, Stay connected.
  
  Reply
Beginner May 27, 2019 At 4:03 am

Data structures of HTML and CSS are unique ?

Reply
- shaan May 27, 2019 At 6:15 am
  
  Sorry, I don’t get it. Please explain.
  
  Reply
Hendra Widjaja May 27, 2019 At 12:07 pm

You can make function.js shorter. Why don’t you pack document.documentElement.setAttribute directly inside function trans() and use if-else shorthand?

/** code by webdevtrick ( https://webdevtrick.com ) **/
var checkbox = document.querySelector(‘input[name=mode]’);

checkbox.addEventListener(‘change’, function() {
(this.checked) ? trans(‘darktheme’) : trans(‘lighttheme’)
})

let trans = (theme) => {
document.documentElement.classList.add(‘transition’);
window.setTimeout(() => {
document.documentElement.classList.remove(‘transition’);
}, 1000)

document.documentElement.setAttribute(‘data-theme’, theme)
}

Reply
- shaan May 27, 2019 At 2:47 pm
  
  Thanks for your recommendation, Today I learn something new.
  
  Reply
rhitik khanna May 27, 2019 At 3:28 pm

It is changing from light to dark mode but not doing vice versa .please help.

Reply
- shaan May 27, 2019 At 5:07 pm
  
  Message me on Facebook – facebook page
  
  Reply
Yash June 4, 2019 At 1:53 am

Hii
Can you create for me Admin sidenavbaar with drop down menu and

Reply
- shaan June 4, 2019 At 2:39 am
  
  Sure, I will post soon. Stay connected.
  
  Reply
Jorg June 29, 2019 At 1:18 am

When I press toggle nothing happens can you help?

Reply
- shaan June 29, 2019 At 4:25 am
  
  Have you copied the same codes as given?
  
  Reply
linksbo July 15, 2020 At 12:12 am

Set of Alternative Linksbo Links
Today is significantly developing, making it easier for people to
access computerized networks. Until now there are numerous on-line gambling games that can be played by anybody online.
Therefore, betting lovers no lengthier need to go to the casino to learn gambling, this is fairly simple for them in order to play anytime plus anywhere without limits.

Reply
Jim November 21, 2020 At 4:34 am

You are the best! Thank you!

Reply