DocSF

DocSF

Did You Know?

Advanced visual search system powered by Ajax

Come creare un sito in modalità dark mode

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

Related Post

Il vantaggio della surroga. Scopri come rispa

Continua il successo dei mutui di surroga. A dieci anni...

Come creare uno script php per recuperare gli

<?php error_reporting(E_ALL); $feedURL = 'https://ww...

Allenamento trading

Una delle palestre più efficaci per tutti coloro i qua...

Leave a Comment