Как определить тему ОС или браузера и отдать стиль сайта в соответствии с темой?

Question

[prrrrrrr]

Недавно на работе наткнулся на один сайт, полистал, добавил в закладки (сайт был в светлых тонах, заходил с линукса). Вечером захожу с macos Mojave (тёмная тема) на тот же сайт, и он в тёмных тонах. Так вот вопрос, как и с помощью чего определить с какой темой зашел пользователь и отдать ему соответствующий css например (white.css/dark.css)?

Answer 1

[Михаил]

if (window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches) {
    // dark mode
}

window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', e => {
    const newColorScheme = e.matches ? "dark" : "light";
});

/* Light mode */
@media (prefers-color-scheme: light) {
    body {
        background-color: white;
        color: black;
    }
}

/* Dark mode */
@media (prefers-color-scheme: dark) {
    body {
        background-color: black;
        color: white;
    }
}

https://css-tricks.com/a-complete-guide-to-dark-mo...

Answer 2

[Дима Паутов]

Определяйте по заголовкам и всё. В заголовках передаётся очень много данных о клиенте