我这种是大家常用的方案,Github、知乎 等大网站都是这样做的,你看一下他们的源代码就能发现~
当然,这种方案需要做好 CSS 样式才行,以确保可以正确覆盖常规的白天样式。
关于 Cookie 记住主题模式,我给你写了段和我前面配套的代码,既然你没有采用我的方案那就当参考一下吧:- // 根据当前 Cookie 中的主题模式来设置网页主题模式setTheme(getTheme());// 获取 Cookie 中的主题模式function getTheme() { let name = 'theme=', ca = document.cookie.split(';'); for (let i=0; i<ca.length; i++) { let c = ca[i].trim(); if (c.indexOf(name)==0) return c.substring(name.length,c.length); } // 如果不存在 theme 这个 Cookie 值,则返回为白天模式 return 'light';}// 修改 Cookie 中的主题模式function setTheme(theme) { switch(theme) { case 'light': // 删除 theme 这个 Cookie,并移除 html 标签的相关属性 document.cookie='theme=; expires=Thu, 01 Jan 1970 00:00:00 GMT; path=/'; document.lastElementChild.removeAttribute('data-theme'); break; case 'dark': // 写入 Cookie 并对 html 标签添加相关属性 document.cookie='theme=dark; expires=Thu, 18 Dec 2031 12:00:00 GMT; path=/'; document.lastElementChild.setAttribute('data-theme', 'dark'); break; }}
复制代码 |