文章/答案/技术大牛

发布

社区首页 >问答首页 >如何为此脚本创建切换按钮？

问如何为此脚本创建切换按钮？
EN

Stack Overflow用户

提问于 2022-04-15 10:54:08

回答 1查看 159关注 0票数 -1

我试图做一个简单的切换按钮，这个脚本改变主题从光到黑暗，但它似乎不工作时，切换。我相信脚本已经完成了，但是我不知道如何创建一个在光和暗模式之间切换的按钮。

JavaScript：

var toggle = document.getElementById("theme-toggle");

var storedTheme = localStorage.getItem('theme') || (window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light");
if (storedTheme)
    document.documentElement.setAttribute('data-theme', storedTheme)


toggle.onclick = function() {
    var currentTheme = document.documentElement.getAttribute("data-theme");
    var targetTheme = "light";

    if (currentTheme === "light") {
        targetTheme = "dark";
    }

    document.documentElement.setAttribute('data-theme', targetTheme)
    localStorage.setItem('theme', targetTheme);
};

CSS：

html[data-theme='light'] {
    --background-color: #9ec8ff;
    --text-color: #000000d8;
    --link-color: #543fd7;
    --header-color:#7ab1ff;
    --headerborder-color: 0.5px solid rgb(0, 0, 0);
    --logo-color: invert(0);
    --button-color:#ffffff;
    --signinbutton-color:#ffffff;
    --buttonborder-color: 1.5px solid rgb(0, 0, 0);
    --profile-border: 3px solid black;
    --table-border: rgb(0, 0, 0);
    --social-login: antiquewhite;
    --social-border: 0px solid rgb(50, 51, 52);
}

html[data-theme='dark'] {
    --background-color: #000000;
    --text-color: #F7F8F8;
    --link-color: #82f7ff;
    --header-color:#1A1A1B;
    --headerborder-color: 1px solid rgb(50, 51, 52);
    --logo-color: invert(1);
    --button-color:#1A1A1B;
    --signinbutton-color:#000000;
    --buttonborder-color: 1.5px solid rgb(50, 51, 52);
    --profile-border: 3px solid rgb(50, 51, 52);
    --table-border: rgb(100,102,104);
    --social-login: #1A1A1B;
    --social-border: 1.5px solid rgb(50, 51, 52);

}

[data-theme='light'] .d-block-light,
[data-theme='dark'] .d-block-dark {
    display: block !important;
}

HTML：

<button id="theme-toggle" type="button">Toggle theme</button>

javascript

html

css

回答 1

Stack Overflow用户

发布于 2022-04-15 11:59:39

改进你的解决方案，让它发挥作用。

看看我的代码：

<html>
  <body></body>
  <label class="switch">
  <input type="checkbox" id='data-theme'>
  <span class="slider"></span>
  </label>
</html>

html[data-theme='light'] {
    background-color: #9ec8ff;
}

html[data-theme='dark'] {
   background-color: #000000;
}

[data-theme='light'] .d-block-light,
[data-theme='dark'] .d-block-dark {
    display: block !important;
}

const toggle = document.getElementById("data-theme");

const storedTheme = localStorage.getItem('theme') || (window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light");

if (storedTheme) {
  document.documentElement.setAttribute('data-theme', storedTheme)
}


toggle.onclick = function() {
  const currentTheme = document.documentElement.getAttribute("data-theme");
  let targetTheme = "light";

  if (currentTheme === "light") {
    targetTheme = "dark";
  }

  document.documentElement.setAttribute('data-theme', targetTheme)
  localStorage.setItem('theme', targetTheme);
};

票数 0

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/71883135

复制

相似问题

问如何为此脚本创建切换按钮？
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何为此脚本创建切换按钮？EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何为此脚本创建切换按钮？
EN