教程中的简单主题切换器不会改变链接颜色。我无法在网上找到该问题的答案。
我的代码如下。我尝试更改链接颜色和变量以确保这不是语法问题。可能 javascript 需要扩展或者我遗漏了其他东西。
HTML
<div class="toggle">
<button class="theme-btn ground" onclick="setTheme('ground')" title="ground scheme">ground</button>
<button class="theme-btn ocean" onclick="setTheme('ocean')" title="ocean scheme">ocean</button>
</div>
CSS 片段
a {
display: inline-block;
color: var(--link-color);
text-decoration: none;
}
:root,
:root.ground {
--bg-color: #fefae0;
--text-color: #ffffff;
--bg-card-color: #283618;
--bg-collapse-color: #283618;
--bg-collapse-color-hover: #606c38;
--link-color: #bc6c25;
--link-color-hover: #dda15e;
}
:root.ocean {
--bg-color: #023047;
--text-color: #000000;
--bg-card-color: #219ebc;
--bg-collapse-color: #219ebc;
--bg-collapse-color-hover: #8ecae6;
--link-color: #fb8500;
--link-color-hover: #ffb703;
}
Javascript
const setTheme = theme => document.documentElement.className = theme;
在你的html中(至少在你在这里分享的这个中)没有链接属性,只有按钮,这就是为什么不会改变的原因之一。
现在在你的CSS片段中,我建议只使用root而不是“root, root.ground”,并且也不确定你观看了哪个教程,但是“root.ground”或“root.ocean”甚至是正确的,我会给你一个功能性的例子。但回到正题,root 应该是你的默认主题,所以不需要两次建立它。现在,对于第二个主题,我将使用 [data-theme="ocean"] 来完成,完整的 css 代码如下:
:root {
--bg-color: #fefae0;
--text-color: #ffffff;
--bg-card-color: #283618;
--bg-collapse-color: #283618;
--bg-collapse-color-hover: #606c38;
--link-color: #bc6c25;
--link-color-hover: #dda15e;
}
[data-theme="ocean"] {
--bg-color: #023047;
--text-color: #000000;
--bg-card-color: #219ebc;
--bg-collapse-color: #219ebc;
--bg-collapse-color-hover: #8ecae6;
--link-color: #0082fb;
--link-color-hover: #ffb703;
}
// I removed the "a" attributes and use button instead, because that's what you have in your html
button {
display: inline-block;
color: var(--link-color);
text-decoration: none;
}
body {
background-color: var(--bg-color); // I added this extra so just to see the body to change
}
`
我用你的例子制作了一个功能齐全的沙箱,所以你可以在这个链接中看到它的工作
我希望有所帮助,编码愉快!