Как сделать возможность изменения цветовой схемы на сайте для пользователей?

Question

[Alexfixer]

Как сделать возможность изменения цветовой схемы на сайте для пользователей (на словах без кода)?
Пример:

Answer 1

[zkrvndm]

Самый простой вариант, использовать несколько css файлов и в зависимости от выбранной темы, подключать нужный. Сам выбор хранить в куках.

Comments

[dom1n1k]

Я бы сказал, что это самый очевидный, но точно не самый простой способ. На практике будет куча проблем с багами (что-то незапланированно перезатёрлось) и поддержкой (в четырех темах поправили, а в пятой забыли).
В соседнем ответе подсказывают намного более удобный способ - кастомные-свойства, они же css-переменные.

[profesor08]

dom1n1k, надуманные проблемы. Первая решается правильной очередностью подключения файлов, один раз сделал и все. Вторая решается базовой цветовой схемой, которая активна всегда и стили которой переопределяются выбранной.

[dom1n1k]

profesor08, если стили в одних руках, то да. Если их трогает то один разраб, то другой, то третий, потому что старый уволился - будет как я сказал.

[profesor08]

dom1n1k, не будет, он же знает, что работает с темами, это очевидно. Более того, разруливанием занимается сборщик.

Answer 2

[profesor08]

CSS переменные это решат, но IE ничего о них не знает. Очевидно два варианта. Положить на IE болт или создать css файл темы, где будут заданы цвета по умолчанию. Далее в зависимости от выбранной темы, подключай дополнительный файл. Единственное надо будет проследить за очередностью подключения файлов, чтоб не затирались стили.

Answer 3

[Corvuss]

Создаешь разные классы (is-red, is-green и т.д), накидываешь их на корневой элемент html при клике на кнопку темы В стилях прописываешь что-то типа такого:

.is-red body {
background-color: red;
}

.is-green body {
background-color: green;
}

И так для всего, что меняет внешний вид в зависимости от темы.
Сохранять выбор темы можно в куки и считывать при загрузки страницы.