使用 javascript 在不同页面上保持深色或浅色模式

Question

基本上，我在首页上有一个黑暗模式，脚本是（来自 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 让用户正在使用的模式停留在页面之间，而不是在访问另一个页面时返回到默认模式？

这里是初学者，感谢任何帮助。

Answer 1

您需要将当前主题存储在某处。尝试使用本地存储。

来自的例子（这个问题是重复的）：


    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');
    }

使用 javascript 在不同页面上保持深色或浅色模式

Keep dark or light mode over different pages with javascript

html

javascript

css

darkmode