CSSでダークモード対応を実装する方法

ダークモード対応は、ユーザーの環境設定に応じたスタイルを適用する重要なテクニックです。CSSの color-scheme プロパティや @media (prefers-color-scheme) を活用して、簡単に実装できます。

color-scheme プロパティを使う

color-scheme プロパティを使うと、ブラウザが自動的に適切なテーマを適用できます。

:root {
  color-scheme: dark;
}

:root {
  color-scheme: light;
}

この設定をすると、ブラウザのデフォルトスタイル（フォーム要素やスクロールバーなど）がユーザーの設定に応じて変わります。

@media (prefers-color-scheme) を使ったカスタムスタイル

より細かくデザインを制御するには、メディアクエリを使います。

body {
  background-color: white;
  color: black;
}

@media (prefers-color-scheme: dark) {
  body {
    background-color: black;
    color: white;
  }
}

この方法を使うと、ユーザーの設定に応じて背景色や文字色を変更できます。

この部分を「ライト」から「ダーク」にすることでユーザー設定に合ったデザインになります。

CSS変数を活用する

CSS変数を使うと、テーマ変更がより柔軟になります。
先ほどのようにユーザの設定で変更できます。

:root {
  --bg-color: white;
  --text-color: black;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg-color: black;
    --text-color: white;
  }
}

body {
  background-color: var(--bg-color);
  color: var(--text-color);
}

この方法なら、--bg-color や --text-color の値を調整すれば、全体のスタイルを簡単に切り替えられます。

まとめ

ダークモード対応は、color-scheme プロパティや @media (prefers-color-scheme) を活用することで簡単に実装できます。さらに、CSS変数やJavaScriptを組み合わせることで、より柔軟なテーマ切り替えが可能になります。