ダークモードに任意で切り替えられるボタンをCSSとJavascriptで作ろう!

ダークモードに任意で切り替えられるボタンをCSSとJavascriptで作ろう!

EvernoteやTwitter、YouTubeなどが導入しているデザインに「ダークモード」があります。2019年のトレンドとしても注目されているダークモードはメリットも多いので、ぜひとも導入してみましょう!

今回はウェブでユーザーが任意で切り替えられるボタンを作ってみますよ!




ダークモードってなあに?

そもそもダークモードとは、背景が暗めの色、テキストが明るめの色で構成されたデザインです。GoogleによるとPixelでは63%の省電力が実績として報告されていたり、macOSのMojaveが導入したことでも有名になりました。また、全体的にダークトーンにすることで目が疲れにくくなるようです。

もうメリットしかないですねー。すごいよねー。

ダークモードのデモページ

ボタンをポチポチ切り替えると、ライトモードとダークモードを切り替えられるはずです。

作りが雑なのはご愛嬌で。てへっ。

実際にはhovercursorなどをCSSで適用させてあげると親切ですね!

Javascript

Javascriptはinputタグをクリックするとダークモード用のCSSを適用できるようにします。ダークモード用のlinkidをセットしておいて、それをJavascriptのgetElementByIdで取得します。

CSS

CSSは通常のスタイルに加えて、ダークモード用のCSSを上書きする形で作ります。
CSSのルールとして、下に書かれたプロパティが上に書かれたものより優先されるので、通常のCSSの下にダークモード用のCSSを読み込みましょう!

HTML

headに通常のCSS→ダークモード用の順番でCSSを読み込みます。ダークモード用のlinkにはidをセットして、href#をセットすることで、デフォルトでは何も読み込まないようにしておきましょう!

切り替えボタン自体はforminputでやっていますが、チェックボックスでもaでもなんでもいけますよ。

ボタンを押したらdarkmode.csslinkhref#と入れ替わってCSSが適用される。というわけですね!

さいごに

他の方法でも簡単に作れると思うので、試行錯誤しながら環境に応じて作ってみても楽しいかもしれませんね! また、WordPressには最初から多くのスタイルが適用されていてスタイルを適用していくのが面倒ではありますが、そういうときは!importantを使って強引にCSSを上書きするとスムーズにできるかもしれませんよ!

デモページは下記からどうぞ!



この記事も読まれています

コメント

*