暗模式链接对比 HTML/CSS

Question

我是 HTML、CSS 和 Javascript 的初学者（过去做过 KhanAcademy 的东西，但也忘记了大部分内容）。我正在尝试制作一个带有暗模式的简单网页（尽可能少的 Javascript）。问题是，链接在暗模式下的对比度很低。我正在使用此代码将 .dark-mode 类添加到我的 html 的 body 元素并使用 CSS 设置样式。

Javascript:

function myFunction() {
    var element = document.body;
    element.classList.toggle("dark-mode");
 }

CSS:

html, body {
    background-color: ivory;
    color: black;
}

.dark-mode {
  background-color: #142514;
  color: blanchedalmond;
}

button.right {
    float: right;
}

HTML:

<button class="right" onclick="myFunction()">Toggle Dark Mode</button>

我尝试将它添加到 CSS 中，但我意识到标签没有得到 class="dark-mode"。

CSS:

a.dark-mode:link { color: lightskyblue; }
a.dark-mode:visited { color: #6d4b8d; }
a.dark-mode:hover { color: #ffffff; }
a.dark-mode:active { color: #ff4040; text-decoration:none; font-weight:normal; }

有人可以帮我找出一种在 Javascript 上轻量级的方法，以将暗模式类添加到标签和正文中，或者指定标签在正文具有暗色时应获取这些属性-模式类？任何帮助将不胜感激。

Answer 1

问题是您在 <body/> 元素上切换 .dark-mode 类，但您编写 CSS 选择器时就好像它们本身具有 .dark-mode 类一样。 p>

这个选择器：

a.dark-mode {}

...将定位一个看起来像这样的元素：

<a href="mysite.com" class="dark-mode">Link</a>

因为您想将所有锚点在<body/> 中以.dark-mode 的类作为目标，您需要将选择器重写为：

.dark-mode a:link { color: lightskyblue; }
.dark-mode a:visited { color: #6d4b8d; }
.dark-mode a:hover { color: #ffffff; }
.dark-mode a:active { color: #ff4040; text-decoration:none; font-weight:normal; }

...匹配类.dark-mode的元素内的所有锚点。