保持暗模式切换 CSS 导航到其他页面

Question

我有这个简单的代码可以将网页变成暗/亮模式。它在您所在的页面上运行良好，但如果我导航到另一个页面或刷新页面，模式将重置为默认值（浅色）。如何让它记住留在我选择的相同模式？这是我的简单代码，我从一个 CSS 切换到另一个。

按钮

<i class="fa fa-toggle-on fa-2x active" id="on" style="display:none;" onclick="darkswitchoff()"></i>
<i class="fa fa-toggle-on fa-2x fa-rotate-180 inactive" id="off" onclick="darkswitchoon()"></i>

脚本

<script>
$(document).ready(function(){
    $('.middle').click(function() {
        $('.inactive, .active').toggle();
  });
});
</script>

<script>
function darkswitchoff() {
    document.getElementById('mainstylesheet').href='/assets/css/main.css';
}

function darkswitchoon() {
    document.getElementById('mainstylesheet').href='/assets/css/main-dark.css';
}
</script>

Answer 1

您需要在整个应用程序中“存储”状态。一种避免使用额外库的麻烦的方法是使用 cookie。

<script>
document.cookie = "isDark=true";
</script>

您可以稍后读取该值并使用暗模式。请记住，cookie 存储为字符串。如果您使用 cookie 仅在用户启用暗模式的情况下进行存储，您可以执行以下操作：

<script>
if(document.cookie){
//Code to Enable Dark Mode
}
</script>

解决这个问题的更好方法是使用库，如 Redux，并使用它强大的“存储”，让您可以在生命周期中存储不同类型的数据应用程序。

Answer 2

您应该将此设置保存在 Cookie 或 localStorage 中。如果设置了 Cookie 或者您在 localStorage 中找到了设置，则加载暗模式样式表。

Answer 3

下面你有所有代码，很遗憾，它在这里不起作用，所以我提供了一个工作版本的链接dark-mode

const toggleSwitch = document.querySelector(
  '.theme-switch input[type="checkbox"]'
);
const currentTheme = localStorage.getItem("theme");

if (currentTheme) {
  document.documentElement.setAttribute("data-theme", currentTheme);

  if (currentTheme === "dark") {
    toggleSwitch.checked = true;
  }
}

function switchTheme(event) {
  if (event.target.checked) {
    document.documentElement.setAttribute("data-theme", "dark");
    localStorage.setItem("theme", "dark");
  } else {
    document.documentElement.setAttribute("data-theme", "light");
    localStorage.setItem("theme", "light");
  }
}

toggleSwitch.addEventListener("change", switchTheme, false);

@import url("https://fonts.googleapis.com/css?family=Lato:400,400italic,700|Sansita+One");
:root {
  --primary-color: #24242b;
  --secondary-color: #433055;
  --font-color: #3f3f3f;
  --bg-color: #f3f3f3;
  --heading-color: #2a2a23;
}

html[data-theme=dark] {
  --primary-color: #f89898;
  --secondary-color: #8894b3;
  --font-color: #d8d8f6;
  --bg-color: #242424;
  --heading-color: #818cab;
}

body {
  font-family: "Lato", sans-serif;
  background-color: var(--bg-color);
  color: var(--font-color);
  max-width: 900px;
  margin: 0 auto;
  transition: background 200ms ease-in;
  padding: 0 30px;
  font-size: calc(1rem + 0.25vh);
}

h1 {
  color: var(--heading-color);
  font-family: "Lato", serif;
  font-size: 3rem;
  margin-bottom: 1vh;
}

p {
  font-size: 1.1rem;
  line-height: 1.6rem;
}

a {
  color: var(--primary-color);
  text-decoration: none;
  border-bottom: 3px solid transparent;
  padding-bottom: 5px;
  transition: border-bottom 1s;
  font-weight: bold;
}
a:hover, a:focus {
  border-bottom: 3px solid currentColor;
}

section {
  margin: 0 auto;
}

.post-meta {
  font-size: 1rem;
  font-style: italic;
  display: block;
  margin-bottom: 4vh;
  color: var(--secondary-color);
}

nav {
  display: flex;
  justify-content: flex-end;
  padding: 20px 0;
}

.theme-switch {
  display: inline-block;
  height: 34px;
  position: relative;
  width: 60px;
}
.theme-switch input {
  display: none;
}
.theme-switch-wrapper {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  margin-top: 20px;
}
.theme-switch-wrapper em {
  margin-left: 10px;
  font-size: 1rem;
}

.slider {
  background-color: #ccc;
  bottom: 0;
  cursor: pointer;
  left: 0;
  position: absolute;
  right: 0;
  top: 0;
  transition: 0.4s;
}
.slider:before {
  background-color: #fff;
  bottom: 4px;
  content: "";
  height: 26px;
  left: 4px;
  position: absolute;
  transition: 0.4s;
  width: 26px;
}
.slider.round {
  border-radius: 34px;
}
.slider.round:before {
  border-radius: 50%;
}

input:checked + .slider {
  background-color: #66bb6a;
}
input:checked + .slider:before {
  transform: translateX(26px);
}

<div class="theme-switch-wrapper">
  <label class="theme-switch" for="checkbox">
    <input type="checkbox" id="checkbox" />
    <div class="slider round"></div>
  </label>
</div>

<section>
  <article class="post">
    <h1>Lorem Ipsum</h1>
    <p class="post-meta">Neque porro quisquam est qui dolorem ipsum quia dolor sit amet, consectetur, adipisci
      velit...</p>

    <p><strong>Lorem ipsum</strong> dolor sit amet consectetur, adipisicing elit. Suscipit voluptatum repellat
      praesentium impedit,
      earum cumque recusandae asperiores? <strong>Ullam</strong>, qui at. Ex aliquam ratione suscipit. Soluta
      voluptate consectetur quae est! Veniam.</p>

    <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Deleniti, architecto. Ducimus molestiae officia dolor
      voluptatem at, sequi debitis odit placeat rerum nisi quidem laudantium nobis in accusamus aut culpa obcaecati!
      Lorem ipsum dolor, <strong>sit amet consectetur</strong> adipisicing elit. Cupiditate provident, aliquid
      mollitia vero quisquam
      eligendi enim, eum incidunt dolorem ipsa voluptatem pariatur cum quis, repellat fugiat. In illo necessitatibus
      quasi!</p>
    <a href="#">Czytaj więcej</a>
  </article>
</section>