CSSカスタムプロパティでテーマ切替を簡単実装｜ライト＆ダーク対応の方法

こんにちは！静岡県浜松市でWEBデザイナーをしています小瀧です。

最近のWebサイトでは、「ダークモード」「ライトモード」といったテーマ切替が標準機能になりつつあります。

ユーザーの環境や好みに応じて色を変えられると、視認性・アクセシビリティの向上やブランドイメージの統一に直結するため、導入メリットは大きいです。

しかし、テーマ切替を従来のCSSで実装しようとすると、複数の色指定をすべて書き換える必要があり、保守性が低いという問題がありました。

そこで注目したいのが CSSカスタムプロパティ（変数） です。

変数化したカラーを使えば、一箇所書き換えるだけでテーマ全体の色が切り替わるため、メンテナンスコストを大幅に削減できます。

今回は、CSSカスタムプロパティを使ったテーマ切替の基本と実装例を、ライトモード／ダークモードのサンプルを交えて解説します。

CSSカスタムプロパティとは？

CSS変数とも呼ばれ、--変数名 という形式で定義し、var(--変数名) で参照します。

 :root {
    --main-bg: #ffffff;
    --main-text: #333333;
  }
  body {
    background: var(--main-bg);
    color: var(--main-text);
  }

この方法なら、テーマカラーを変数として一元管理できるため、複数箇所に同じ色を適用しても変更が容易になります。

テーマ切替の基本構造

実装例：ライト／ダークテーマ切替

See the Pen
Untitled by 小瀧賢 (@ekwwawpb-the-styleful)
on CodePen.

ユーザーのOS設定を反映する

CSSだけで、ユーザーのOSがダークモードかどうかを判定可能です。

@media (prefers-color-scheme: dark) {
    :root {
      --bg-color: #121212;
      --text-color: #ffffff;
      --card-bg: #1e1e1e;
    }
  }

これで、最初にページを開いたときにOS設定に合わせてテーマが適用されます。

実運用のポイント

まとめ

satokotadesignキャンペーン実施中！