👩‍💻👩‍💻👩‍💻 Переходите на сторону light-dark()

За последние несколько лет интерфейсы с темным режимом сильно изменились. Все мы знаем традиционный подход с использованием медиа-запросов, но в этой статье Sara Joy демонстрирует современные CSS-функции, благодаря которым соблюсти предпочтения пользователя в выборе цветовой схемы становится чертовски просто.

Вас можно простить, если думаете, что кодировать одновременно тёмный и светлый режимы — это очень сложно. Нужно помнить о @media запросах на основе prefers-color-scheme, а также о дополнительных сложностях, возникающих, когда посетители могут выбирать светлый или тёмный режим отдельно от настроек ОС. И давайте не будем забывать о самой цветовой палитре! Переход от светлого режима к тёмному может потребовать новых вариаций, чтобы добиться нужного уровня контрастности для обеспечения доступности.

Это действительно большая работа. Но я хочу сказать, что с современным CSS это стало намного проще!

🖥 Читать статью

📱 @dev_notes_ru

#Frontend #CSS #HTML #JS #ColorScheme #DarkMode #LightMode

👩‍💻 Настройка одного набора цветов для светлого и тёмного режимов

CSS переменные можно использовать, чтобы сделать цвета темнее, когда они отображаются на светлом фоне, и светлее, когда они отображаются на тёмном, что делает их более яркими в обоих случаях.

Часто, когда речь идёт о светлом и тёмном режимах, подразумевается полная смена цветов. Светлый цвет становится темным и наоборот. Такова сущность ситуации!

Но подумайте об оранжевом. О розовом. Зелёном и голубом. Это цвета, имеющие приличные шансы работать хорошо как в тёмной, так и в светлой теме.

🖥 Читать статью

📱 @dev_notes_ru

#Frontend #CSS #ColorScheme #DarkMode #LightMode