Использование CSS для определения и переключения тем веб-сайта

Использование CSS для определения и переключения тем веб-сайта

От автора: благодаря спецификации Медиа-запросов уровня 5, теперь есть действительно простой способ сопоставить цветовую схему веб-сайта с тем, что пользователь выбрал в своей операционной системе в качестве предпочтительного внешнего вида.

Благодаря новому медиа-запросу, который называется prefers-color-scheme, теперь вы можете адаптировать и учитывать, хочу ли я отображать контент в dark или light режимах. Это действительно просто работает в сочетании с пользовательскими свойствами CSS, также известными как переменные CSS.

Вот медиа-запрос для целевых темных тем.

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3

Узнать подробнее

Вот и все! Вы также можете настроить таргетинг на светлую цветовую схему:

В сочетании с переменными CSS

Что действительно здорово, так это когда вы сочетаете переменные CSS с медиа-запросом, как я сейчас делаю в своем блоге. О, и на самом деле вам не нужно выполнять оба медиа-запроса. Просто установите базовые цвета в блоке :root, а затем переопределите их в разделе dark. Вот пример того, что я делаю.

Бум! Вы можете перейти к настройкам дисплея, переключаться между светлым и темным и увидеть, как тема творит чудеса.

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

CSS в цветовых схемах JS

Я знаю некоторых модных людей, в том числе и я такой, которые любят возиться с CSS-in-JS. Итак, вы можете спросить, как я могу использовать это в стилизованных компонентах или Emotion?

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3

Узнать подробнее

Это снова очень просто. Вы можете создать пару статических переменных для таргетинга на темный и светлый режим и использовать их в компонентах CSSinJS. Вот пример использования EmotionJS, но он работает почти так же со стилизованными компонентами.

Определение в JavaScript

Итак, если вы хотите, вы можете даже определить настройки цветовой схемы пользователя прямо из JavaScript, что может быть полезно, например, в приложениях React.

Метод matchMedia возвращает объект MediaQueryList, чье свойство .matches является логическим флагом. Оттуда вы сможете определить, чего «хочет» пользователь. Вам решать, хотите ли вы уважать их предпочтения или делать что-то свое.

Снятие отпечатков пальцев

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

Настройки темы на уровне приложения

Если вы хотите написать собственную логику для управления пользовательскими предпочтениями, вы тоже можете это сделать. Лично я не думаю, что это имеет смысл для большинства веб-приложений. Но, конечно, есть варианты использования. Чтобы получить полную информацию об этом, перейдите на страницу CSS Tricks, где Макс Акименко уже написал отличный пост о том, как создать собственный переключатель тем с помощью хуков React и ThemeProvider.

Будущее

На данный момент спецификация определяет только 2 значения для селектора prefers-color-scheme: light и dark. В будущем могут быть добавлены новые параметры, подумайте о sepia и grayscale и т. д. Хотя они еще не поддерживаются ни одним браузером, следите за ними.

Поддержка браузерами

prefers-color-scheme уже поддерживается во всех современных браузерах. Удачи, в создании тем!

Автор: Joe Seifi

Источник: https://seifi.org

Редакция: Команда webformyself.

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3

Узнать подробнее

PSD to HTML

Верстка сайта на HTML5 и CSS3 с нуля

Смотреть

Метки:

Похожие статьи:

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

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

Комментирование закрыто.