保持深色模式切换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>

一个更好的处理方法是使用库像回家的并使用它强大的"存储"功能。这可以让你在应用的生命周期中存储不同类型的数据。

Answer 2

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

Answer 3

下面你有所有的代码，不幸的是，它不会在这里工作，所以我给一个链接到工作版本的黑暗模式

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>