Modo oscuro para blogger y wordpress

En la actualiad tener modo oscuro en cualquier dispositivos se ha vuelto una necesidad, en esta ocasion voy compartir el script que utilizo para tener mi blog en modo dark.

Instalacion

Primero ve a blogger, inicia sesion, ve al panel de admistracion / Tema / Edicion HTML. Busca la etiqueta *b:skin* y pega el siguiente codigo:

En el caso de wordpress, ve a la carpeta de tu tema de wordpress y agrega el siguiente codigo en style.css, luego ve a buscar footer.php para agregar los scripts.

Estilos

:root {
  --bg-color: #fec150;
  --font-color: #222;
  --title-color: #0067e6;
  --title-background: #fff;
  --main-border: 1px solid rgba(255, 255, 255, 0.4);;
  --main-bg: rgba(255, 255, 255, 0.4);;
}
[data-theme="dark"] body {
  background: black;
}
  .theme-switch-wrapper {
  display: flex;
  align-items: center;
}
.theme-switch-wrapper em {
  margin-left: 10px;
  font-size: 1rem;
}
.theme-switch {
  display: inline-block;
  height: 34px;
  position: relative;
  width: 60px;
}
.theme-switch input {
  display: none;
}
.slider {
  background-color: #ccc;
  bottom: 0;
  cursor: pointer;
  left: 0;
  position: absolute;
  right: 0;
  top: 0;
  transition: 0.4s;
  border-radius: 34px;
}
.slider:before {
  background-color: #fff;
  bottom: 4px;
  content: "";
  height: 26px;
  left: 4px;
  position: absolute;
  transition: 0.4s;
  width: 26px;
  border-radius: 50%;
}
input:checked + .slider {
  background-color: #6FCBE5;
}
input:checked + .slider:before {
  transform: translateX(26px);
}
.slider svg {
  color: #222;
  position: absolute;
  transition: opacity 0.2s ease 0s, transform 0.35s ease 0s;
  pointer-events: none;
}
.feather-moon {
  opacity: 0;
  left: 9px;
  bottom: 9px;
  transform: translateX(4px);
}
.feather-sun {
  opacity: 1;
  right: 10px;
  bottom: 9px;
  transform: translateX(0px);
}
input:checked + .slider .feather-moon {
  opacity: 1;
  transform: translateX(0);
}
input:checked + .slider .feather-sun {
  opacity: 0;
  transform: translateX(-4px);
}

HTML

Copia el siguiente codigo, Ahora busca el lugar donde quieras colocar el boton,

<div class="theme-switch-wrapper">
  <label class="theme-switch" for="checkbox">
    <input type="checkbox" id="checkbox" />
    <div class="slider">
      <svgOfSun />
      <svgOfMoon />
    </div>
  </label>
</div>

Javascript

Ve al final del documento y agrega el siguiente script:

<script>
// ModeDark v1.0
const themeToggle = document.querySelector('.theme-switch input[type="checkbox"]');
function switchTheme(e) {
  if (e.target.checked) {
    document.documentElement.setAttribute("data-theme", "dark");
  } else {
    document.documentElement.setAttribute("data-theme", "light");
  }
}
themeToggle.addEventListener("change", switchTheme, false);
function switchTheme(e) {
  if (e.target.checked) {
    document.documentElement.setAttribute("data-theme", "dark");
    localStorage.setItem("theme", "dark");
  } else {
    document.documentElement.setAttribute("data-theme", "light");
    localStorage.setItem("theme", "light");
  }
}
const currentTheme = localStorage.getItem("theme");
if (currentTheme) {
  document.documentElement.setAttribute("data-theme", currentTheme);
  if (currentTheme === "dark") {
    themeToggle.checked = true;
  }
}
</script>

Conclucion

Espero que te haya servido, si tienes alguna duda, dejamela en lo comentarios. Por cierto, no olvides compartir.

Muchas gracias por leer.