Simulación de combinación de colores claros o oscuros

Los 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 tema claro en un sistema operativo en modo oscuro es una rejilla y puede ser un problema de accesibilidad para algunos usuarios. En la web, puede usar la consulta multimedia CSS prefers-color-scheme para detectar si los usuarios prefieren mostrar el producto en una combinación de colores más oscura o más clara. Usa Microsoft Edge DevTools para simular un cambio del modo oscuro a el modo claro sin tener que cambiar todo el sistema operativo.

  1. Abra el menú de comandos.

    1. Seleccione Control + Shift + P (Windows/Linux) o Command + Shift + P (macOS).

      Menú comando

  2. Type emulate color , choose either Emulate CSS prefers-color-scheme: dark or Emulate CSS prefers-color-scheme: light and then select Enter .

    Opción combinación de colores del menú comando

    Importante

    Simplemente escribiendo o no revela la herramienta adecuada, ya que también hay una forma de dark elegir un tema para light DevTools. Si se pregunta qué elegir, asegúrese de elegir **** un elemento de menú de representación, no un elemento de menú de apariencia.

  3. Después de elegir una combinación de colores, actualice el documento actual para mostrar el modo simulado.

    Modo de luz simulada dentro de Microsoft Edge DevTools

    Ver y cambiar el CSS como cualquier otra página web. Para obtener más información, vaya a Introducción a Ver y cambiar CSS.