通过主题切换器更改链接颜色-解网

问：

链接颜色不会随着教程中的简单主题切换器而改变。我无法在网上找到这个问题的答案。

我的代码如下。我尝试更改链接颜色和变量，以确保这不是语法问题。可能 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 超链接主题

现在在您的 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
}
`

我用你的示例制作了一个功能齐全的沙盒，所以你可以在这个链接中看到它的工作原理

好吧，从理论上讲，旧脚本是有效的，只是认为通常一个网站上总是只有 2 个主题，至少当然是一个巨大的系统。要更改链接，您只需要它在 html 中重新添加链接类，当然还要声明一个 <a href=“”> ...</a>在您的 html 中，但哦，好吧，我希望它以某种方式有所帮助

0赞 thraxel 11/10/2023

没关系，最初我使用的教程只有两个主题。我出于自己的目的重新设计了它，但由于某种原因，链接不尊重这些更改。显然，它只是需要我再搞砸一些。<a href=“”>链接现在也支持代码。您肯定有所帮助，感谢您的投入。

上一个：在ios的html中使用mailto时，面临附加到接收电子邮件的问题

下一个：打开时超链接会更改地址

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

Changing link colors through theme switcher

评论

评论