Variablesを使ってダークモードを追加するData2019/10/31TagCSS最近いろんなデバイスやアプリでダークモードが実装されてきていて、充電が減りにくいなどのメリットもあるようなのでサイトにもダークモードを実装しました。「サイトにもダークモードを実装する文化が広まるといいなー」と思ってます。darkの場合に、任意のタグに.darkなどのクラスをつけて、クラスがついている場合に定義していたカラーの変数を変更すると、色合いの変更は楽な気がします。Variablesが実装されていないブラウザには反映されないため、少し前のバージョンを考慮したい場合には注意が必要です。etc下記のようなjavascriptを用意して、localstorageにも保存してくれる関数を用意して、changeModeにlocalstorage.modeを投げて、存在する場合はlocalstorage.modeを優先するようにしました。lightを投げることでlocalstorageに入れることができます。このサイトではvueを使っているのでstoreでやっていたりするのですが、どこでも使える形になおした関数が下記です。0.03);}ダークモード切り替えは端末のモードを切り替えるか、Aboutページから切り替えられるようにしています。https://clover.blue/about下記参考にさせていただきました。Webクリエイターボックス。