ブログのテーマをダークモードに対応した
ダークモードについて
今日ではMacOSやiPhone/Androidがダークモードをサポートしており、様々なアプリやサービスも追従してダークモードをサポートしています。ダークモードの始まりはスマートフォンの有機ELディスプレイが出たからだと思います。
従来のディスプレイではバックライトを画面全体を照らしていましたが、有機ELでは必要な画素のみ光らせる仕組みのため黒い部分は発光しない、または強く光らせる必要がない為、省電力に繋がります。私の記憶ではTwitterとかがかなり早めにダークモードに対応してたように思えます。
会社のマシンも個人のマシンもダークモードに設定したため、白い画面がいきなり出てくると光が強く感じて見づらいので今回ブログもダークモードに対応しました。🚀
ダークモードの判別方法
大して難しくはなく、CSSのメディアクエリで一発です。prefers-color-scheme: dark だけでダークモード用の設定が可能です。具体的には
@media (prefers-color-scheme: dark) {
.some-class {
color: white;
}
}こんな感じでサクッと対応出来ます。めっちゃ簡単でした✨
CSS Variable
私はSCSSの変数を定義してカラースキームを設定していたのですが、使用上変数の上書きがとても面倒です。なので前から使いたかった、CSS Variable を使ってカラースキームの設定をすることにしました。
結構前からほとんどブラウザが対応していますが、IEは全くサポートされていません。IE11を対応している所はまだまだ多いように思えますので、ちょっと辛い。ですがサポート外であれば個人的には凄くおすすめです。SCSSの変数よりかはかなり使いやすいなと思いました。
使い方は簡単です。よく使われる方法をご紹介します。
:root {
--main-bg-color: brown; /* 変数の宣言 */
}
body {
background-color: var(--main-bg-color); /* 変数の使用 */
}:root に宣言するのは変数は親から継承されるので、全体に適用することが可能です。特定のクラスやタグに対して宣言、適用するのであればCSS Variableの恩恵は受け辛いと思います。むしろ可読性を下げると思うので、あくまでサイト全体のカラースキームとして使うのがベストだと思います。
このように宣言することでダークモードの対応が非常に簡単になります。
:root {
--main-bg-color: brown;
}
@media (prefers-color-scheme: dark) {
:root {
--main-bg-color: white;
}
}
body {
background-color: var(--main-bg-color);
}メディアクエリでユーザー設定がダークモードかどうかを判別し、変数を上書きします。その後 body に対して変数を使用しているので通常の場合はbrownが適用されて、ダークモードの時はwhiteが適用されます。このようにメディアクエリとCSS Variableを上手く使って変数の上書きが簡単に出来ます。
また、SCSSのパーシャルファイルでコンポーネント毎に作っていても :root で宣言されているので各ファイルで変数が使用可能です。最初に色々と宣言しておけば色の変更が合った際も修正はかなり軽微なものになります。
こんな感じでダークモードの対応は大体1-2時間程度で終わって、他の小さな修正を行ったのとSCSSの変数ファイルを削除出来たので少しスッキリしました🎉
これからもっとダークモードのサイトが増えると良いな✨
