Neat Design Journal

CSSだけでダークモードに対応する方法

CSSだけでダークモードに対応する方法

会社や個人、ブログやポートフォリオなどのWebサイトをCSSだけでダークモードに対応する方法をご紹介します。サイトを閲覧しているユーザーが、ダークモードとライトモードを自由に切り替えることのできるボタンを実装しているサイトも数多くありますが、今回ご紹介するのは、ユーザーのOS設定に従って自動的にダークモードかライトモードで表示する、という方法なので、CSSだけで完結します。

方法は２通りあります

ユーザーのOS設定に従ってダークモードかライトモードで表示する方法は、CSSでは２通りあります。

@media (prefers-color-scheme: dark)

まずはCSSの@mediaタイプを使った方法です。とりあえずコードをご覧ください。

:root {
    --color-dark: #000;
    --color-light: #fff;
}

body {
    color: var(--color-dark);
    background-color: var(--color-light);
}

@media (prefers-color-scheme: dark) {
    body {
        color: var(--color-light);
        background-color: var(--color-dark);
    }
}

やってることは単純で、メディアクエリのような感じで通常の表示はライトモード用のカラーを指定しておいて、もしダークモードだったらダークモード用のカラーを表示する、ということです。

ユーザーのOS設定がライトモードだったらフォントカラーは#000、背景色は#fffになり、ダークモードだったらフォントカラーが#fff、背景色は#000になるという仕組みです。簡単ですね。

サイト全体のフォントカラーや背景色だけでなく、

:root {
    --color-link-primary: #0000ff;
    --color-link-secondary: #0077E6;
}

a {
    &:any-link {
        color: var(--color-link-primary);
    }
}

@media (prefers-color-scheme: dark) {
    a {
        &:any-link {
            color: var(--color-link-seconadry);
        }
    }
}

このように指定しておけば、リンク部分の文字色もOS設定のカラーモードによって変化させることができます。便利ですね。

light-dark()関数

もう一つの方法はlight-dark()関数を使う方法です。こちらもコードをご覧ください。

:root {
    color-scheme: light dark;
    --color-dark: #000;
    --color-light: #fff;
}

まずは:root要素にcolor-scheme: light dark;という魔法の呪文を記述します。その後にカスタムプロパティで適当な色を定義しておいてください。

body {
    color: light-dark(var(--color-dark), var(--color-light));
    background-color: light-dark(var(--color-light), var(--color-dark));
}

そして、このようにlight-dark()関数を使うことで関数内の最初の値をライトモード時のカラー、二番目の値をダークモード時のカラーとすることができます。

変数を使っているので、コードの見た目上だと難解な気もしますが、

:root {
    color-scheme: light dark;
}

body {
    color: light-dark(#000, #fff);
    background-color: light-dark(#fff, #000);
}

実際には後々のメンテナンスやカスタマイズ性を無視すればこれでも十分です。

あ、今さらですがカスタムプロパティについては以下の記事もご参照ください。

CSS変数（カスタムプロパティ）の使い方

サイトのデザイン部分を担うCSS（カスケーディング・スタイル・シート）は日々どんどん進化しています。特に近年の新しいCSSにはサイト制作時に使えるとても便利なものが増えてきました。今日はその中でもCSS変数（カスタムプロ […]

CSS変数（カスタムプロパティ）の使い方のファビコン
https://neatdesignjournal.com/css-variables/
CSS変数（カスタムプロパティ）の使い方のサムネイル

最後に

ボタンを使ってカラーモードを切り替える方法は難しいのでまた別の機会に実装したいなとは思いつつ、今回の対応だけでも十分な気もしなくもないですね。でも、私もそうなんですが、OSの設定はダークモードでもWebサイトを閲覧する時はライトモードが良かったりもするので、やっぱりユーザーが切り替えられるようにはしたいなとも思います。それと、light-dark()関数は比較的新しいCSSなので対応ブラウザを確認して実装した方がいいかもです。

R7.7.15追記

切り替えボタンを実装してみました。当ブログのヘッダー部分に設置していますので、ポチポチ切り替えてみてください。デザイン的なものの善し悪しはまた考えるとして、今回は取り急ぎAppleのデザインガイドラインに沿うような感じで作ってみました。これなら馴染みのあるデザインなのでそこまで違和感はありませんよね。

ポイントとしては、

  • 最初の表示はOSの設定に従い、ダークモードかライトモードで表示する。
  • ページ遷移した場合などは、ユーザーが指定したカラーモードを引き継ぐ仕様。
  • jQueryで動かしてます。

CodePenでスイッチ部分だけを作成しましたのでご参考にしてください。

See the Pen color-mode-switch by ryskyshd (@ryskyshd) on CodePen.

機会があれば詳しい解説記事を投稿したいと思います。