Блог

Главная - Вопросы по программированию - Изменение значка локального хранилища HTML и темный режим с помощью JavaScript

Изменение значка локального хранилища HTML и темный режим с помощью JavaScript

#javascript #html #css #icons #local-storage

#javascript #HTML #css #Значки #локальное хранилище

Вопрос:

Я создал кнопку темного режима с моей собственной темной темой. Тема сохраняется в локальном хранилище. Также, когда я нажимаю кнопку, меняется значок (луна на солнце). Но если я перезагружу страницу, сайт все еще будет в темном режиме, но значок кнопки снова станет луной. Итак, вот ссылка, которая покажет вам проблему, если вы не понимаете, о чем я говорю. (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>

Ответ №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');
    }
});