Поделиться через

Эмулировать темные или светлые схемы на отображаемой странице

  • Статья

Используйте инструмент отрисовки , чтобы увидеть, как выглядит ваша веб-страница с различными параметрами отображения или недостатками зрения.

Во многих операционных системах можно отображать любое приложение более темными или светлыми цветами. Наличие веб-сайта со светлой схемой в операционной системе в темном режиме может быть трудно прочитано и может быть проблемой со специальными возможностями для некоторых пользователей.

Чтобы проверить, как веб-страница будет отображаться при выборе пользователем темного или светлого режима, вместо изменения параметра темного или светлого режима компьютера можно выбрать Эмуляция CSS, предпочитающая цветовую схему: темную или светлую , в Средствах разработки Microsoft Edge. Кроме того, вы можете настроить автоматический выбор темного или светлого режима веб-страницы в соответствии с предпочитаемыми параметрами на компьютере, выбрав Параметр Нет эмуляции, который используется по умолчанию.

Эти параметры можно выбрать в средстве отрисовки или в меню Команд, как описано ниже.

Чтобы указать CSS, который будет использоваться как для светлых, так и для темных схем, используйте запрос мультимедиа CSS prefers-color-scheme , чтобы определить, предпочитает ли пользователь отображать ваш продукт в темной или светлой цветовой схеме, а затем автоматически выбрать собственный css в пользовательском или темном режиме. Пример кода CSS показан в разделе Проверка проблем контрастности с темной и светлой темой.

Эмуляция темного или светлого режима с помощью средства отрисовки

  1. Чтобы открыть Средства разработки, щелкните веб-страницу правой кнопкой мыши и выберите пункт Проверить. Или нажмите клавиши CTRL+SHIFT+I (Windows, Linux) или COMMAND+OPTION+I (macOS). Откроется devTools.

  2. В средствах разработки на панели действий или на панели быстрого просмотра выберите вкладку Отрисовка . Если эта вкладка не отображается, нажмите кнопку Дополнительные инструменты (значок ") .

  3. В раскрывающемся списке Эмулировать css media features-color-scheme выберите prefers-color-scheme: dark или prefers-color-scheme: light:

    Эмуляция темного или светлого режима с помощью средства отрисовки

    Отображаемая веб-страница отображается так, как если бы пользователь выбрал темный или светлый режим в своей операционной системе. Веб-страница использует CSS, указанный для этого режима.

  4. Измените CSS и просмотрите отрисованный результат так же, как и для любой другой веб-страницы. См . статью Начало работы с просмотром и изменением CSS.

  5. Чтобы восстановить этот параметр, в средстве отрисовки в раскрывающемся списке Эмулировать css media features-color-scheme (Эмуляция CSS-мультимедиа предпочитает цветовую схему ) выберите Нет эмуляции. Применяется параметр вашей операционной системы для светлого или темного режима.

Эмуляция темного или светлого режима с помощью меню команд

  1. Когда средства разработки будут фокусироваться, откройте меню Команд , выбрав CTRL+SHIFT+P (Windows, Linux) или Command+SHIFT+P (macOS).

  2. Введите dark, light или emulate, выберите Эмуляция CSS предпочитает-color-scheme: dark или Emulate CSS prefers-color-scheme: light, а затем нажмите клавишу ВВОД:

    Эмуляция темного или светлого режима с помощью команд

    Отображаемая веб-страница отображается так, как если бы пользователь выбрал темный или светлый режим в своей операционной системе. Веб-страница использует CSS, указанный для этого режима.

    Выберите команду Отрисовка , а не команду Внешний вид . Команды отрисовки влияют на разрабатываемую веб-страницу. Вместо этого команды Внешний вид влияют на часть средства разработки окна.

  3. Измените CSS и просмотрите отрисованный результат так же, как и для любой другой веб-страницы. См . статью Начало работы с просмотром и изменением CSS.

  4. Чтобы восстановить параметр, в меню команд введите emulate или scheme , а затем выберите Пункт Не эмулировать css prefers-color-scheme. Применяется параметр вашей операционной системы для светлого или темного режима.

См. также

Средство отрисовки также используется для следующих задач: