Compartir a través de

Emulación de esquemas oscuros o claros en la página representada

  • Artículo

Use la herramienta Representación para ver el aspecto de la página web con diferentes opciones de visualización o deficiencias visuales.

Muchos sistemas operativos tienen una manera de mostrar cualquier aplicación en colores más oscuros o más claros. Tener un sitio 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: oscuro o claro en Microsoft Edge DevTools. O bien, puede hacer que su página web seleccione automáticamente el modo oscuro o claro en función de su propia configuración preferida en el equipo, seleccionando Sin emulación, que es el valor predeterminado.

Puede seleccionar esta configuración en la herramienta Representación o en el menú Comando, como se describe a continuación.

Para especificar el CSS que se va a usar para esquemas claros y oscuros, use la consulta de medios 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 de modo claro o oscuro personalizado. El código CSS de ejemplo se muestra en Comprobar si hay problemas de contraste con el tema oscuro y el tema claro.

Emulación del modo oscuro o claro mediante la herramienta Representación

  1. Para abrir DevTools, haga clic con el botón derecho en la página web y, a continuación, seleccione Inspeccionar. O bien, presione Ctrl+Mayús+I (Windows, Linux) o Comando+Opción+I (macOS). Se abre DevTools.

  2. En DevTools, en la barra de actividad o en la vista rápida, seleccione la pestaña Representación . Si esa pestaña no está visible, haga clic en el botón Más herramientas (icono Más herramientas).

  3. En la lista desplegable Emulate CSS media feature prefers-color-scheme (Emular la característica de medios CSS prefers-color-scheme), seleccione prefers-color-scheme: dark o prefers-color-scheme: light:

    Emulación del modo oscuro o claro mediante la herramienta Representación

    La página web representada se representa como si el usuario hubiera seleccionado el modo oscuro o claro en su sistema operativo. La página web usa el CSS que ha especificado para ese modo.

  4. Modifique el CSS y vea el resultado representado de la misma manera que para cualquier otra página web. Consulte Introducción a la visualización y cambio de CSS.

  5. Para restaurar la configuración, en la herramienta Representación , en la lista desplegable Emular la característica de medios CSS prefers-color-scheme , seleccione Sin emulación. Se aplica la configuración de su propio sistema operativo para el modo claro o oscuro.

Emulación del modo oscuro o claro mediante el menú Comando

  1. Cuando DevTools tenga el foco, abra el menú Comando seleccionando Ctrl+Mayús+P (Windows, Linux) o Comando+Mayús+P (macOS).

  2. Escriba oscuro, claro o emular, seleccione Emular CSS prefers-color-scheme: dark o Emulate CSS prefers-color-scheme: light y, a continuación, presione Entrar:

    Emulación del modo oscuro o claro mediante los comandos

    La página web representada se representa como si el usuario hubiera seleccionado el modo oscuro o claro en su sistema operativo. La página web usa el CSS que ha especificado para ese modo.

    Seleccione un comando De representación en lugar de un comando Apariencia . Los comandos de representación afectan a la página web representada en desarrollo. En su lugar, los comandos DevTools afectan a la parte DevTools de la ventana.

  3. Modifique el CSS y vea el resultado representado de la misma manera que para cualquier otra página web. Consulte Introducción a la visualización y cambio de CSS.

  4. Para restaurar la configuración, en el menú Comando, escriba emular o esquema y, a continuación, seleccione No emular CSS prefers-color-scheme. Se aplica la configuración de su propio sistema operativo para el modo claro o oscuro.

Recursos adicionales

La herramienta Representación también se usa para las siguientes tareas: