🌙 Tutorial: Cómo Agregar Modo Oscuro a Cualquier Plantilla de Blogger

✅ Ventajas:

• 100% compatible con todas las plantillas.
• Sin plugins ni librerías externas.
• Guarda la preferencia del usuario (usa localStorage).
• Diseño limpio y personalizable.

---

🔧 Paso 1: Agregar el botón de alternar modo oscuro

1. Ve a tu Panel de Blogger → Tema → Editar HTML.
2. Busca la etiqueta </body> (usa Ctrl + F para encontrarla).
3. Justo antes de </body>, pega este código:

👇👇👇👇👇👇👇👇

<!-- Botón Modo Oscuro -->

<button id="darkModeToggle" class="dark-mode-toggle" aria-label="Alternar modo oscuro">

  🌙

</button>

<style>

/* Estilo del botón */

.dark-mode-toggle {

  position: fixed;

  bottom: 20px;

  right: 20px;

  background: #fff;

  color: #333;

  border: 1px solid #ddd;

  border-radius: 50%;

  width: 44px;

  height: 44px;

  font-size: 18px;

  cursor: pointer;

  box-shadow: 0 2px 6px rgba(0,0,0,0.2);

  z-index: 9999;

  transition: all 0.3s ease;

}

.dark-mode-toggle:hover {

  background: #f0f0f0;

}

/* En modo oscuro, el botón cambia a sol */

body.dark-mode .dark-mode-toggle {

  background: #222;

  color: #ffd700;

  border-color: #444;

}

body.dark-mode .dark-mode-toggle:hover {

  background: #333;

}

</style>

<script>

// Alternar modo oscuro

document.addEventListener('DOMContentLoaded', function () {

  const toggle = document.getElementById('darkModeToggle');

  const body = document.body;

  // Verificar si el usuario ya eligió modo oscuro

  if (localStorage.getItem('darkMode') === 'enabled') {

    body.classList.add('dark-mode');

    toggle.textContent = '☀️';

  }

  // Cambiar modo al hacer clic

  toggle.addEventListener('click', function () {

    body.classList.toggle('dark-mode');

    if (body.classList.contains('dark-mode')) {

      localStorage.setItem('darkMode', 'enabled');

      toggle.textContent = '☀️';

    } else {

      localStorage.setItem('darkMode', 'disabled');

      toggle.textContent = '🌙';

    }

  });

});

</script>

👆👆👆👆👆👆👆👆

✅ Este código agrega un botón flotante (abajo a la derecha) con ícono de luna/sol y guarda la preferencia del usuario.

🎨 Paso 2: Agregar los estilos del modo oscuro

Ahora define cómo se verá tu sitio en modo oscuro.

1. En el mismo editor de HTML, busca la etiqueta </head>.
2. Justo antes de </head>, pega este bloque de CSS:

👇👇👇👇👇👇👇👇

<style> /* ===== ESTILOS DEL MODO OSCURO ===== */ body.dark-mode { background-color: #121212; color: #e0e0e0; transition: background-color 0.3s, color 0.3s; } /* Fondo de contenedores principales */ body.dark-mode .main-outer, body.dark-mode .main-inner, body.dark-mode .post-outer, body.dark-mode .sidebar, body.dark-mode .widget, body.dark-mode .blog-posts, body.dark-mode .post, body.dark-mode .post-body, body.dark-mode .comments, body.dark-mode .comment-form, body.dark-mode .post-footer, body.dark-mode .date-header, body.dark-mode .blog-pager { background-color: #1e1e1e !important; color: #e0e0e0 !important; } /* Texto de enlaces */ body.dark-mode a { color: #4da6ff !important; } body.dark-mode a:hover { color: #80ccff !important; } /* Encabezados */ body.dark-mode h1, body.dark-mode h2, body.dark-mode h3, body.dark-mode h4, body.dark-mode h5, body.dark-mode h6 { color: #ffffff !important; } /* Inputs y áreas de texto */ body.dark-mode input, body.dark-mode textarea, body.dark-mode select { background-color: #2a2a2a !important; color: #e0e0e0 !important; border: 1px solid #444 !important; } /* Código (si usas <code> o <pre>) */ body.dark-mode code, body.dark-mode pre { background-color: #2d2d2d !important; color: #f8f8f2 !important; } /* Evitar imágenes oscuras (opcional) */ body.dark-mode img { opacity: 0.95; } </style>

👆👆👆👆👆👆👆👆

💡 Nota: Este CSS cubre la mayoría de los elementos comunes en plantillas de Blogger. Si tu plantilla tiene clases personalizadas (como .container, .content, etc.), agrega esas clases al bloque .dark-mode para que también se oscurezcan.

✅ Paso 3: Guardar y probar

1. Haz clic en Guardar tema.
2. Visita tu blog y haz clic en el botón 🌙 (abajo a la derecha).
3. Verifica que:
   • El fondo se oscurece.
   • El texto sigue siendo legible.
   • El botón cambia a ☀️.
   • Al recargar la página, ¡el modo oscuro se mantiene!

---

🔧 ¿No se ve bien en tu plantilla?

Si algunos elementos no cambian (por ejemplo, el menú o el footer), solo necesitas agregar sus clases al CSS. Por ejemplo:

👇👇👇👇👇👇

body.dark-mode .header-outer, body.dark-mode .menu, body.dark-mode .footer { background: #1a1a1a !important; color: #ddd !important; }

👆👆👆👆👆👆👆

👉 Inspecciona tu sitio (clic derecho → "Inspeccionar") para ver los nombres de las clases y añadirlas.

---

🌟 ¡Listo!

Ahora tu blog en Blogger tiene modo oscuro funcional, moderno y con memoria de usuario. Es una gran mejora de experiencia (UX) que también puede aumentar el tiempo de visita y reducir el rebote.

Metodo probado en nuestro portal plantillasblogger.com