css 通过主题切换器更改链接颜色

3wabscal 于 2023-11-19 发布在其他

关注(0)|答案(1)|浏览(108)

链接颜色不改变我的简单的主题切换器从教程。我无法找到一个答案在线的问题。
我的代码如下。我已经尝试改变链接的颜色和变量，以确保这不是一个语法问题。可能的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;

型

css

来源：https://stackoverflow.com/questions/77455134/changing-link-colors-through-theme-switcher

1条答案

按热度按时间

wfsdck301#

在你的html中有（至少在你在这里分享的这一个）没有链接属性，但按钮，这就是为什么一个不会改变的原因。
现在在你的css片段，我会建议只有根，而不是“根，根.地面”，也不知道你看的教程，但“根.地面”或“根.海洋”是正确的，我会给予你一个功能的例子.但回到点，根应该是你的默认主题，所以不需要建立它两次.现在你的第二个主题，我会用[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
}
`

字符串
我用你的例子做了一个功能齐全的沙箱，so you can see it working in this link

赞(0）回复(0）举报 2023-11-19

我来回答

css 通过主题切换器更改链接颜色

1条答案

相关问题

热门标签

最新问答