Как я могу эмулировать медиа-запрос предпочтительной цветовой схемы в Chrome?

Question

В Chrome 76 добавлена ​​поддержка prefers-color-scheme Медиа-запрос (он же "темный режим").

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

Вот тот же вопрос для Firefox, но я не могу найти похожие настройки в Chrome и Chrome DevTools.

Answer 1

Начиная с версии Chrome 79 вы можете переключаться между prefers-color-scheme: dark а также prefers-color-scheme: lightиз панели рендеринга

1. Откройте инструменты разработчика (в противном случае комбинация клавиш ниже открывает диалоговое окно печати)
2. Откройте Command Control: Ctrl+ Shift+ P или Command+ Shift+ P(Mac)
3. Тип "Показать рендеринг"
4. Установите для функции Emulate CSS media prefers-color-scheme значение, которое вы хотите отлаживать.

Answer 2

Как эмулировать / активировать цветовую схему предпочтений в Chrome (рабочий стол):

1. Нажмите клавишу F12 (или Command + Shift + C на Mac)
2. Нажмите на символ точек дерева (настройка и управление DevTools)
3. Наведите указатель мыши на параметр дополнительных инструментов, а затем щелкните параметр рендеринга.
4. опция Emulate CSS media feature prefers-color-scheme ближе к концу - это ваш пункт назначения!

Как эмулировать / активировать цветовую схему предпочтений в Chrome (мобильный):

1. Нажмите на символ точек дерева.
2. Щелкните Настройки.
3. Щелкните по теме.
4. Выберите желаемый вариант!

Ура !!!

Answer 3

Теперь вы можете найти настройки вDevTools > Elements > Styles > Brush icon, в правом верхнем углу:

Answer 4

Это запрос функции Chrome DevTools, который отслеживается на https://crbug.com/977243 ( отметьте ошибку или CC: вы сами будете уведомлены о прогрессе). Между тем, он уже доступен в веб-инспекторе Safari, см. Заголовок " Отладка темного режима" в блоге Apple.

В качестве альтернативы, если вы хотите автоматизировать весь процесс, я написал сценарий Puppeteer, который делает снимки экрана в темном и светлом режиме, который также может быть интегрирован в ваше тестирование CI.

Answer 5

В Chrome для Android в версии 73 был добавлен флажок, который добавляет панель настроек для темной темы, а также флажок для нее в меню браузера. chrome://flags/#darken-websites-checkbox-in-themes-setting