javascript - dark - modo oscuro chrome

¿Cómo detectar si OS X está en modo oscuro en los navegadores?

Question

Similar a " ¿Cómo detectar si OS X está en modo oscuro? " Solo para los navegadores.

¿Alguien ha encontrado si hay una manera de detectar si el sistema del usuario está en el nuevo Modo OS X Dark en Safari / Chrome / Firefox?

Nos gustaría cambiar el diseño de nuestro sitio para que sea amigable con el modo oscuro basado en el modo de operación actual.

Answer 1

Busqué a través de la API de Mozilla, parece que no tienen ninguna variable correspondiente al color de las ventanas del navegador. Aunque encontré una página que podría ayudarte: Cómo usar los estilos del sistema operativo en CSS . A pesar del encabezado del artículo, los colores son diferentes para Chrome y Firefox.

Answer 2

El nuevo estándar está registrado en W3C en el nivel 5 de consultas de medios .

NOTA: actualmente solo está disponible en Safari Technology Preview Release 68

En caso de que la preferencia del usuario sea light :

/* Light mode */
@media (prefers-color-scheme: light) {
    body {
        background-color: #000;
        color: white;
    }
}

En caso de que la preferencia del usuario sea dark :

/* Dark mode */
@media (prefers-color-scheme: dark) {
    body {
        background-color: #000;
        color: white;
    }
}

También existe la opción de no-preference en caso de que un usuario no tenga preferencia. Pero te recomiendo que utilices CSS normal en ese caso y coloques en cascada tu CSS correctamente.

EDITAR (7 de diciembre de 2018):

En Safari Technology Preview Release 71 , anunciaron un interruptor en Safari para facilitar las pruebas. También hice una página de prueba para ver el comportamiento del navegador.

Si tiene instalada la versión 71 de Safari Technology Preview , puede activarla a través de:

Desarrollar> Características experimentales> Soporte de CSS en modo oscuro

Luego, si abre la página de prueba y abre el inspector de elementos, tendrá un nuevo icono para alternar el modo Oscuro / Claro.

Answer 3

Esto se está discutiendo actualmente (septiembre de 2018) en "Borradores del Editor del Grupo de Trabajo CSS" . Spec se ha lanzado (ver arriba), disponible como una consulta de medios. Something ya ha aterrizado en Safari, ver también here . Entonces, en teoría, puedes hacer esto en Safari / Webkit:

@media (prefers-dark-interface) { color: white; background: black }

Pero parece que esto es private . En MDN se menciona una característica de medios CSS inverted-colors . Enchufe: blogueé sobre el modo oscuro here .