Темная тема для сайта
Включение поддержки color-scheme
При разработка сайта очень важно учитывать, что пользователь может установить цветовую схему на уровне браузера или устройства. Это может привести к сюрпризам при рендеринге сайта вроде черного текста на черном фоне, или автоматического изменения цветовой палитры сайта, при которой он будет выглядеть непрезентабельно или не в соответствии с фирменным стилем.
Для определения цветовой схемы сайта используется метатег color-scheme:
<meta name="color-scheme" content="dark">
Также поддержку цветовых схем можно указать в CSS:
:root {
color-scheme: light dark; /* Поддержка обеих тем */
}
Варианты значений атрибута content:
- normal — используется цветовая палитра по умолчанию;
- only light — только светлый режим;
- (1) light, (2) dark, (3) light dark, (4) dark light — соответственно, (1) только светлая, (2) только темная, (3) оба варианта, но светлая предпочтительна, (4) оба варианта, но темная предпочтительна.
Подключение палитры
Допустим, Вы включили поддержку и светлой и темной темы. Теперь Вам нужно подключить стили, соответствующие активной цветовой схеме устройства или браузера. Это делается через CSS media prefers-color-scheme. Возможные значения:
- no-preference — пользователь не сделал никаких предпочтений;
- light — активна светлая тема;
- dark — темная, соответственно.
Например, можно задать палитру на уровне :root:
@media (prefers-color-scheme: light),
(prefers-color-scheme: no-preference) {
:root {
--title-color: #000;
--text-color: #333;
}
}
@media (prefers-color-scheme: dark) {
:root {
--title-color: #fff;
--text-color: #ccc;
}
}
Платформа netApp — это опыт создания тысяч сайтов, landing page и sass на всех популярных фреймворках, а также опыт создания самописных решений, упакованный в программный продукт.
Платформа поддерживает как темную, так и светлую цветовую схему сайта.
Мы постоянно развиваем эргономику своих продуктов, а также анализируем качественные сайты, продумываем идеи, находим возможности, фиксируем грамотные решения.
ЗарегистрироватьсяСтатьи о маркетинге, фрилансе, удаленке, новости платформы
-
22.02.2025
Личный кабинет покупателя в Tasty Coffee
Анализ личного кабинета пользователя кофейной компании. -
08.07.2025
Обновления TG Настрой от eLama: новые возможности для рекламы в Telegram
Компания eLama, признанный лидер в области рекламных технологий на российском рынке, представила масштабное обновление своего флаг... -
19.06.2025
Интерактивные шоппинг-ролики в TikTok: новый тренд в digital-маркетинге
TikTok продолжает менять правила игры в сфере онлайн-продаж, предлагая новые способы взаимодействия с аудиторией. Одним из самых п... -
04.04.2025
Юнит-экономика для маркетплейсов
Новый инструмент в рамках платформы — юнит-экономика для маркетплейсов. -
24.02.2025
Новая вкладка «Рейтинг и отзывы» в Яндекс Товарах
В Яндекс Товарах появилась новая полезная вкладка "Рейтинг и отзывы" -
08.07.2025
Рекламный сбор 3% от ежеквартального дохода для распространителей интернет-рекламы
С 1 апреля 2025 года в России вступил в силу новый механизм обязательных отчислений за распространение интернет-рекламы. -
11.05.2024
Сотрудник с ограниченной ответственностью
Приницпиальное отличие штатного сотрудника от фрилансера в степени их зависимости от работодателя -
14.05.2025
Деньги пахнут
Отказываете ли Вы клиентам, если их деятельность противоречит Вашим моральным или религиозным убеждениям? -
07.07.2025
Полная прозрачность в рекламе кредитов: новые требования к раскрытию ПСК
В условиях стремительного развития финансового рынка и роста конкуренции среди кредиторов вопрос прозрачности условий кредитования... -
29.06.2025
DeepFake Influencers: революция в маркетинге с цифровыми аватарами
DeepFake Influencers — это инновационная платформа, позволяющая брендам создавать полностью цифровых персонажей для рекламных камп... -
09.07.2025
Rutube запустил собственный телеканал Rutube TV
Rutube продолжает укреплять свои позиции на российском рынке видеоконтента. Запуск собственного телеканала стал логическим продолж... -
23.06.2025
Углеродно-нейтральная реклама: как IKEA и Patagonia меняют правила маркетинга
В 2023-2024 годах IKEA и Patagonia совершили революцию в маркетинге, запустив первые в мире полностью углеродно-нейтральные реклам...