# Dark Mode

Aprendamos a crear temas oscuros para nuestros desarrollos web con CSS y Javascript.

# Requisitos

# Preguntas y Respuestas

https://discord.gg/xSceUPh

# Recursos

# Tema oscuro

Hace un tiempo comenzaron a aparecer diferentes sitios web que ofrecían la posibilidad de cambiar el diseño a un tema oscuro, es por esto que nosotros trataremos de implementar nuestro propio Dark Mode a nuestro proyecto web.

Ejemplo:

# Requisitos

Conocimientos de HTML y CSS: Curso de HTML y CSS
Conocimientos de Javascript: Curso de Javascript

# HTML

<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>DarkMode</title>
    <link rel="stylesheet" href="estilos.css">
</head>
<body class="dark-theme">
    <h1>Mi theme Dark</h1>
    <button id="boton">Cambiar</button>

    <script src="app.js"></script>
</body>
</html>

# Variables CSS

Creamos una clase "dark-theme" que en caso de ser utilizada, reemplazará nuestra variables globales del body.

body {
    --color-bg: #DDDDDD;
    --color-text: #EE6352;
}

body.dark-theme {
    --color-bg: rgb(53,53,53);
    --color-text: wheat;
}

body {
    background-color: var(--color-bg);
}

h1 {
    color: var(--color-text);
}

# Detectar Configuración

https://developer.mozilla.org/en-US/docs/Web/CSS/@media/prefers-color-scheme

Si por ejemplo en Windows no está activado el modo oscuro, esta configuración no se leerá.
En caso de que exista la configuración de modo oscuro, se reescribirán las variables globales del body y tendremos una nueva clase llamada "light-theme".

@media (prefers-color-scheme: dark) {

    body {
        --color-bg: rgb(53,53,53);
        --color-text: wheat;
    }

    body.light-theme {
        --color-bg: #DDDDDD;
        --color-text: #EE6352;
    }
    
}

# Dark en Windows 10

Configuración
Colores
Elige tu color: "Oscuro" || "Claro"

# Botón personalizado

const boton = document.querySelector('#boton');
const prefresDarkScheme = window.matchMedia('(prefers-color-scheme: dark)')

boton.addEventListener('click', () => {
    console.log('diste click')
    console.log(prefresDarkScheme)
    if (prefresDarkScheme.matches) {
        document.body.classList.toggle('light-theme')
    } else {
        document.body.classList.toggle('dark-theme')
    }
})

# LocalStorage

https://codepen.io/adhuham/pen/YzXayaq

Paso 1:

const currentTheme = localStorage.getItem('theme');
if (currentTheme === 'dark') {
    document.body.classList.toggle('dark-theme');
} else if (currentTheme === 'light') {
    document.body.classList.toggle('light-theme');
}

Paso 2:

boton.addEventListener('click', () => {
    let theme;
    if (prefresDarkScheme.matches) {
        document.body.classList.toggle('light-theme')
        theme = document.body.classList.contains('light-theme') ? 'light' : 'dark'
    } else {
        document.body.classList.toggle('dark-theme')
        theme = document.body.classList.contains('dark-theme') ? 'dark' : 'light'
    }
    localStorage.setItem('theme', theme)
})

# Theme-color

No me funcionó 😦

<meta name="color-scheme" content="dark light">

:root {
  color-scheme: light dark; /* both supported */
}

# Imágenes

Una buena regla es disminuir un poco el brillo y el contraste de las imágenes. https://picsum.photos/

body {
    --color-bg: #DDDDDD;
    --color-text: #EE6352;
}

body.dark-theme {
    --color-bg: rgb(53,53,53);
    --color-text: wheat;
}

body.dark-theme img {
    filter: brightness(.8) contrast(1.2);
}

@media (prefers-color-scheme: dark) {

    img {
        filter: brightness(.8) contrast(1.2);
    }
    
}

# Más por aprender...

← API Países