• не пытайся продумать всё заранее
• пиши понятно
• простое лучше сложного
• а сложное лучше запутанного
• двигайся быстро
• чем раньше что-то ломается, тем проще это починить
• избегай уровней вложенности больше трёх
• сначала частное - потом общее
• но иногда наоборот
• сделать выбор БЫСТРО > сделать ПРАВИЛЬНЫЙ выбор
• чужие мысли и идеи - почва для собственных
• ненужное отомрет само
• все разные, помни об этом

И последнее, но не по важности - смотри на то, что делал раньше - это помогает увидеть проделанный тобой путь.

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

Поэтому у меня возник вопрос - а можно ли в 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.