すべてのページでダークモードを有効にする方法は？

Question

私はJSスクリプトを持っています。ユーザーがダークモードのボタンを押すと、ページはdark_theme.cssに切り替わります（theme.cssはLighモードCSSです）。そして、ユーザーがライトモードボタンを押すと、 theme.cssに戻ります。ですから私の問題は、ユーザーがdarm_theme.cssを使用して別のページを読み込んだり、現在のページをリフレッシュしたりするときにテーマがライトモードに戻ってしまうことです。どういうわけかユーザーの選択/選択を保存するにはどうすればよいですか？そのため

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

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

<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>

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

あなたはクッキーを使用することができます。 （ここではクッキー機能：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); 
});