CSS: 簡単なダークモード

ダーク モードは、Web サイトまたはアプリケーションのカラー テーマを明るい背景 (暗いテキスト) から暗い背景 (明るいテキスト) に切り替える表示オプションです。このモードは、暗い環境での目の疲れを軽減し、OLED スクリーンを搭載したデバイスのエネルギーを節約し、従来の光テーマに代わる視覚的に魅力的な代替手段を提供するというメリットで人気が高まっています。
通常、ダーク、ライト、システム テーマ設定の 3 つのモードを切り替えることができます。

古いやり方

これまでは、CSS メディア機能 [prefers-color-scheme] を使用してきました。

prefers-color-scheme CSS メディア機能は、ユーザーが明るい色のテーマを要求したか、暗い色のテーマを要求したかを検出するために使用されます。ユーザーは、オペレーティング システムの設定 (ライト モードまたはダーク モードなど) またはユーザー エージェントの設定を通じて好みを示します。

@media (prefers-color-scheme: dark) {
  .post {
    background: #753;
    color: #dcb;
  }
}

@media (prefers-color-scheme: light) {
  .post {
    background: #bcd;
    color: #334;
  }
}

ご覧のとおり、各モードに 1 つずつ、合計 2 つのテーマを維持する必要があります。
大規模なアプリケーションでこのアプローチを採用するのは難しい場合があります。

新しくてより良い方法

幸いなことに、CSS は私たちの作業を容易にする新しいプロパティ light-dark() を導入しており、すべての主要なブラウザでサポートされています。

CSS 関数の light-dark() を使用すると、プロパティに 2 つの色を設定できます。開発者が明るい配色または暗い配色を設定したか、ユーザーが明るいテーマまたは暗いテーマを要求したかを検出して、2 つの色のオプションのいずれかを返します。テーマの色を、prefers-color-scheme メディア機能クエリ内に含める必要はありません。

:root {
  color-scheme: light dark;
}

body {
  color: light-dark(#292524, #f5f5f4);
  background-color: light-dark(#f5f5f4, #292524);
}

モードを切り替えたい各要素で light-dark() プロパティを使用するだけです。

以上がCSS: 簡単なダークモードの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。