ダークモードで色が変化するCSSの書き方

ダークモードとライトモードをサポートするウェブサイトの作成は、ユーザー体験を向上させる効果的な方法の1つです。ここでは、それぞれのモードで色が変化するCSSの作成方法を説明します。

1. 通常のライトモード用のCSSを書く

まずは、通常時（ダークモード非対応またはダークモードがオフの場合）のCSSを定義します。例えば、以下のように背景色を白、文字色を黒に設定します。

body {
    background-color: #fff;
    color: black;
}

2. ダークモード時のCSSを書く

次に、ダークモード時のCSSを定義します。これはメディアクエリ (prefers-color-scheme: dark) を使用して実装します。このメディアクエリは、ユーザーのシステムがダークモードを選択している場合にのみ適用されます。

/*ライトモード用css*/
body {
    background-color: #fff;
    color: black;
}

/*ダークモード用css*/
@media (prefers-color-scheme: dark) {
    body {
        background-color: rgb(17, 24, 39);
        color: white;
    }
}

この設定では、背景色を深い青色、文字色を白に設定しています。

---

これらのCSSを適用することで、ユーザーのシステム設定に応じてウェブサイトの色が自動的に切り替わります。ユーザーは自分の視覚的な好みやニーズに合わせて、最適な体験を得られます。

ただし、この方法はユーザーのシステム設定に依存します。ウェブサイト内でユーザーが明示的に配色を切り替えられる機能を提供する場合は、JavaScriptなどを使用して制御する必要があります。