Блог

Главная - Вопросы по программированию - Как узнать цветовую тему в браузере пользователя (Chrome)?

Как узнать цветовую тему в браузере пользователя (Chrome)?

#google-chrome #google-chrome-extension #color-scheme

#google-chrome #google-chrome-расширение #цветовая схема

Вопрос:

В Google Chrome есть возможность применять цветовые темы. При этом интерфейс раскрашивается. Я хотел бы, чтобы часть интерфейса моего расширения браузера наследовала этот цвет? Скажите, возможно ли это? Есть ли какой-нибудь способ определить цвет интерфейса Chrome? Для сайтов, для расширений?

Комментарии:

1. Нет, для этого нет API. Расширения могут запускать внешнюю утилиту, которая считывает цвет пикселя экрана и сообщает об этом через nativeMessaging, но это, вероятно, огромный перебор для такой задачи.

Ответ №1:

Вы можете использовать медиа-запрос CSS prefers-color-scheme для применения различных стилей на основе цветовой схемы пользователя.

 fieldset {
  background-color: gainsboro;
}
@media (prefers-color-scheme: dark) {
  fieldset {
    background-color: darkslategray;
  }
}

Проверьте https://web.dev/prefers-color-scheme/#the-prefers-color-scheme-media-query для получения более подробной информации, способов повышения производительности загрузки и т.д.!

PS: prefers-color-scheme Медиа-запрос поддерживается в большинстве вечнозеленых браузеров.

Метки: