Question

我用自己的深色主题制作了一个深色模式按钮。主题由本地存储保存。同样，当我单击按钮时，它的图标也会更改（月亮变成太阳）。但是，如果我重新加载页面，该站点仍处于暗模式，但是按钮图标又是月亮。因此，这里有一个链接，向您显示如果您不理解我在说什么的问题。（https://postimg.cc/yg6Q3vq0）也是我的代码：

//This is the darkmode script. 
function darkmode() {
  const wasDarkmode = localStorage.getItem('darkmode') === 'true';
  localStorage.setItem('darkmode', !wasDarkmode);
  const element = document.body;
  element.classList.toggle('dark-mode', !wasDarkmode);

}
function onload() {
  document.body.classList.toggle('dark-mode', localStorage.getItem('darkmode') === 'true');
}
//End
//And this is the code which change the button's icon
$('button').on('click', fav);

function fav(e) {
  $(this).find('.fa').toggleClass('fa-moon-o fa-sun-o');
}
//So I would like to combine the 2 codes. I mean to add the icon code to Local Storage.

.card {
  color: yellow;
  background-color: blue;
  
}

.dark-mode .car {
  color: blue;
  background-color: yellow;
}

<html>
<head>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
</head>
<body>
<a style="padding: 0 !important;"><button class="darkmode" onclick="darkmode()"><i class="fa fa-moon-o"></i></button></a>

<div class="card">
<h1>Title</h1>
<p>Text<//p>
<h2>Another text..</h2>
</div>

</body>
</html>

Answer 1

浏览器仅按书面形式呈现HTML。您的HTML表示要渲染<i class="fa fa-moon-o"></i>，这就是浏览器显示的内容。换句话说，默认情况下它将始终显示月亮图标。

您需要对页面加载进行某种检查，以查看是否应更改图标。

类似的事情可能会起作用：

// when the document is ready
$(document).ready(function () {
    // check if dark mode is enabled
    if (localStorage.getItem('darkmode') === 'true') {
        // if it is, change the moon icon to a sun icon
        ('.fa').toggleClass('fa-moon-o fa-sun-o');
    }
});

HTML本地存储图标更改和带有JavaScript的暗模式

1 个答案: