Oramai è una moda quella della dark mode. Personalmente credo che in alcuni casi sia utile, in altri è solo un modo per essere trendy 2.0

In questo post un esempio di come poter trafromare il vostro sito in dark mode. Meglio, far scegliere all’utente se usare il tema scuro o chiaro

Esempio

file 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>

file 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;
}

file 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)
        }

Lascia un commento