Esta es una solicitud de función de Chrome DevTools que se rastrea en crbug.com/977243 (marque el error o CC: usted mismo para recibir una notificación del progreso). Mientras tanto, ya está disponible en el Inspector web de Safari, consulte el encabezado Depuración del modo oscuro en la publicación del blog de Apple .

Como alternativa, si desea automatizar todo el proceso, he escrito un script Puppeteer que toma capturas de pantalla en modo oscuro y claro , que también se puede integrar en sus pruebas de CI.

Desde la versión 79 de Chrome, puede alternar entre prefers-color-scheme: dark y prefers-color-scheme: light desde el panel Representación

1. Abra las herramientas del desarrollador (de lo contrario, la combinación de teclas a continuación abre el cuadro de diálogo de impresión)
2. Abra el control de comando: Ctrl + Shift + P o Command + Shift + P (Mac)
3. Escribe "Mostrar representación"
4. Establezca la función Emular CSS multimedia prefiera el esquema de color en el valor que desea depurar

Cómo emular/activar el esquema de color preferido en Chrome (escritorio):

1. Presione la tecla F12 (o Comando + Shift + C en Mac)
2. Haga clic en el símbolo de puntos de árbol (personalizar y controlar DevTools)
3. Apunte el mouse sobre la opción de más herramientas y luego haga clic en la opción de representación.
4. la opción Emular CSS función de medios prefiere esquema de color cerca del final, ¡es su destino!

Cómo emular/activar el esquema de color preferido en Chrome (móvil):

1. Haz clic en el símbolo de los puntos del árbol.
2. Haga clic en Configuración.
3. Haga clic en el tema.
4. ¡Seleccione la opción deseada!

Hurra !!!