Yuuto.Y

こんにちは、今回は、webサイトによく用いられるダークモードを実装してみました。
動きなどは、今見ているサイトの左のボタンをクリックすると確認できると思います。
改善点などあったら、コメントよろしくおねがします！
ざっくり説明なんですが、素のJavascriptで実装、CSSは、SCSSを使用といった形で、
Javascriptでは、時間によって表示のモード切り替える(classの変更)処理やボタンを押した際に切り替える処理、また、昼の時間にダークモードなどに切り替えた際に別ページに遷移するとダークモードにせっかく切り替えたのに、その情報が消えてしまう為、ブラウザのlocalStorageに保存といったことをしています。
SASSの方法では、わかりやすいように_color-theme.scssというファイル名でbody.[themeのclass]の下にネストをして、変えてます。

つまづいたポイント

・JavascriptのlocalStorageに保存する工程
・ボケてscssでのスコープを完全に凡ミスしてしまったところ
2つ目のは、変数を中に入れてしまっていたため、外から見に行けないという完全な凡ミスをしてしまいました。

課題点
・リロードを数回繰り返した後に切り替えを行うと色が切り替わらない。

今回実装したコードは、下記になります。
かなり汚くなってしまいました。
今後改善していこうと思います。

追って今問題となっている部分は、改善していこうと思います。
ありがとうございました。