Светлая/темная тема без лишних сложностей.

Я не знаток css, но по работе мне часто приходится писать html странички: простые и сложные. И мне нравится, когда они получаются аккуратными и удобными.

Почти все устройства сейчас имеют несколько тем: светлую, темную и адаптивную. Адаптивная тема - это, по сути, автоматическое переключение между светлой и темной по каким-то принципам. У меня в телефоне она включена и днем работает светлая тема, а ночью - темная.

Поэтому у меня возник вопрос - а можно ли в css определять какую тему использует пользователь и адаптировать вид странички/сайта под него? Вкратце - можно.

Самое главное вкратце

Используйте prefers-color-scheme. Еще лучше - используйте его вместе с переменными, которые уже и будут использоваться дальше в CSS.

Например так:

@media (prefers-color-scheme: light) {
    :root {
        --bg-color: rgb(255, 255, 255);
        --text-color: white;
        --accent-bg: rgb(158, 51, 36);
        --accent-color: white;
    }
}

@media (prefers-color-scheme: dark) {
    :root {
        --bg-color: rgb(0, 0, 0);
        --text-color: rgb(240, 240, 240);
        --accent-bg: green;
        --accent-text: rgb(34, 120, 57);
    }
}

.some-class {
    background-color: var(--bg-color);
    color: var(--text-color);
}

.accent {
    background-color: var(--accent-bg);
    color: var(--accent-text);
}

Можно пойти еще дальше и использовать для автоматического вычисления цветов функцию color-mod.