🌓 Tutorial: Modo Oscuro (Dark Mode) en Plantilla Blogger (MinimalBloggerAds2026.xml)

Una plantilla moderna debe incluir esta funcionalidad, y la tuya lo hace mediante un toggle de CSS/JavaScript. Este tutorial te enseña a cambiar el esquema de colores del modo oscuro.

📝 Pasos para Personalizar el Modo Oscuro

Accede al HTML del Tema

• Ve a Tema (Theme) en Blogger.
• Haz clic en Editar HTML (Edit HTML).

Localiza las Variables del Modo Oscuro

Busca el bloque de código CSS que contiene el selector html.dark. Este bloque define todos los colores cuando el usuario activa el modo oscuro.

CSS

/* ===== DARK MODE COLORS ===== */
html.dark {
  --bg: #1e1e1e; /* Color de fondo general (gris oscuro) */
  --bg-alt: #2c2c2c; /* Color de fondo de los bloques (tarjetas/widgets) */
  --text: #f0f0f0; /* Color principal del texto (blanco/claro) */
  --text-secondary: #aaaaaa; /* Color del texto secundario/metadatos */
  --primary: #3b82f6; /* Mantiene el color principal (azul) */
  --primary-hover: #2563eb;
  /* ... otras variables específicas de Dark Mode ... */
}

Cambia la Paleta de Colores

- Si quieres un modo oscuro con tonos verdes en lugar de grises, por ejemplo, debes modificar las variables:

Variable	Color Original	Nuevo Valor (Ejemplo Verde Oscuro)	Descripción
--bg	#1e1e1e	#191919	Fondo más profundo.
--bg-alt	#2c2c2c	#282828	Fondo de tarjetas.
--text	#f0f0f0	#e0ffe0	Texto blanco con un tinte verdoso.
--primary	#3b82f6	#4ade80	Color de acento Verde Brillante.

Tip: Mantén el contraste alto. El color de fondo (--bg) debe ser muy oscuro y el color del texto (--text) muy claro.

Guarda y Prueba

- Haz clic en el botón Guardar y luego prueba tu blog. El botón del modo oscuro (generalmente en el encabezado) ahora aplicará tu nueva paleta de colores.