/
PowerSl1d3
/
blog-design
Обзор
Документация
Войти
/
PowerSl1d3
/
blog-design
Код
Запросы
0
Пакеты
0
Релизы
0
Аналитика
Безопасность
dev
static/js/detectColorScheme.js
32 строки
1011 B
Tim
Set theme color in javascript on page load
03 янв 2023, 17:26
Не верифицирован
03 янв 2023, 17:26
4858e8b
Код
Авторство
О чём код?
// Work out the currently preferred color scheme function detectColorScheme() { // Default to light var theme = "light"; // Check local storage if (localStorage.getItem("theme")) { if (localStorage.getItem("theme") == "dark") { theme = "dark"; } // No setting in local storage, work it out from the OS setting } else if (!window.matchMedia) { // matchMedia method not supported return false; } else if (window.matchMedia("(prefers-color-scheme: dark)").matches) { // OS theme setting detected as dark theme = "dark"; } // Dark theme preferred, set document with a correct class if (theme=="dark") { document.documentElement.classList.add("dark"); } window.onload = function() { if (theme=="dark") { var metaThemeColor = document.querySelector("meta[name=theme-color]"); metaThemeColor.setAttribute("content", "#141416"); } }; } detectColorScheme();