时间戳

首页 > 解决方案 > 制作暗模式时出现 Jquery 问题

jquery - 制作暗模式时出现 Jquery 问题

问题描述

所以我正在制作自己的投资组合网站，我想要一个黑暗模式。所以我用 Jquery 做了一个。虽然我似乎遇到了很大的问题。

它从标题中的元素开始，在我切换暗模式时没有改变颜色。然后我修复了导航部分，但我也想更改徽标。但它不起作用！

示例：https ://gyazo.com/9fa15d80400efcdb8bc76f770935aa44

暗模式代码在 master.css

我所有的代码都可以在这里找到：https ://github.com/TheBlackVoid/Portfolio

谢谢！

标签： jquerycss

解决方案

快速回答：当您尝试抓取.logoabout.html 的第 100 和 101行时，您有一个额外的选择器

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

应该只是：

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

更长的答案： 您不必经历并将“模式”和“黑暗”类添加到您想要在黑暗模式下设置样式的所有内容中。

通过切换 body 类，您确实开始正确：

$('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;
}

推荐阅读