Работа с темной темой в React

Question

Работа с темной темой в React

Рейтинг: 0Ответов: 0Опубликовано: 21.08.2023

document.body.classList.add('dark');
document.querySelector('.App').classList.add('black');

useEffect(() => {
        if (darkMode === 'dark') {
            document.body.classList.add('dark');
            document.querySelector('.App').classList.add('black');
            
            addClassToClasses(darkMode, 'items', '.item', 'black');
            addClassToClasses(darkMode, 'musicAddIcon', '.music-like', 'black');


        } else {
            document.body.classList.remove('dark');
            document.querySelector('.App').classList.remove('black');
            
            removeClassToClasses('items', '.item', 'black');
            removeClassToClasses('musicAddIcon', '.music-like', 'black');
            
        }
    }, [darkMode]);

В этой проверке если значение в localStorage = dark, то классам присваивается доп.класс black, и фон становиться тёмным.

Но вот незадача...

function addClassToClasses(mode, variable, element, className) {
        if(mode === 'dark') {
            var variable = document.querySelectorAll(element);
            for(var i = 0; i < variable.length; i++) {
                variable[i].classList.add(className);
            }
        } else {
            console.log('Dark Mode Error');
        }
    }

    function removeClassToClasses(variable, element, className) {
        var variable = document.querySelectorAll(element);
        for(var i = 0; i < variable.length; i++) {
            variable[i].classList.remove(className);
        }
    }

Есть несколько блоков с одинаковыми классами. И эти функции проходятся по ним, и добавляют либо удаляют класс black у каждого отдельного блока. И код работает, при нажатие на кнопку блоки становятся тёмными, и даже обновив страницу, блоки остаются тёмными из-за значение localStorage. Но при переходе по navbar-у, то-есть переходя на другую страницу а потом при возвращении на страницу с блоками, блоки почему то теряют класс black и становятся светлыми, и при обновлении сайта у блоков снова появляются класс black и они становятся тёмными.

document.body.classList.add('dark');
document.querySelector('.App').classList.add('black');

С этими классами такого не происходит, только с классами по которым надо проходить циклом for.

Долго ломаю голову над этой проблемой, буду очень рад и благодарен если поможете. Надеюсь я смог внятно выразить суть проблемы.

Ответ на комментарии... Вы предлагаете использовать состояние а не это:

document.body.classList.add('dark');
document.querySelector('.App').classList.add('black');

Так вот как мне с помощью состояние добавить класс к body или же к .App?

`const [body, setBody] = useState('')`

как мне связать это состояние c body забыв про document?

javascript reactjs

Источник: Stack Overflow на русском

Работа с темной темой в React

Ответы