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.

You May Also Like:

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.

index.html <!DOCTYPE html> <!-- code by webdevtrick ( https://webdevtrick.com ) --> <html> <head> <meta charset="UTF-8"> <title>Dark & Light Mode | Webdevtrick.com</title> <link rel="stylesheet" href="style.css"> </head> <body> <div class="container"> <h1>Light & 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> 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 <!DOCTYPE html> <!-- code by webdevtrick ( https://webdevtrick.com ) --> <html> <head> <meta charset = "UTF-8" > <title> Dark & Light Mode | Webdevtrick.com </title> <link rel = "stylesheet" href = "style.css" > </head> <body> <div class = "container" > <h1> Light & 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>

style.css

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

style.css /** 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; } 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 /** 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.

function.js /** 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) } 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 /** 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.