CSS変数を使用してダークモードを実装するためのサンプルコード

最近、WeChatはAppleによってダークモードの開発を強制されました。ますます多くのウェブサイトやアプリケーションがダークモードをサポートし始めています。ウェブサイトにダークモードを選択する人も多くいます。この見た目を好むのかもしれませんし、目の疲れを防ぎたいのかもしれません。 この投稿では、訪問者のテーマに基づいて変化する自動 CSS ダーク モードを実装する方法を説明します。

私は自分のブログページMy Shop [1]でCSS變量と@media查詢を使用してダークモードを実装してみました。

CSS ダークモード

テーマの色を設定するための変数を定義しました。プロセスがはるかに簡単になるので、同じことをすることをお勧めします。デフォルトのカラー変数は次のとおりです。

：根 {
  --アクセント: #226997;
  --メイン: #333;
  --ライト: #666;
  --ライター: #f3f3f3;
  --境界線: #e6e6e6;
  --bg:#ffffff;
}

これらの変数をスタイルシートで使用する場合は、次のようにします。

ｐ {
  色: var(--main);
}

この方法では、テーマの色を変更したい場合は、定義された変数を変更するだけで、その変数を使用するすべてのものが更新されます。

ここで、CSS ダーク モードを呼び出すときに使用する新しい変数のセットを定義する必要があります。

/* ダークモードの色を定義します */
：根 {
  --アクセント: #3493d1;
  --メイン: #f3f3f3;
  --light: #ececec;
  --ライター: #666;
  --境界線: #e6e6e6;
  --bg: #333333;
}

ダークサポートを追加

これで 2 セットの変数が定義されたので、残っているのはpreferences -color-schemeメディア クエリをdark変数に追加することだけです。

Dark カラー変数を取得し、次の@media 查詢を追加します。

/* ダークモードの色を定義します */
@media (優先カラースキーム: 暗い) {
  ：根 {
    --アクセント: #3493d1;
    --メイン: #f3f3f3;
    --light: #ececec;
    --ライター: #666;
    --境界線: #e6e6e6;
    --bg: #333333;
  }
}

それでおしまい！ダーク OS テーマを使用しているユーザーが Web サイトにアクセスすると、Web サイトは自動的にダーク モードに切り替わります。

この変更が機能するかどうかをテストしたいと思うでしょう。これを行うには、iOS ダーク テーマなど、オペレーティング システムでダーク テーマを有効にするだけです。

あるいは、OS のテーマ設定に時間を無駄にしたくない場合は、Firefox でこのテストを強制することもできます。方法は次のとおりです。

Firefox を開き、アドレスバーにabout:configと入力して Enter キーを押します。

リスクを負って、それを受け入れるよう求められます。

検索バーで、 ui.systemUsesDarkThemeを検索します。 チェックボックスをnumberに変更し、 +記号をクリックします。 値を1に変更し、チェックボタンをクリックします。

ページは黒くなるはずです。

ウェブサイトに戻ると、テーマが自動的にダーク モードに更新されているはずです。

元に戻るかどうかをテストしたい場合は、値を0に変更します。

テストが終了したら、ゴミ箱をクリックしてオプションを削除します。

CSS 変数を使用してダーク モードを実装するサンプル コードに関するこの記事はこれで終了です。CSS ダーク モードに関するより関連性の高いコンテンツについては、123WORDPRESS.COM の過去の記事を検索するか、以下の関連記事を引き続き参照してください。今後とも 123WORDPRESS.COM をよろしくお願いいたします。