css 使用javascript在不同页面上保持暗或亮模式

nqwrtyyt 于 2023-03-09 发布在 Java

关注(0)|答案(2)|浏览(162)

基本上，我得到了一个黑暗模式的首页，与脚本是（从W3schools）：

<script>
function darklightmode() {
    var element = document.body;
    element.classList.toggle("dmode");
} </script>

和按钮：

<button onclick="darklightmode()" style="background:none; border: none;">
                        <img src="images/ld-icon.png" class="icon">
                    </button>

还有一些CSS，比如

.dmode li a{
transition: 1s all;
color: #2E3440;
background: none;}

那么，如何使用一些Javascript，使用户正在使用的模式停留在页面之间，并且在访问另一个页面时不返回默认值呢？
初学者在这里，任何帮助感谢。

css

来源：https://stackoverflow.com/questions/71198296/keep-dark-or-light-mode-over-different-pages-with-javascript

2条答案

按热度按时间

ix0qys7i1#

您需要将当前主题存储在某个地方。请尝试使用本地存储。
How do i set dark mode theme across multiple pages?示例（此问题重复）：

checkbox.addEventListener( 'change', function() {
         localStorage.setItem('dark',this.checked);
         if(this.checked) {
              body.classList.add('dark')
         } else {
              body.classList.remove('dark')     
         }
    });

每一页上都写着

if(localStorage.getItem('dark')) {
         body.classList.add('dark');
    }

赞(0）回复(0）举报 2023-03-09

ej83mcc02#

鉴于我的黑暗主题是由body标签中的类（darkmode）定义的，在我所有的html文件中为：

<body class="darkmode">

因此，使用toggle函数和localStorage解决问题的最简单方法是：

const body = document.querySelector("body");
const toggleMode = document.querySelector(".toggle");

toggleMode.addEventListener("click", () => {
  let actualTheme = body.className;

  localStorage.setItem("Mytheme", actualTheme);
  body.classList.toggle("darkmode");
});

然后（Sid的回答相同）在所有html文件中包括：

if (localStorage.getItem("Mytheme"))
        body.classList.toggle(localStorage.getItem("Mytheme"));

赞(0）回复(0）举报 2023-03-09

我来回答

css 使用javascript在不同页面上保持暗或亮模式

2条答案

相关问题

热门标签

最新问答