Как сделать DarkMode на сайте без подмены css, а только с подменой html?

Question

[1KirillIvanov]

В общем то есть index.html и dark.html

нужно как-то сделать, чтобы при нажатии кнопки html подменялся и запоминался в куки, но без перезагрузки страницы. У меня есть идея реализовать это с помощью вкладок страницы, помогите пожалуйста, дайте код, что, где и как делать? В гугле вообще ничего не нашёл по этому поводу! Хотел поступить методом смены мультиязычности но и там ничего не нашёл нужного.

Подменять css не вариант, ибо возникают проблемы с иконками, инверсией цветов и (html файлы на основе бутстрап ксс и подгружают их с сервера, поэтому не вариант вообще, пробовал уже, можете не спрашивать)

Буду благодарен за помощь! Спасибо заранее.

Comments

[Максим]

html это просто теги без с одним цветом, чёрным и всё
тега background не существует
без css это сделать не возможно

[Алексей Дубровин]

1)Так никто не делает
2) Подменять css не вариант, ибо возникают проблемы с иконками, инверсией цветов ( Это ваше мнение обусловленное незнанием), ещё какой вариант.
3) Это неправильное решение

[1KirillIvanov]

Максим Ленский, мои ксс дарк мода прописаны в самом html, так что там все гуд
нужно просто как-то реализовать переключение между html без перезагрузки

[1KirillIvanov]

Алексей Дубровин, а как тогда делать??? например в light у меня у текста <div class="text-dark">text</div>

а в dark
<div class="text-light"text</div>

и что делать?

[Максим]

1KirillIvanov, javascript или по checkbox и перепиливать весь css

[1KirillIvanov]

Максим Ленский, я нашёл в интернете инвертор цветов css, но оно все равно криво все да и иконки тогда останутся те же
попробую вручную..

Answer 1

[Алексей Дубровин]

1KirillIvanov, А ну если у вас такой css, То решается в пару строк js
Именно когда на элементе есть

let allElem = document.querySelectorAll('[class$="light"]')//Ищем все элементы у которых в конце есть приставка light
allElem.forEach(item=>{
item.className = item.className.replace(/light/g, "dark");
});

Надеюсь понятно что на этом классе не должно быть ещё классов которые не относяться к изменению темы
просто light and dark
Их тоже перетрёт

Comments

[1KirillIvanov]

вот спасибо!! это мне реально поможет