为暗模式添加Localstorage(在jquery中)

Question

我想为暗模式添加本地存储，以记住用户的选择。我已经阅读和查看了这些课程，并尝试了不同的方法，但代码仍然不能正常工作，我也不理解。非常感谢您的帮助和问候！：(

jQuery

$(document).ready(function () {
localStorage.getItem("theme")
function isDark() {
return $("html").attr("theme") == 'dark';
}
function darkModeToggle() {
if (isDark()) {
$("html").attr("theme", "light");
}
else {
$("html").attr("theme", "dark");
}
}
function onClickDark() {
$('.theme-switcher').on('click', function () {
darkModeToggle();
if (isDark()) {
$(this).addClass('active');
localStorage.setItem("mode", "dark");    
}
else {
$(this).removeClass('active');
localStorage.setItem("mode", "light");
}
});
}
onClickDark();
});

HTML

<label class="theme-switcher">
<span class="theme-switcher-label"> icons with sun and moon </span>
<span class="theme-switcher-handle"></span>
</label>

Answer 1

我将在下面的示例代码中向您展示如何在jQuery中使用本地存储进行暗模式操作。

它只会让你知道它是如何工作的，但你可以删除我的风格和按钮，用你自己的想法和更多的功能创建你自己的。

我也看到这是最专业的黑暗模式代码。

这个代码只需切换按钮，点击它即可转换为暗模式，再次点击将转换为亮模式并将其保存在本地存储中。并在启动时检查用户选择的方法。

// Get the theme toggle input
const themeToggle = document.querySelector(
'.theme-switch input[type="checkbox"]'
);
// Function that will switch the theme based on the if the theme toggle is checked or not
function switchTheme(e) {
if (e.target.checked) {
document.documentElement.setAttribute("data-theme", "dark");
} else {
document.documentElement.setAttribute("data-theme", "light");
}
}
// Add an event listener to the theme toggle, which will switch the theme
themeToggle.addEventListener("change", switchTheme, false);
function switchTheme(e) {
if (e.target.checked) {
document.documentElement.setAttribute("data-theme", "dark");

// Set the user's theme preference to dark
localStorage.setItem("theme", "dark");
} else {
document.documentElement.setAttribute("data-theme", "light");

// Set the user's theme preference to light
localStorage.setItem("theme", "light");
}
}
// Get the current theme from local storage
const currentTheme = localStorage.getItem("theme");
// If the current local storage item can be found
if (currentTheme) {
// Set the body data-theme attribute to match the local storage item
document.documentElement.setAttribute("data-theme", currentTheme);
// If the current theme is dark, check the theme toggle
if (currentTheme === "dark") {
themeToggle.checked = true;
}
}

:root {
--bg-color: #fec150;
--font-color: #222;
--title-color: #0067e6;
--title-background: #fff;
--main-border: 1px solid rgba(255, 255, 255, 0.4);
--main-bg: rgba(255, 255, 255, 0.4);
}
[data-theme="dark"] {
--bg-color: #111;
--font-color: #efefef;
--title-color: #fec150;
--title-background: #222;
--main-border: 1px solid rgba(255, 255, 255, 0.2);
--main-bg: rgba(25, 25, 25, 0.4);
}
body {
color: var(--font-color);
background-color: var(--bg-color);
/* OTHER STYLING */
...
}
main {
border: var(--main-border);
background: var(--main-bg);
/* OTHER STYLING */
...
}
h1 {
color: var(--title-color);
/* OTHER STYLING */
...
}
.theme-switch-wrapper {
display: flex;
align-items: center;
}
.theme-switch-wrapper em {
margin-left: 10px;
font-size: 1rem;
}
.theme-switch {
display: inline-block;
height: 34px;
position: relative;
width: 60px;
}
.theme-switch input {
display: none;
}
.slider {
background-color: #ccc;
bottom: 0;
cursor: pointer;
left: 0;
position: absolute;
right: 0;
top: 0;
transition: 0.4s;
border-radius: 34px;
}
.slider:before {
background-color: #fff;
bottom: 4px;
content: "";
height: 26px;
left: 4px;
position: absolute;
transition: 0.4s;
width: 26px;
border-radius: 50%;
}
input:checked + .slider {
background-color: #fec150;
}
input:checked + .slider:before {
transform: translateX(26px);
}
.slider svg {
color: #222;
position: absolute;
transition: opacity 0.2s ease 0s, transform 0.35s ease 0s;
pointer-events: none;
}
.feather-moon {
opacity: 0;
left: 9px;
bottom: 9px;
transform: translateX(4px);
}
.feather-sun {
opacity: 1;
right: 10px;
bottom: 9px;
transform: translateX(0px);
}
input:checked + .slider .feather-moon {
opacity: 1;
transform: translateX(0);
}
input:checked + .slider .feather-sun {
opacity: 0;
transform: translateX(-4px);
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="theme-switch-wrapper">
<label class="theme-switch" for="checkbox">
<input type="checkbox" id="checkbox" />
<div class="slider">
<svgOfSun />
<svgOfMoon />
</div>
</label>
</div>

注意：您可能会在控制台中看到一个错误，上面写着"；未捕获的SecurityError:未能从"Window"读取"localStorage"属性：拒绝对此文档的访问">

这个错误的解决方案在这里提供了谷歌Chrome的完整方法。

感谢这篇文章，我从中找到了代码(https://blog.prototypr.io/create-your-own-dark-mode-using-js-css-variables-and-localstorage-8b461864644b)。