Переключение стилей по кнопке?

Question

[SteepNET]

Добрый день!
Сайт на Битриксе, хотелось бы реализовать темный режим на сайте, с сохранением режима в cookies , что бы при перезагрузки страницы, переходе в другую директорию стиль не менялся.
Наиболее удачным для меня оказался этот https://github.com/sandoche/Darkmode.js
Но как его не елозил не смог установить body цвет упрямо ставит #000000 в dody и все там, принудительно не mix-blend-mode: difference; не background-color: #222222 !important; не помогают, опустились руки..
Он удобен тем что в своем style.css можно прописать так
.darkmode--activated h3 {
color: #222222;
}
И это будет срабатывать по onclick="darkmode.toggle();" на кнопке.

Может кто его использовал сможет помочь или может есть более изящный похожий метод?

Comments

[Kovalsky]

В документации к Darkmode.js ничего нет по этому поводу?

[SteepNET]

Ну я не смог найти, есть опционально делать body как угодно у кнопки, но цвет body по умолчанию именно для .darkmode--activated я не смог найти...

[Kovalsky]

SteepNET, а что насчет options? К тому же посмотрите реализацию примера

[SteepNET]

Kovalsky, Если Вы про backgroundColor: '#fff', это цвет фона для неактивного режима...

[Kovalsky]

SteepNET, а так?

[SteepNET]

Kovalsky, В Вашем примере background-color: red; но он там совсем не RED а черный #000000 мне нужен body #222222

Answer 1

[Aetae]

Ну вы прям как беспомощные дети, право слово.
Открываем исходники(там всего два файла) и практически с первых строк видим как там всё устроено. Переменная которая вам нужна - mixColor.
Вот только там не чёрный цвет, а вовсе даже белый, потому что на самом деле там происходит не смена цвета body, а наложение div с классом darkmode-layer поверх всего в режиме: mix-blend-mode: difference;.
Тут уж вы сами подбирайте нужный цвет с нужным режимом смешивания.

Comments

[SteepNET]

Это все здорово, но как добиться #222222 цвета body? Угадывать? Миксовать?

[Kovalsky]

SteepNET, я предлагаю две вещи: удалить issue на гитхабе и прочитать ответ Aetae полностью, желательно с попыткой понять прочитанное. И да, цвет body не меняется, меняются цвета слоёв.

Вкратце: mix-blend-mode: difference означает что результирующий цвет слоя будет равен разнице цветов .darkmode-background и .darkmode-layer.

Отвечая на вопрос "как добиться #222222": нужно выставить такой цвет слоя, чтобы разница цвета фона и этого самого цвета была равна #222222. Но вы можете поставить другой blend-mode, тогда формула будет другая.

[SteepNET]

Kovalsky, Разжевали,спасибо! Добился нужного результата так mixColor: '#DDDDDD'