Почему моя JS не обновляет мою тему данных обратно? - PullRequest
Новая
       11

Почему моя JS не обновляет мою тему данных обратно?

0 голосов
/ 14 февраля 2020

Я хочу иметь кнопку внутри моей панели навигации (ul li), которая может переключаться между theme=light и theme=dark. Однако работает только активация темного режима.

Код:

Я создал кнопку <li><a href="#" onclick="darkMode()"><i class="fas fa-moon"></i></a></li> с функцией JS 

function darkMode () {
    var isOn = false;
    if(Boolean(isOn) === false) {
        document.documentElement.setAttribute('data-theme', 'dark');
        var isOn = true;
    }
    else if(Boolean(isOn) === true) {
        document.documentElement.setAttribute('data-theme', 'light');
        var isOn = false;
    }
}

а мой css выглядит так: 

:root, [data-theme="light"] {
  --bg-color: #ffffff;
  --bg-color-inv: #000000;
  --outline-color: #000000;
  --text-primary: #000000;
  --text-primary-inv: #ffffff;
  --text-secondary: #a4a4a4;
  --text-secondary-hover: #000000;
  --chivo: 'Chivo', sans-serif;
}

[data-theme="dark"] {
  --bg-color: #121212;
  --bg-color-inv: #ffffff;
  --outline-color: #ffffff;
  --text-primary: #ffffff;
  --text-primary-inv: #000000;
  --text-secondary: #5b5b5b;
  --text-secondary-hover: #ffffff;
}

1 Ответ

1 голос
/ 14 февраля 2020

1. Вы запускаете функцию, устанавливая isOn в false. поэтому Boolean(isOn) === false всегда возвращаются true. Вы должны инициализировать переменную isOn вне функции

2 Почему вы конвертируете isOn в логическое значение? это уже логический тип ..

3 Вам на самом деле не нужно else if .. если это не ложь, то это правда ..

4. , как упомянуто в комментарии ниже, не нужно повторно инициализировать isOn внутри if else

var isOn = false;

function darkMode () {
    if(!isOn) {
        document.documentElement.setAttribute('data-theme', 'dark');
        isOn = true;
    }
    else {
        document.documentElement.setAttribute('data-theme', 'light');
        isOn = false;
    }
}

еще более элегантным способом, вы можете сделать: 

var isOn = false;

function darkMode () {

    document.documentElement.setAttribute('data-theme', ['dark', 'light'][+isOn]);
    isOn = !isOn;

}

объяснение

+isOn преобразовать его в число, чтобы true стало 1 и false стало 0. Затем вы используете этот номер в качестве индекса, чтобы выбрать dark или light соответственно.

isOn=!isOn переверните текущее значение isOn - true станьте false и false станьте true

...