Рабочий пример тут:
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