現在、制作しているWebサイトでライトモードとダークモードで閲覧できるように設定しているのですが、
トップページは上手く切替ができていますが、他のページに遷移した際に設定が戻ってしまいます。
色々とネットの情報も確認したながらやっているのですが上手くいきません。
詳しい方がいらっしゃいましたらご教授願います。
以下にコードを添付します。
※もし足りない部分がありましたら補足いたします。
お手数をおかけしますがよろしくお願いいたします。
HTML
<div class="cp_ipcheck"> <input type="checkbox" name="dark-mode" id="btn-dark-mode"> <label for="btn-dark-mode"></label> </div>
CSS
/* ダークモードCSS */ :root { --main-text: #232822; --main-bg: #fff; --main-bg2: #000; } @media (prefers-color-scheme: dark) { :root { --main-text: #fff; --main-bg: #232822; } } body, .toggle_btn span{ color: var(--main-text); background: var(--main-bg); background-color: var(--main-bg); transition: .3s; } .light-mode{ --main-text: #232822; --main-bg: #fff; --main-bg2: #000; } .dark-mode{ --main-text: #fff; --main-bg: #232822; --main-bg2: #fff; }
javascript
// ダークモード用 const btn = document.querySelector("#btn-dark-mode"); //OS側の設定判定 const darkModeMediaQuery = window.matchMedia('(prefers-color-scheme: dark)'); const darkModeOn = darkModeMediaQuery.matches; darkModeMediaQuery.addListener((e) => { const darkModeOn = e.matches; if (darkModeOn) { document.body.classList.remove('light-mode'); document.body.classList.add('dark-mode'); localStorage.setItem('dark-mode-settings', 'dark'); } else { document.body.classList.remove('dark-mode'); document.body.classList.add('light-mode'); localStorage.setItem('dark-mode-settings', 'light'); } }); //チェックボックス切り替え判定 btn.addEventListener("change", () => { if (btn.checked === true) { document.body.classList.remove('light-mode'); document.body.classList.add('dark-mode'); localStorage.setItem('dark-mode-settings', 'dark'); } else { document.body.classList.remove('dark-mode'); document.body.classList.add('light-mode'); localStorage.setItem('dark-mode-settings', 'light'); } // const darkModeParam = localStorage.getItem('dark-mode-settings', 'dark-mode'); if (localStorage.getItem('dark-mode-settings') === 'dark') { document.body.classList.add('dark-mode'); btn.checked = true; } else if (localStorage.getItem('dark-mode-settings') === 'light') { document.body.classList.add('light-mode'); }
追記:
Firefoxでの表示は特に問題はありませんでしたが、ChromeやEdgeですとページ遷移やリロードで設定がリセットされてしまう状況です。
またHTMLやCSS、JSはネットの情報を元に作成しました。
HTMLは必要な部分だけ掲載しました。