質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
CSS3

CSS(Cascading Style Sheet)の第3版です。CSS3と略されることが多いです。色やデザインを柔軟に変更することが可能になります。

HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

Q&A

1回答

389閲覧

サイトでダークモードの実装でページ遷移した際に反映されないようです。

MillionMan

総合スコア11

CSS3

CSS(Cascading Style Sheet)の第3版です。CSS3と略されることが多いです。色やデザインを柔軟に変更することが可能になります。

HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

0グッド

1クリップ

投稿2022/08/04 02:43

編集2022/08/06 05:49

現在、制作している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は必要な部分だけ掲載しました。

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

Lhankor_Mhy

2022/08/04 02:47

トップページとその他のページでの違いはどこにありますか?
guest

回答1

0

コードの最後に }) を追加しましょう。

JS

1//チェックボックス切り替え判定 2btn.addEventListener("change", () => { 3 if (btn.checked === true) { 4 document.body.classList.remove('light-mode'); 5 document.body.classList.add('dark-mode'); 6 localStorage.setItem('dark-mode-settings', 'dark'); 7 } else { 8 document.body.classList.remove('dark-mode'); 9 document.body.classList.add('light-mode'); 10 localStorage.setItem('dark-mode-settings', 'light'); 11 } 12 13 // const darkModeParam = localStorage.getItem('dark-mode-settings', 'dark-mode'); 14 if (localStorage.getItem('dark-mode-settings') === 'dark') { 15 document.body.classList.add('dark-mode'); 16 btn.checked = true; 17 } else if (localStorage.getItem('dark-mode-settings') === 'light') { 18 document.body.classList.add('light-mode'); 19 }

投稿2022/08/04 02:57

joshoangtien

総合スコア65

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

MillionMan

2022/08/04 05:19

ご回答ありがとうございます。 最後の「})」は、質問する際に着け忘れていました。。 すみません。 実際にはあります。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

まだベストアンサーが選ばれていません

会員登録して回答してみよう

アカウントをお持ちの方は

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問