Bienvenido a mi blog sobre Darkmode para blogger
¿Qué es el Modo Oscuro?
El modo oscuro es una opción popular en las interfaces de usuario que cambia el esquema de colores de una página web, utilizando colores más oscuros para los fondos y claros para el texto. Esto ayuda a reducir la fatiga ocular, especialmente en ambientes de poca luz.
¿Cómo implementarlo solo con CSS?
Una forma sencilla de implementar el modo oscuro en tu sitio web es utilizando solo CSS, sin necesidad de JavaScript. A continuación, te dejo un código básico que puedes probar en tu propio blog, te aconsejo crear primero un blog de pruebas, copiar el siguiente código y pegarlo allí, y así entender la lógica de como funciona y aplicarlo a tu sitio web.
<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html>
<html lang="es" xmlns="http://www.w3.org/1999/xhtml" xmlns:b="http://www.google.com/2005/gml/b" xmlns:data="http://www.google.com/2005/gml/data" xmlns:expr="http://www.google.com/2005/gml/expr">
<head>
<b:skin><![CDATA[]]></b:skin>
<meta charset="UTF-8"/>
<title>Modo Oscuro solo con CSS</title>
<style>
/*<![CDATA[*/
:root {
--bg-light: #ffffff;
--text-light: #000000;
--bg-dark: #121212;
--text-dark: #f0f0f0;
--link-light: #1a73e8;
--link-dark: #8ab4f8;
}
body {
margin: 0;
padding: 0;
}
.container {
font-family: sans-serif;
background-color: var(--bg-light);
color: var(--text-light);
transition: background-color 0.3s, color 0.3s;
min-height: 100vh;
}
#toggle-dark {
display: none;
}
#toggle-dark + label {
cursor: pointer;
font-size: 1.5em;
user-select: none;
display: inline-block;
padding: 10px;
}
#toggle-dark + label::before {
content: "🌙";
transition: content 0.3s;
}
#toggle-dark:checked + label::before {
content: "☀️";
}
#toggle-dark:checked ~ .container {
background-color: var(--bg-dark);
color: var(--text-dark);
}
#toggle-dark:checked ~ .container a {
color: var(--link-dark);
}
.container a {
color: var(--link-light);
text-decoration: none;
}
.blog-content {
max-width: 800px;
margin: 20px auto;
padding: 20px;
border-radius: 10px;
background-color: inherit;
color: inherit;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
transition: background-color 0.3s, color 0.3s;
}
/*]]>*/
</style>
</head>
<body>
<b:section id="blog"/>
<!-- Interruptor de modo oscuro -->
<input id="toggle-dark" type="checkbox"/>
<label for="toggle-dark"/>
<!-- Contenedor principal -->
<div class="container">
<div class="blog-content">
<h1>Bienvenido a mi blog</h1>
<p>Este es un ejemplo de blog que se adapta automáticamente al modo oscuro cuando se activa el interruptor.</p>
<p>Explora el contenido y disfruta de una experiencia cómoda según la hora del día.</p>
<a href="#">Enlace de ejemplo</a>
</div>
</div>
</body>
</html>
¿Cómo personalizar el Modo Oscuro?
El código anterior es muy flexible. Puedes ajustar los colores de fondo, texto y enlaces para que se adapten a tus necesidades. Si te gustaría saber más sobre la optimización de tu sitio web para el modo oscuro, te recomiendo leer este artículo sobre cómo aparecer en Google Discover, lo que te permitirá mejorar la visibilidad de tu blog.
Otras mejoras interesantes
Si deseas agregar más funcionalidades, como una galería de imágenes en tu blog, una opción interesante es crear un lightbox. Aquí te dejo un artículo sobre otra forma de hacer un lightbox con CSS, que puede complementar perfectamente tu sitio web.
