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:
- CSS Animated Contact Form
- HTML CSS Smooth Scrolling
- Animated CSS Image Cards
- 3D Image Gallery With CSS
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.
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.
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.
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.
Hello sir I love your blog I need admin panel to my website pls make one blog about it
Thank you very much, First tell me your website based on which language? or you are using any CMS like wordpress?
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.
sure, I will update soon.
Wow 😮 ….. Don’t know what 😦 say 🙊….. 😘😍😘💪👍👍👍
Thank you very much, stay connected.
Wow Bravo 😉😉😉
Thank you very much, Stay connected.
Data structures of HTML and CSS are unique ?
Sorry, I don’t get it. Please explain.
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)
}
Thanks for your recommendation, Today I learn something new.
It is changing from light to dark mode but not doing vice versa .please help.
Message me on Facebook – facebook page
Hii
Can you create for me Admin sidenavbaar with drop down menu and
Sure, I will post soon. Stay connected.
When I press toggle nothing happens can you help?
Have you copied the same codes as given?
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.
You are the best! Thank you!