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

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

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

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

CSS ダークモード

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

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

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

p {
  色: 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 をよろしくお願いいたします。

<<:  html-cssタグのスタイル設定が機能しない2つの理由

>>:  JS配列メソッドの詳細な説明

推薦する

Linux システムで Java 環境変数を設定する方法

Java環境変数を設定するここで、環境変数は etc/profile に設定され、つまり、すべてのユ...

MySQLでビューを作成する方法

基本的な構文CREATE VIEW ステートメントを使用してビューを作成できます。構文の形式は次のと...

Dockerはクロスプラットフォーム機能を実現するためにnet5プログラムを導入

展開環境: ここでは docker コンテナ、Linux システム、VmWare 仮想マシンが使用さ...

JavaScript PromiseとAsync/Awaitの詳細な説明

目次概要4つの例例1: 誕生日で説明する約束の基本例2: 数字当てゲーム例3: Web APIから国...

Nginx は高可用性クラスタ構築を実装します (Keepalived+Haproxy+Nginx)

1. コンポーネントと実装機能Keepalived: Haproxy サービスの高可用性を実現し、...

DockerはMysql、.Net6、Sqlserverなどのコンテナをデプロイします

目次CentOS 8にDockerをインストールする1. yumを更新する2. containerd...

Visual Studio Codeを使用してMySqlデータベースに接続し、クエリを実行します。

Visual Studio Code は、Microsoft が開発した強力なテキスト エディター...

Windows で MySQL マスター スレーブ レプリケーションを構成する方法

MySQL マスター/スレーブ レプリケーションを使用すると、1 つのデータベース (マスター デー...

binlog2sql と簡単なバックアップおよびリカバリを使用して mysql8.0.20 を構成するための詳細な手順

目次最初のステップのインストールステップ2: MySQLデータを準備する3 番目のステップは、bin...

Hadoop 3.2.0 クラスターの構築に関する一般的な考慮事項

1つのポートの変更バージョン 3.2.0 では、ネームノード ページ ポートは 9870、データノー...

nginx+php実行リクエストの動作原理の詳細な説明

PHPの仕組みまず、よく耳にするcgi、php-cgi、fastcgi、php-fpmの関係を理解し...

Docker データボリュームの一般的な操作コードの例

開発者が Dockerfile を使用してイメージをビルドする場合は、イメージをビルドするときにデー...

MySQL の時間設定に関する考慮事項の詳細な要約

時間は本当に存在するのでしょうか?時間は人間が考え出した概念に過ぎず、物事の変化を測る基準に過ぎない...

Windows での MySQL のダウンロード、インストール、設定、使用に関するチュートリアル

MySQLの概要MySQL はリレーショナル データベース管理システムです。データベースは構造化され...

CSS 複合セレクタの具体的な使用法

交差点セレクター交差セレクターは、直接接続された 2 つのセレクターで構成されます。最初のセレクター...