HTML+CSS+JSでWebページのテーマを変える

五日坊主ではないです

成果物

See the Pen themeColor by utareyu (@utareyu) on CodePen.

使ったもの

コード

CodePenの中見てね

説明

themeColor.html
下部ボタンのonclickでそれぞれテーマを変える関数を実行する

themeColor.css
4~23 : 変数--color-なんとかでそれぞれのテーマの色を指定

themeColor.js
1~6 : まずlocalStorageを見に行って値が存在しない(Null)場合は初期化 (changeBlue()を実行)
存在する場合はキーLSthemeの値をルート(<html>)のtheme属性の値として設定する

10~23 : テーマを変更する関数
2行目でlocalStorageに値をセット
3行目でルートの属性と値を設定


参考：
　　　https://tech-blog.cloud-config.jp/2020-12-04-web-theme-color/
　　　https://blog.capilano-fw.com/?p=5341#i-7
　　　https://developer.mozilla.org/ja/docs/Web/API/Window/localStorage

learnJS Home