Actualizado el sábado, 11 enero, 2020

Selector día – noche en tu sitio web.

Cada vez esta más de moda (sobre todo en visualizaciones con un smartphone), diferenciar la visualización de un sitio web o  aplicación dependiendo de si es de día o es de noche.

Por eso mismo te presento un sencillo código html con css, con el cual podrás crear un selector para cambiar los colores de tu template a selección del usuario o visitante.

Comenzamos…

Code Html5

<h1>Selector - DÍA / NOCHE</h1>
<div class="switch-wrapper">
  <input id="switchCheckbox" type="checkbox">
  <span class="switch-label day">Día</span><label for="switchCheckbox" class="switch"></label>
  <span class="switch-label night">Noche</span></div>

Code CSS

$switch-width: 100px;
$switch-height: 40px;
$switchToggle-width: $switch-height;

$sky-day: #2196F3;
$sky-night: #023660;
$sun: #ffeb3b;
$sun-center: #ffc107;
$sun-light: rgba(255,235,255,0.4);
$moon: #ddd;
$moon-light: rgba(255,255,255,0.2);
$star: #fff;
$cloud: #fefefe;

body{
  padding: 20px;
  text-align: center;
  font-family: "Courier New", Courier, monospace;
  font-size: 16px;
  color: $sky-night;
  background-color: lighten($moon, 10%); 
}

h1{
  font-size: 1.8em;
}
.switch-wrapper{
  margin: 30px 0;
  font-size: 0;
}
.switch-wrapper input {display:none;}

.switch-label{
  font-size: 1rem;
  display: inline-block;
  line-height: $switch-height;
  vertical-align: top;
  padding: 5px 10px;
  transition: transform ease-in .2s;
  font-weight: bold;
  opacity: 0.6;
}
.switch {
  position: relative;
  display: inline-block;  
  width: $switch-width;
  height: $switch-height;
  cursor: pointer;
  border-radius: $switch-width/2;
  border: 2px solid #eee; 
  background-color: $sky-day;
   background-image:  
    radial-gradient(circle, $cloud 20%, transparent 30%),
    radial-gradient(circle, $cloud 20%, transparent 30%),
radial-gradient(circle, $cloud 20%, transparent 30%),
     radial-gradient(circle, $cloud 20%, transparent 30%),
    radial-gradient(circle, $cloud 20%, transparent 30%),
radial-gradient(circle, $cloud 20%, transparent 30%);
  background-size: 50% 50%, 60% 60%, 40% 40%, 40% 40%, 50% 50%, 40% 40%;
  background-position: 60% 82%, 80% 80%, 82% 80%, 110% 20%, 134% 12%, 130% 20%;
  background-repeat: no-repeat;
  -webkit-transition: .4s;
  transition: .4s;
  overflow: hidden;
}

.switch:before {
  position: absolute;
  content: "";
  height: $switch-height - 5;
  width: $switch-height - 5;
  top: 50%;
  left: 2px;
  cursor: pointer;
  transform: translateY(-50%);
  background-color: $sun;
  background-image: radial-gradient(circle, $sun-center 15%, $sun 100%);
  box-shadow: 0px 0px 20px 10px $sun-light;
  transition: transform ease-in .2s;
  border-radius: 50%;
  background-repeat: no-repeat;
}

.switch-label.day{
  transform: scale(1.1);
  opacity: 1;
}

input:checked ~ .switch {
  background-color: $sky-night;
  background-image:  
    radial-gradient(circle, $star 10%, transparent 30%),
    radial-gradient(circle, $star 10%, transparent 30%),
radial-gradient(circle, $star 10%, transparent 30%),
radial-gradient(circle, $star 10%, transparent 30%),
    radial-gradient(circle, $star 10%, transparent 30%),
    radial-gradient(circle, $star 10%, transparent 30%),
    radial-gradient(circle, $star 10%, transparent 30%),
    radial-gradient(circle, $star 10%, transparent 30%), 
    radial-gradient(circle, $star 10%, transparent 30%);
  background-size: 8% 8%, 7% 7%, 6% 6%, 8% 8%, 8% 8%, 6% 6%, 6% 6%, 8% 8%, 7% 7%;
  background-position: 20% 20%, 45% 30%, 25% 55%, 20% 90%, 40% 60%, 5% 50%, 58% 10%, 58% 60%, 50% 80%;
  background-repeat: no-repeat;
  
  &:before{
    background-color: $moon;
    background-image:  
    radial-gradient(circle, darken($moon,10%) 50%, transparent 50%),
    radial-gradient(circle, darken($moon,8%) 50%, transparent 50%), 
    radial-gradient(circle, darken($moon,8%) 50%, transparent 50%),
      radial-gradient(circle, darken($moon,8%) 50%, transparent 50%),;
  background-size: 40% 40%, 25% 25%, 50% 50%, 30% 30%;
  background-position: 20% 20%, 65% 30%, 120% 100%, 20% 80%;
  box-shadow: 0px 0px 20px 10px $moon-light;
  }
}

.switch-wrapper input:checked{
  ~ .switch-label.day{
    transform: scale(1);
    opacity: 0.6;
  }
  ~ .switch-label.night{
    transform: scale(1.1);
    opacity: 1;
  }
}

.switch-wrapper input:checked ~ .switch:before{
  transform: translate($switch-width - $switchToggle-width, -50%);
}

Un ejemplo del resultado, es:

Espero que te sea útil.