realdesigner Ответов: 2

Как я могу исправить эту функцию, чтобы сохранить предыдущий выбор?

Цитата:
Как я могу исправить эту функцию, чтобы сохранить предыдущий выбор?


Цитата:
Я запустил блог с темным режимом и светлым режимом, но проблема в том, что когда темный режим включен и я перехожу на следующую страницу, он возвращается к версии по умолчанию!

1. Как я могу исправить функцию для поддержания предыдущего выбора?
2. Как я могу изменить путь SVG для нового режима?

Я буду использовать чистый путь svg следующим образом:


Что я уже пробовал:

<body id="darkoption" class="darkmode">
 <div>
  <a onclick="toggleDarkLight()">

   <svg class="sunmoon" width="30px" height="30px" viewBox="0 0 50 50">
     <g>
    <circle cx="25" cy="25" r="25"></circle>
     </g>
   </svg>

   <svg class="sunmoon" width="30px" height="30px" viewBox="0 0 50 50">
     <g>
    <rect x="0" y="0"></rect>
     </g>
   </svg>
   
  </a>
 </div>
 <h1>This is New Mode!</h1>
<script>
 function toggleDarkLight() {
 var e = document.getElementById("darkoption"),
  a = e.className;
 e.className = "darkmode" == a ? "lightmode" : "darkmode"
}
</script>
</body>

2 Ответов

Рейтинг:
10

realdesigner

Спасибо @afzaal_ahmad_zeeshan

Но проблема существует!

У нас есть 3 режима!!!

Мне не нужно добавлять еще 2 режима на css как:

1.текущий режим (оригинальный css)
2.lightmode
3.darkmode

Мне просто нужно использовать текущий режим и темный режим, вот и все.

Как я могу указать lightmode на текущий режим -> (оригинальный css) и dark mode на darkmode?

Еще раз спасибо @afzaal_ahmad_zeeshan :)

Рейтинг:
0

Afzaal Ahmad Zeeshan

Цитата:
Как я могу исправить эту функцию, чтобы сохранить предыдущий выбор?
Воспользуйся localStorage для хранения пользовательских выборов и предпочтений для веб-сайта.

Окно.localStorage - веб-API | MDN[^]

Цитата:
Как я могу изменить путь SVG для нового режима?
Вы имеете в виду изменение цвета на основе новых предпочтений? В этом случае я бы предложил иметь несколько SVG-файлов и показывать любой из них на основе конфигураций, выполненных пользователями, в localStorage профиль. Один намек был бы:
function toggleDarkLight() {
   var e = document.getElementById("darkoption"),
   a = e.className;
   var mode = "darkmode" == a ? "lightmode" : "darkmode";
   e.className = mode;

   // store in the localStorage
   localStorage.setItem("sitemode", mode);
}
Затем на странице перезагрузки вы можете установить режимы с помощью JavaScript, 
function pageLoad() {
   var mode = localStorage.getItem("sitemode");
   if(mode) {
       // set the classnames, 
       var e = document.getElementById("darkoption"), a = e.className;
       e.className = mode;
   }
   // in else state, set it to default!
}
Затем вы можете связать эту функцию с обработчиком onload элемента body, например так, 
<body onload="pageLoad();">
   <!-- Content here -->
</body>
Таким образом, вы можете захватить режим и всегда сохранять его с помощью API HTML 5! Надеюсь, это поможет.