如何修复暗模式不保留跨多个 html 页？
[英]How do I fix dark mode not retaining across multiple html pages?
问题描述
这是我之前问题的后续问题，可以在此处找到如何实现将暗/亮模式功能保存到本地存储？
我希望暗/亮模式继续保留在多个 html 页面上，但事实并非如此。 通过本地存储，我能够使单个页面在页面刷新后保留它的 state 但这不会反映在其他页面中。 即，如果我将 index.html 设置为暗模式，它会一直保持暗模式，直到我更改设置，但如果我转到 other.html，我必须手动将其设置为暗模式。 有什么解决办法？
`
<!DOCTYPE html>
<html>
<head>
<title>index</title>
<link rel="stylesheet" href="styles.css"></link>
<script async src="script.js"></script>
</head>
<body>
<header>
<div class="controls">
<p>Light/Dark Mode</p>
<label class="toggle-switch" for="dark-mode-toggle">
<input type="checkbox" id="dark-mode-toggle" name="theme" xonclick="otherColorChanges()" onreset="restoreDefaultColor()">
<div class="toggle-switch-border">
<div class="toggle-switch-dot"></div>
</div>
</label>
</div>
</header>
<main>
<h1>Go to others.html</h1>
<a href="others.html">Click</a>
</main>
<!--Attempt to make the dark mode work on multiple pages even if it wasn't set on it-->
<script>
checkbox.addEventListener( 'click', function() {
localStorage.setItem('bodyCssProps', this.darkModeToggle.checked);
if(this.darkModeToggle.checked) {
body.classList.add('bodyCssProps')
} else {
body.classList.remove('bodyCssProps')
}
});
</script>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<title>others</title>
<link rel="stylesheet" href="styles.css"></link>
<script async src="script.js"></script>
</head>
<body>
<header>
<div class="controls">
<p>Light/Dark Mode</p>
<label class="toggle-switch" for="dark-mode-toggle">
<input type="checkbox" id="dark-mode-toggle" name="theme" xonclick="otherColorChanges()" onreset="restoreDefaultColor()">
<div class="toggle-switch-border">
<div class="toggle-switch-dot"></div>
</div>
</label>
</div>
</header>
<main>
<h1>Go to others.html</h1>
<a href="others.html">Click</a>
</main>
<!--Attempt to make the dark mode work on multiple pages even if it wasn't set on it-->
<script>
checkbox.addEventListener( 'click', function() {
localStorage.setItem('bodyCssProps', this.darkModeToggle.checked);
if(this.darkModeToggle.checked) {
body.classList.add('bodyCssProps')
} else {
body.classList.remove('bodyCssProps')
}
});
</script>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<title>team</title>
<link rel="stylesheet" href="styles.css"></link>
<script async src="script.js"></script>
</head>
<body>
<header>
<div class="controls">
<p>Light/Dark Mode</p>
<label class="toggle-switch" for="dark-mode-toggle">
<input type="checkbox" id="dark-mode-toggle" name="theme" xonclick="otherColorChanges()" onreset="restoreDefaultColor()">
<div class="toggle-switch-border">
<div class="toggle-switch-dot"></div>
</div>
</label>
</div>
</header>
<main>
<h1>Go to others.html</h1>
<a href="others.html">Click</a>
</main>
<!--Attempt to make the dark mode work on multiple pages even if it wasn't set on it-->
<script>
checkbox.addEventListener( 'click', function() {
localStorage.setItem('bodyCssProps', this.darkModeToggle.checked);
if(this.darkModeToggle.checked) {
body.classList.add('bodyCssProps')
} else {
body.classList.remove('bodyCssProps')
}
});
</script>
</body>
</html>
`
`
.toggle-switch {
display : inline-flex;
align-items : center;
font-family : 'Sora', sans-serif;
font-weight : 700;
font-size : .875rem;
cursor : pointer;
}
.toggle-switch-border {
display : inline-flex;
align-items : center;
width : 60px;
height : 36px;
border : 1px solid var(--primary);
border-radius : 20px;
box-sizing : border-box;
margin-inline-start : 8px;
}
.toggle-switch input {
display: none;
}
.toggle-switch-dot {
width : 28px;
height : 28px;
border-radius : 50%;
background : var(--primary);
transform : translate3d(3px, 0, 0);
transition : transform .1s ease-in-out;
}
.toggle-switch input:checked + * .toggle-switch-dot {
transform : translate3d(26px, 0, 0);
}
body {
color : var(--primary);
font-family : "Work Sans", sans-serif;
background : var(--background);
/*box-sizing : border-box;*/
transition : color 0.5s;
transition : background 0.5s;
--dark-background : #253a52;
--dark-primary : white; /*#FFFFE3*/
--dark-link : #A9FE75;
--light-background : white; /*#ffffe3*/
--light-primary : #253a52;
--light-link : #1348da;
--background : var(--light-background);
--primary : var(--light-primary);
--link : var(--light-link);
}
a {
color : var(--link);
}
/* separator bars */
nav,
section {
border-block-end : 1px solid var(--primary);
}
/* container for dark-mode toggle */
header .controls {
display : flex;
justify-content : end;
padding : 1rem 0;
margin-right : 3rem;
}
a.btn {
display : inline-flex;
align-items : center;
background : var(--link);
color : var(--background);
text-decoration : none;
padding : 0 1rem;
height : 2.5rem;
border-radius : 1.25rem;
font-family : "Montserrat", sans-serif;
font-weight : 700;
font-size : 0.875rem;
}
`
`
/*Light/Dark mode toggle*/
class CssPropControl {
constructor(element) {
this.element = element
}
get(varName) {
return getComputedStyle(this.element).getPropertyValue(varName)
}
set(varName, val) {
return this.element.style.setProperty(varName, val)
}
}
const bodyCssProps = new CssPropControl(document.body)
let toggle = document.querySelector('#dark-mode-toggle')
toggle.addEventListener('click', updateMode);
function updateMode() {
let mode = toggle.checked ? 'dark' : 'light'
bodyCssProps.set('--background', bodyCssProps.get(`--${mode}-background`))
bodyCssProps.set('--primary', bodyCssProps.get(`--${mode}-primary`))
bodyCssProps.set('--link', bodyCssProps.get(`--${mode}-link`))
}
/*Save dark mode in local storage*/
const darkModeToggle = document.getElementById('dark-mode-toggle');
darkModeToggle.addEventListener('click', () => {
darkModeToggle.checked ? document.body.classList.add("bodyCssProps"):document.body.classList.remove("bodyCssProps");
localStorage.setItem('darkModeStatus', darkModeToggle.checked);
});
window.addEventListener('load', (event) => {
if (localStorage.getItem('darkModeStatus')=="true"){
document.body.classList.add("bodyCssProps");
document.getElementById('dark-mode-toggle').checked = true;
document.body.classList.add("bodyCssProps");
console.log('dark mode', document.body.className);
}
else {
console.log('light mode', document.body.className);
}
updateMode();
});
`
3 个解决方案
解决方案1
1 已采纳 2022-12-13 03:57:48
您可以使用 cookie 来完成此操作。
document.cookie = "theme=dark; path=/; expires=Fri, 31 Dec 9999 23:59:59 GMT;"
这会将 cookie 设置为适用于几乎没有到期日期的根域上的任何页面。
解决方案2
1 2022-12-13 06:32:35
您想要做的是监听页面的load ，然后检索值/设置颜色模式。 您可以添加一些 css/其他逻辑，使其在导航时从亮到暗模式减少 flash，但这将使颜色模式在页面之间保持不变。
const isDarkMode = () => {
return localStorage.getItem('darkModeStatus', false);
}
window.addEventListener('load', () => {
if (isDarkMode()) {
darkModeToggle.checked = true;
updateMode()
}
})
解决方案3
0 2022-12-14 00:50:29
我很抱歉我的英语我注意到，在某些行中，它最终会重复将复选框 ID 分配给变量，并且还会重复将事件“onclick”声明到复选框。 将它们统一在一个事件/变量中可以极大地优化您的代码。
/*Light/Dark mode toggle*/ class CssPropControl { constructor(element) { this.element = element } get(varName) { return getComputedStyle(this.element).getPropertyValue(varName) } set(varName, val) { return this.element.style.setProperty(varName, val) } } const bodyCssProps = new CssPropControl(document.body) let toggle = document.querySelector('#dark-mode-toggle'); toggle.addEventListener('click',() =>{ let mode = toggle.checked; updateMode(mode == true? 'dark': 'light'); addBodyClassProps(mode == true? 'add': 'remove'); setStorageMode(mode); }); function updateMode(mode) { bodyCssProps.set('--background', bodyCssProps.get(`--${mode}-background`)) bodyCssProps.set('--primary', bodyCssProps.get(`--${mode}-primary`)) bodyCssProps.set('--link', bodyCssProps.get(`--${mode}-link`)) } function addBodyClassProps(act) { if(act == 'add') { document.body.classList.add('bodyCssProps'); console.log('dark mode', document.body.className); } else { document.body.classList.remove('bodyCssProps'); console.log('light mode', document.body.className); } } /*Save dark mode in local storage*/ function setStorageMode(_MODE) { localStorage.setItem('darkModeStatus', _MODE); } function getStorageMode() { let storageMode = localStorage.getItem('darkModeStatus')?? null; if(storageMode == 'true') { toggle.checked = true; addBodyClassProps('add'); updateMode('dark'); } } window.addEventListener('load',getStorageMode());
.toggle-switch { display: inline-flex; align-items: center; font-family: 'Sora', sans-serif; font-weight: 700; font-size: .875rem; cursor: pointer; }.toggle-switch-border { display: inline-flex; align-items: center; width: 60px; height: 36px; border: 1px solid var(--primary); border-radius: 20px; box-sizing: border-box; margin-inline-start: 8px; }.toggle-switch input { display: none; }.toggle-switch-dot { width: 28px; height: 28px; border-radius: 50%; background: var(--primary); transform: translate3d(3px, 0, 0); transition: transform.1s ease-in-out; }.toggle-switch input:checked + *.toggle-switch-dot { transform: translate3d(26px, 0, 0); } body { color: var(--primary); font-family: "Work Sans", sans-serif; background: var(--background); /*box-sizing: border-box;*/ transition: color 0.5s; transition: background 0.5s; --dark-background: #253a52; --dark-primary: white; /*#FFFFE3*/ --dark-link: #A9FE75; --light-background: white; /*#ffffe3*/ --light-primary: #253a52; --light-link: #1348da; --background: var(--light-background); --primary: var(--light-primary); --link: var(--light-link); } a { color: var(--link); } /* separator bars */ nav, section { border-block-end: 1px solid var(--primary); } /* container for dark-mode toggle */ header.controls { display: flex; justify-content: end; padding: 1rem 0; margin-right: 3rem; } a.btn { display: inline-flex; align-items: center; background: var(--link); color: var(--background); text-decoration: none; padding: 0 1rem; height: 2.5rem; border-radius: 1.25rem; font-family: "Montserrat", sans-serif; font-weight: 700; font-size: 0.875rem; }
<.DOCTYPE html> <html> <head> <title>index</title> <link rel="stylesheet" href="styles.css"></link> <script async src="script.js"></script> </head> <body> <header> <div class="controls"> <p>Light/Dark Mode</p> <label class="toggle-switch" for="dark-mode-toggle"> <input type="checkbox" id="dark-mode-toggle" name="theme" xonclick="otherColorChanges()" onreset="restoreDefaultColor()"> <div class="toggle-switch-border"> <div class="toggle-switch-dot"></div> </div> </label> </div> </header> <main> <h1>Go to others.html</h1> <a href="others.html">Click</a> </main> </body> </html>
如何跨页面设置暗模式，而不是用户必须在每个页面上手动按下它
[英]How do i set dark mode accross pages instead of user having to manually press it on every single page
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.