Как грамотно организовать переключение стилей сайта light/dark?

Question

[Павел Никитин]

Решений уверен много, я вижу только два, помогите определиться, не пойму какое решение лучше применить:

1) Создать общий файл стилей, переключение между темами производить посредством навешивания класса, к примеру на body, и каскадом переопределять css.

Из плюсов:
Страница сайта перезагружаться не будет.

Из минусов:
Каскады.
Общий css файл, сайт не малых размеров..

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

Из плюсов:
Не подключаются лишние стили.
Нет каскадов.

Из минусов:
Дублирование классов и очень много..

Хранить выбор стиля собираюсь в сессии юзера и в куках.

Answer 1

[Александр Таратин]

Из минусов:
Дублирование классов и очень много..

Используйте препроцессоры. Вынесите все цвета в переменные. Никакого дублирования не будет.

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

Зачем обновлять страницу? Файл стилей можно подгружать и удалять динамически через js.

https://stackoverflow.com/questions/574944/how-to-...

Answer 2

[Ivanq]

Мой вариант:

<link rel="stylesheet" href="css/light.css" id="css">
<script language="javascript">
    $.ready(function() {
        if(is_dark()) {
            $("#css").attr("href", "css/dark.css");
        }
    });
</script>

Comments

[Павел Никитин]

Помоги, как привязать этот метод к кнопке, чтобы по клику менялся путь light.css на dark.css? Спасибо.

[Павел Никитин]

Покажи свой сайт, где это реализовано.

[Ivanq]

Павел Никитин: На сайте этого нету, просто сначала для себя надо было, а потом не получилось