html css mode change

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.

style.css

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

function.js

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

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

    • Thank you very much, First tell me your website based on which language? or you are using any CMS like wordpress?

  1. 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.

  2. 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)
    }

  3. 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.

LEAVE A REPLY

Please enter your comment!
Please enter your name here