Проблема с Jquery при создании темного режима

Question

Итак, я делаю свой собственный веб-сайт портфолио, и я хотел иметь темный режим. Так что я сделал один с Jquery. Хотя, похоже, у меня возникли проблемы.

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

Пример : https://gyazo.com/9fa15d80400efcdb8bc76f770935aa44

Код темного режима находится в master.css

Весь мой код доступен здесь : https://github.com/TheBlackVoid/Portfolio

Спасибо!

Answer 1

Быстрый ответ: у вас есть дополнительный селектор, когда вы пытаетесь захватить .logo в строках 100 и 101 из about.html

    $('header .logo .dark').toggleClass('mode')
    $('header .logo .dark').toggleClass('dark')

должно быть просто:

    $('header .logo').toggleClass('mode')
    $('header .logo').toggleClass('dark')

Длинный ответ: Вам не нужно проходить и добавлять классы «mode» и «dark» ко всему, что вы хотите стиль в темном режиме.

Вы правильно начали, переключив класс тела:

$('body').toggleClass('mode')
$('body').toggleClass('dark')

оттуда вы можете делать все остальное, просто стилизуя заменить:

header nav ul li a:hover.dark,
header nav ul li a.active.dark{
  color: #fff;
  background: #06e89b;
}

header nav ul li a.dark{
  color: #fff;
  background: #141414;
}

header .logo.dark{
  color: #fff;
}

с:

body.mode.dark header nav ul li a:hover,
body.mode.dark header nav ul li a.active{
  color: #fff;
  background: #06e89b;
}

body.mode.dark header nav ul li a{
  color: #fff;
  background: #141414;
}

body.mode.dark header .logo{
  color: #fff;
}