ダークモードに任意で切り替えられるボタンをCSSとJavascriptで作ろう！
EvernoteやTwitter、YouTubeなどが導入しているデザインに「ダークモード」があります。2019年のトレンドとしても注目されているダークモードはメリットも多いので、ぜひとも導入してみましょう！
今回はウェブでユーザーが任意で切り替えられるボタンを作ってみますよ！
ダークモードってなあに？
そもそもダークモードとは、背景が暗めの色、テキストが明るめの色で構成されたデザインです。GoogleによるとPixelでは63%の省電力が実績として報告されていたり、macOSのMojaveが導入したことでも有名になりました。また、全体的にダークトーンにすることで目が疲れにくくなるようです。
もうメリットしかないですねー。すごいよねー。
ダークモードのデモページ
ボタンをポチポチ切り替えると、ライトモードとダークモードを切り替えられるはずです。
作りが雑なのはご愛嬌で。てへっ。
実際にはhoverやcursorなどをCSSで適用させてあげると親切ですね！
Javascript
Javascriptはinputタグをクリックするとダークモード用のCSSを適用できるようにします。ダークモード用のlinkにidをセットしておいて、それをJavascriptのgetElementByIdで取得します。
var changeStyle = function(url) { var linkstyle = document.getElementById('darkmode'); linkstyle.href = url; }; CSS
CSSは通常のスタイルに加えて、ダークモード用のCSSを上書きする形で作ります。
CSSのルールとして、下に書かれたプロパティが上に書かれたものより優先されるので、通常のCSSの下にダークモード用のCSSを読み込みましょう！
HTML
headに通常のCSS→ダークモード用の順番でCSSを読み込みます。ダークモード用のlinkにはidをセットして、hrefに#をセットすることで、デフォルトでは何も読み込まないようにしておきましょう！
<!-- 全体のスタイルシート --> <link rel="stylesheet" href="../css/common.css" type="text/css"> <!-- ダークモード用のスタイルシート --> <link rel="stylesheet" href="#" type="text/css" id="darkmode">
切り替えボタン自体はformのinputでやっていますが、チェックボックスでもaでもなんでもいけますよ。
<form action="" class="darkmode_button"> <input type="button" value="DARK MODE" onclick="changeStyle('css/darkmode.css');"> <input type="button" value="LIGHT MODE" onclick="changeStyle('');"> </form> ボタンを押したらdarkmode.cssがlinkのhrefの#と入れ替わってCSSが適用される。というわけですね！
さいごに
他の方法でも簡単に作れると思うので、試行錯誤しながら環境に応じて作ってみても楽しいかもしれませんね！ また、WordPressには最初から多くのスタイルが適用されていてスタイルを適用していくのが面倒ではありますが、そういうときは!importantを使って強引にCSSを上書きするとスムーズにできるかもしれませんよ！
デモページは下記からどうぞ！
コメント