👾 EthoIT — твой апгрейд в мире IT.
📦 Кидаем только то, что реально стоит твоего времени:
— Курсы и туториалы без воды
— Лайфхаки, гайды, читы для разработчиков
— Подборки ресурсов: от AI-инструментов до open source сокровищ
— Всё про фронт, бэк, дизайн, DevOps, фриланс и карьеру
— Новости, которые не занудные
— Примеры реальных кейсов!
📦 Кидаем только то, что реально стоит твоего времени:
— Курсы и туториалы без воды
— Лайфхаки, гайды, читы для разработчиков
— Подборки ресурсов: от AI-инструментов до open source сокровищ
— Всё про фронт, бэк, дизайн, DevOps, фриланс и карьеру
— Новости, которые не занудные
— Примеры реальных кейсов!
Задаём цвет в зависимости от темы операционной системы пользователя
Функция light-dark() позволяет переключаться между двумя цветами в зависимости от выбранной у пользователя тёмной или светлой темы.
Пример
div {
color: light-dark(black, white);
background-color: light-dark(white, black);
}
Если пользователь выбрал светлый режим, у элемента будет чёрный текст на белом фоне, если тёмный — белый текст на чёрном фоне.
Чтобы функция light-dark() заработала, нужно прописать свойство color-scheme со значением light dark. Обычно это делают в псевдоклассе :root. Если это свойство не прописать, то функция всегда будет возвращать только первое значение.
Внутри круглых скобок через запятую указываются два цвета. Цвет может быть задан в любом доступном формате. Обратите внимание: можно передать только два аргумента. При большем или меньшем количестве аргументов, а также при невалидных аргументах, свойство не применится.
Функция light-dark() позволяет переключаться между двумя цветами в зависимости от выбранной у пользователя тёмной или светлой темы.
Пример
div {
color: light-dark(black, white);
background-color: light-dark(white, black);
}
Если пользователь выбрал светлый режим, у элемента будет чёрный текст на белом фоне, если тёмный — белый текст на чёрном фоне.
Чтобы функция light-dark() заработала, нужно прописать свойство color-scheme со значением light dark. Обычно это делают в псевдоклассе :root. Если это свойство не прописать, то функция всегда будет возвращать только первое значение.
Внутри круглых скобок через запятую указываются два цвета. Цвет может быть задан в любом доступном формате. Обратите внимание: можно передать только два аргумента. При большем или меньшем количестве аргументов, а также при невалидных аргументах, свойство не применится.