modo oscuro de sitio web código archivos

El Modo Oscuro en la Página Web

Código HTML, centrándonos en dos aspectos clave que mencionas: modo oscuro y elementos responsive.

🌑 Modo oscuro

Variables CSS (:root)
- Se definen variables de color por defecto:css:root { --bg-color: #ffffff; --text-color: #000000; --header-bg: #f0f0f0; } Esto permite reutilizar los mismos valores en todo el CSS, y cambiarlos fácilmente.
Clase dark-mode en <body>
- Cuando el body tiene la clase .dark-mode, las variables cambian:cssbody.dark-mode { --bg-color: #121212; --text-color: #ffffff; --header-bg: #1f1f1f; } Así, el fondo pasa a ser oscuro, el texto blanco y la cabecera gris oscuro.
Uso de variables en estilos
- El body y el header usan var(--bg-color) y var(--text-color).
- Esto hace que al cambiar las variables, toda la página se adapte automáticamente.
JavaScript para alternar
- El checkbox con id darkMode activa/desactiva la clase .dark-mode en el body:jsconst toggle = document.getElementById('darkMode'); toggle.addEventListener('change', () => { document.body.classList.toggle('dark-mode'); });
- Resultado: al marcar la casilla, se activa el modo oscuro; al desmarcarla, vuelve al modo claro.

📱 Elementos responsive

Contenedor flexible (.container)
- Se usa display: flex; flex-wrap: wrap; para organizar columnas.
- Cada .column tiene flex: 1 y min-width: 300px, lo que asegura que se repartan el espacio pero nunca sean demasiado estrechas.
Imágenes adaptables
- Las imágenes tienen max-width: 100%; height: auto;, lo que garantiza que se escalen proporcionalmente y nunca se desborden del contenedor.
Media query (@media)
- Cuando la pantalla es menor de 768px, el contenedor cambia a disposición vertical:css@media (max-width: 768px) { .container { flex-direction: column; } }
- Esto convierte las columnas en bloques apilados, perfectos para móviles.

📌 Conclusión

Modo oscuro: se logra con variables CSS y un toggle que añade/quita la clase .dark-mode al body.
Responsive: se consigue con flexbox, imágenes fluidas y una media query que reorganiza las columnas en pantallas pequeñas.

El resultado es una página que:

Cambia entre modo claro y oscuro con un clic.
Se adapta automáticamente a escritorio, tablet y móvil.
Mantiene un estilo narrativo de terror con buena usabilidad.

Ver Ejemplo de Sitio Web con Modo Oscuro

Ejemplo de Página Web con Modo Oscuro

Instrucciones Modo Oscuro

Este es el código simplificado de una página web con Modo Oscuro. Es un ejemplo muy simple de cómo una página HTML básica puede incorporar un modo oscuro con un interruptor.

📄 Código HTML con modo oscuro

html

<!DOCTYPE html>
<html lang="es">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Página con Modo Oscuro</title>
  <style>
    /* Variables de color por defecto (modo claro) */
    :root {
      --bg-color: #ffffff;
      --text-color: #000000;
    }

    /* Variables cuando el body tiene la clase dark-mode */
    body.dark-mode {
      --bg-color: #121212;
      --text-color: #ffffff;
    }

    /* Estilos generales usando variables */
    body {
      margin: 0;
      font-family: Arial, sans-serif;
      background-color: var(--bg-color);
      color: var(--text-color);
      transition: background-color 0.3s, color 0.3s;
    }

    header {
      padding: 1rem;
      text-align: center;
      border-bottom: 1px solid #ccc;
    }

    .toggle-container {
      text-align: center;
      margin: 1rem;
    }
  </style>
</head>
<body>
  <header>
    <h1>Mi Página con Modo Oscuro</h1>
  </header>

  <div class="toggle-container">
    <label for="darkMode">🌙 Activar modo oscuro</label>
    <input type="checkbox" id="darkMode">
  </div>

  <main>
    <p>
      Este es un ejemplo de página sencilla que puede alternar entre modo claro y modo oscuro.
    </p>
  </main>

  <script>
    // Capturamos el checkbox
    const toggle = document.getElementById('darkMode');

    // Escuchamos el cambio de estado
    toggle.addEventListener('change', () => {
      document.body.classList.toggle('dark-mode');
    });
  </script>
</body>
</html>

🔎 Explicación rápida

Variables CSS (:root): definen colores base para fondo y texto.
Clase .dark-mode: cambia esas variables cuando se activa.
JavaScript: al marcar el checkbox, se añade o quita la clase .dark-mode en <body>.
Transiciones: el cambio de colores es suave gracias a transition.