Светлая и темная темы для сайта

Рабочий пример тут:

https://9cb072.creatium.site/darklight

1. У темных секций задаете класс dark hide, у светлых секций задаете класс light

https://img2.creatium.app/e8/bf/34/06e41ebe0ac6a5168a16825155fcbfc697/untitled.png

2. У кнопок которые переключают темы, нажимаете на гаечный ключ - действие - выполнить JavaScript код

https://img2.creatium.app/3f/18/93/33c1da097bd1b9f792edc48d89ead86015/untitled.png

У темной кнопки которая делает тему светлой добавляете

$(".dark").addClass('hide');

$(".light").removeClass('hide');

localStorage.setItem('dark', 'false');

let area = document.querySelector('.area');

area.style.background = 'rgb(232, 232, 255)'; /*Данная часть меняет фон всего

документа при необходимости можно удалить*/

У светлой кнопки, которая делает тему темной добавляете

$(".dark").removeClass('hide');

$(".light").addClass('hide');

localStorage.setItem('dark', 'true');

let area = document.querySelector('.area');

area.style.background = 'rgb(68, 70, 79)'; /*Данная часть меняет фон всего

документа при необходимости можно удалить*/

3. Выходим из редактора и переходим в раздел Плагины - Свой код - Код перед </body> и добавляете следующее:

<script>

const tems = localStorage.getItem('dark');
const area = document.querySelector('.area');
if(tems === 'true'){
$(".dark").removeClass('hide');
$(".light").addClass('hide');
area.style.background = 'rgb(68, 70, 79)';
} else{
area.style.background = 'rgb(232, 232, 255)';
$(".dark").addClass('hide');
$(".light").removeClass('hide');
}

</script>

Чтобы добавить скрипт, перейдите в раздел "Плагины"

https://i.1.creatium.io/f5/96/89/f415ea0c7f6c13d761e3c688f9fefff523/4_0_google_chrome.png

Выберите плагин Свой код

https://i.1.creatium.io/4c/eb/d2/04045fbb34eaa55348afc912d8d774ae41/untitled.png

Код добавляете в поле Код перед </body>

https://i.1.creatium.io/d7/03/8f/615199477fd1322b3d7afb2fcd1e4af371/untitled.png