© ‧ Watu X Team | All Rights Reserved.

Developed by Additional Articles

Menu Atas

Iklan

› BLACKHAT HTML CSS Mode Change With JavaScript | Switch Light & Dark Mode 2023 | Watu X Team
Friday, September 22, 2023, September 22, 2023 WIB
Last Updated 2023-09-22T21:35:21Z
BLACKHAT

HTML CSS Mode Change With JavaScript | Switch Light & Dark Mode 2023 | Watu X Team

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



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.


HTML 
<!DOCTYPE html>
<!-- code by Watu-X-Team ( https://watuxteam.com ) -->
<html>
 
<head>
  <meta charset="UTF-8">
  <title>Dark &amp; Light Mode | Watuxteam.com</title>
      <link rel="stylesheet" href="style.css">
 
</head>
 
<body>
 SSC
   <div class="container">
        <h1>Light &amp; Dark Mode</h1>
	    <h2>Coe By Watu-X-Team</h2>
 
        <input class="container_toggle" type="checkbox" id="switch" name="mode">
        <label for="switch">Toggle</label>
    </div>
 
 <script  src="function.js"></script>
</body>
 
</html>


CSS <\BODY>  
/** code by Watu-X-Team ( https://Watuxteam.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;
}
JS  <\HEAD> 
/** code by Watu-X-Team ( https://watuxteam.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)
        }


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.
icon-email