От автора: благодаря спецификации Медиа-запросов уровня 5, теперь есть действительно простой способ сопоставить цветовую схему веб-сайта с тем, что пользователь выбрал в своей операционной системе в качестве предпочтительного внешнего вида.
Благодаря новому медиа-запросу, который называется prefers-color-scheme, теперь вы можете адаптировать и учитывать, хочу ли я отображать контент в dark или light режимах. Это действительно просто работает в сочетании с пользовательскими свойствами CSS, также известными как переменные CSS.
Вот медиа-запрос для целевых темных тем.
@media (prefers-color-scheme: dark) { /* take me to the dark side dude! */ /* define your dark theme here */
}Вот и все! Вы также можете настроить таргетинг на светлую цветовую схему:
@media (prefers-color-scheme: light) { /* Whoa! Super bright around here */ /* define your light theme here */
}В сочетании с переменными CSS
Что действительно здорово, так это когда вы сочетаете переменные CSS с медиа-запросом, как я сейчас делаю в своем блоге. О, и на самом деле вам не нужно выполнять оба медиа-запроса. Просто установите базовые цвета в блоке :root, а затем переопределите их в разделе dark. Вот пример того, что я делаю.
:root { --color-fg: #1c0e00; --color-body-bg: #f1f1f1;
}
@media (prefers-color-scheme: dark) { :root { --color-fg: #fefff5; --color-body-bg: #0a0e13; }
}Бум! Вы можете перейти к настройкам дисплея, переключаться между светлым и темным и увидеть, как тема творит чудеса.
Примечание: ничто не мешает вам сделать что-от другое, кроме простой смены цветов в зависимости от темы.
CSS в цветовых схемах JS
Я знаю некоторых модных людей, в том числе и я такой, которые любят возиться с CSS-in-JS. Итак, вы можете спросить, как я могу использовать это в стилизованных компонентах или Emotion?
Это снова очень просто. Вы можете создать пару статических переменных для таргетинга на темный и светлый режим и использовать их в компонентах CSSinJS. Вот пример использования EmotionJS, но он работает почти так же со стилизованными компонентами.
// create a couple of constants
// just to make them easier to re-use
const DARK = '@media (prefers-color-scheme: dark)';
const LIGHT = '@media (prefers-color-scheme: light)';
// use them to target stuff
const StyledComponent = styled('div')( { color: 'var(--color-for-light)', [DARK]: { color: 'var(--color-for-dark)', }, },
);Определение в JavaScript
Итак, если вы хотите, вы можете даже определить настройки цветовой схемы пользователя прямо из JavaScript, что может быть полезно, например, в приложениях React.
const LIGHT = window.matchMedia('(prefers-color-scheme: light)').matches;
const DARK = window.matchMedia('(prefers-color-scheme: dark)').matches;Метод matchMedia возвращает объект MediaQueryList, чье свойство .matches является логическим флагом. Оттуда вы сможете определить, чего «хочет» пользователь. Вам решать, хотите ли вы уважать их предпочтения или делать что-то свое.
Снятие отпечатков пальцев
Растет озабоченность по поводу добычи данных алгоритмами снятия отпечатков пальцев браузера. Хотя раньше я имел в виду темную сторону в шутку, говоря о пользовательских предпочтениях, этот тип применения на самом деле довольно серьезен и вызывает беспокойство.
Настройки темы на уровне приложения
Если вы хотите написать собственную логику для управления пользовательскими предпочтениями, вы тоже можете это сделать. Лично я не думаю, что это имеет смысл для большинства веб-приложений. Но, конечно, есть варианты использования. Чтобы получить полную информацию об этом, перейдите на страницу CSS Tricks, где Макс Акименко уже написал отличный пост о том, как создать собственный переключатель тем с помощью хуков React и ThemeProvider.
Будущее
На данный момент спецификация определяет только 2 значения для селектора prefers-color-scheme: light и dark. В будущем могут быть добавлены новые параметры, подумайте о sepia и grayscale и т. д. Хотя они еще не поддерживаются ни одним браузером, следите за ними.
Поддержка браузерами
prefers-color-scheme уже поддерживается во всех современных браузерах. Удачи, в создании тем!
Автор: Joe Seifi
Источник: https://seifi.org
Редакция: Команда webformyself.