Emular esquemas oscuros o claros en la página representada
Muchos sistemas operativos tienen una forma de mostrar cualquier aplicación en colores más oscuros o más claros. Tener un producto web que tenga un esquema de luz en un sistema operativo en modo oscuro puede ser difícil de leer y puede ser un problema de accesibilidad para algunos usuarios.
Para probar cómo se representará una página web cuando el usuario haya seleccionado el modo oscuro o claro, en lugar de cambiar la configuración de modo oscuro o de modo claro de su propia máquina, puede seleccionar Emular CSS prefers-color-scheme: dark or light in Microsoft Edge DevTools. Puede hacerlo desde el menú comando o desde la herramienta de representación, como se describe a continuación.
Como alternativa, puedes hacer que tu página web seleccione automáticamente el modo oscuro o claro en función de la configuración preferida de tu equipo, seleccionando No emulation, que es el valor predeterminado.
Para especificar el CSS que se va a usar para esquemas claros y oscuros, use la consulta multimedia CSS prefers-color-scheme para detectar si el usuario prefiere mostrar el producto en una combinación de colores oscuro o claro y, a continuación, seleccione automáticamente su propio CSS personalizado en modo claro u oscuro. El código CSS de ejemplo se muestra en Buscar problemas de contraste con tema oscuro y tema claro.
Este artículo trata sobre cómo cambiar la apariencia de la página web en desarrollo. Para cambiar en su lugar cómo aparece DevTools, vaya a Aplicar temas de color a DevTools.
Emular el modo oscuro o claro con la herramienta de representación
En DevTools, abra la herramienta DevTools. Para ello, es posible que deba seleccionar el icono Más herramientas (+) en la barra de herramientas principal y, a continuación, seleccione Representación.
En la lista desplegable Emular elementos multimedia CSS prefers-color-scheme, seleccione prefers-color-scheme: dark o prefers-color-scheme: light.
Emular el modo oscuro o claro con la herramienta de representación
Actualice la página para mostrar el resultado representado.
Ahora puede modificar su CSS y ver el resultado representado de la misma manera que para cualquier otra página web. Para obtener más información, vaya a Introducción a ver y cambiar CSS.
Para restaurar la configuración, en la herramienta Representación, en la lista desplegable Emular elementos multimedia CSS prefers-color-scheme, seleccione No emulation. Al actualizar la página, se aplicará la configuración de su propio sistema operativo o explorador para la preferencia del modo claro u oscuro.
Emular el modo oscuro o claro mediante el menú comando
Cuando DevTools tenga el foco, abra el menú comando seleccionando
Ctrl+Shift+P(Windows/Linux) oCommand+Shift+P(macOS).Escriba "oscuro", "luz" o "emular". A continuación, seleccione Representación: Emular CSS prefers-color-scheme: dark o Rendering: Emular CSS prefers-color-scheme: lighty seleccione Entrar.
Seleccione un comando Rendering en lugar de un comando Appearance. Los comandos Rendering afectan a la página web en desarrollo. En su lugar, los comandos Appearance afectan a la parte DevTools de la ventana.
Actualice la página para mostrar el resultado representado.
Ahora puede modificar su CSS y ver el resultado representado de la misma manera que para cualquier otra página web. Para obtener más información, vaya a Introducción a ver y cambiar CSS.
Para restaurar la configuración, en el menú comando, escriba "emular" o "esquema" y, a continuación, seleccione Representación: No emular CSS prefers-color-scheme. Al actualizar la página, se aplicará la configuración de su propio sistema operativo o explorador para la preferencia del modo claro u oscuro.
