Personalizar el modo oscuro con variables CSS y JavaScript

Implementar un modo oscuro para su aplicación o sitio web es crucial para brindar una experiencia de usuario perfecta. Las reglas de medios CSS nativos ofrecen una opción para que los navegadores detecten los modos oscuros configurados por el sistema, pero los usuarios pueden preferir un tema diferente para sitios específicos o navegadores que aún no lo admiten, como Microsoft Edge.

Para abordar Para esto, podemos utilizar variables CSS y JavaScript para administrar la configuración del tema.

Personalización de CSS con variables y temas

Defina variables CSS en el nivel raíz o predeterminado y especifique un tema oscuro:

:root {
    --font-color: #000;
    ...
    --bg-color: rgb(243,243,243);
}

[data-theme="dark"] {
    --font-color: #c1bfbd;
    ...
    --bg-color: #333;
}

Llame a las variables donde sea necesario para ajustar los estilos dinámicamente.

JavaScript para detección y alternancia de temas

En la sección de encabezado de su HTML, agregue JavaScript para detectar el tema preferido del usuario:

function detectColorScheme() {
    var theme = "light";
    ...
}
detectColorScheme();

Utilice JavaScript para alternar entre temas claros y oscuros:

const toggleSwitch = document.querySelector('#theme-switch input[type="checkbox"]');

function switchTheme(e) {
    ...
}

toggleSwitch.addEventListener('change', switchTheme, false);

HTML para alternar temas

Cree una casilla de verificación HTML para cambiar de tema controlado por el usuario:

Con este enfoque, puedes detectar automáticamente el tema del usuario, permitirle anularlo y brindar una experiencia personalizada en todos los navegadores y plataformas.