Question

所以我有一个JS脚本，当用户按下暗模式的按钮时，页面切换到dark_theme.css（而不是使用主题css，即Ligh Mode css），当用户按下Light Mode按钮时切换回theme.css。所以我的问题是当用户使用darm_theme.css并加载不同的页面或刷新当前页面时，主题切换回轻模式。我怎样才能以某种方式保存用户的选择/选择？

＆＃13;

function swapStyleSheet(sheet){
    document.getElementById('theme').setAttribute('href', sheet);
}

＆＃13;

I have one file called theme.css and one more called dark_theme.css

＆＃13;

<link id="theme" rel="stylesheet" type="text/css" href="theme.css">
...more html here...
<p><button class="colormode" onclick="swapStyleSheet('dark_theme.css')">Dark Mode</button> <button class="colormode" onclick="swapStyleSheet('theme.css')">Light Mode</button></p>

＆＃13;

Answer 1

使用localStorage：

function swapStyleSheet(sheet){
  document.getElementById('theme').setAttribute('href', sheet);
  localStorage.setItem("sheet", sheet);
}

window.onload = _ =>
 swapStyleSheet(
  localStorage.getItem("sheet") || "default.css"
 );

Answer 2

您可以使用Cookie。（Cookie函数在这里：https://stackoverflow.com/a/24103596）

function swapStyleSheet(sheet){
    document.getElementById('theme').setAttribute('href', sheet);
    createCookie ("sheet", sheet);
}
document.addEventListener("DOMContentLoaded", function(event) { 
    var item = readCookie ("sheet") || "default.css";
    swapStyleSheet (item);
});

如何在所有页面中启用暗模式？

2 个答案: