🔒Открыть пост
и посмотреть медиа
и посмотреть медиа
🌗 Как сайт узнаёт, что у вас включена тёмная тема
Для этого существует медиавыражение prefers-color-scheme, которое сообщает, какую тему оформления использует пользователь в операционной системе.
@media (prefers-color-scheme: dark) {
body {
background: #111;
color: #fff;
}
}
🔤 Если нужно определить тему или реагировать на её смену в JavaScript, используйте window.matchMedia():
const media = window.matchMedia("(prefers-color-scheme: dark)");
function applyTheme(isDark) {
document.documentElement.dataset.theme = isDark ? "dark" : "light";
}
applyTheme(media.matches);
media.addEventListener("change", (event) => {
applyTheme(event.matches);
});
Так можно автоматически переключать тему приложения без перезагрузки страницы и синхронизировать её с настройками системы.
📍 Навигация: [Вакансии]
🐸 Библиотека фронтендера
#readme