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.
