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配列メソッドの詳細な説明

推薦する

HTML のテキストエリア タグ

<textarea></textarea> は、複数行を入力できるテキスト ...

Vueフィルターとカスタム命令の使用

目次フィルター01.とは02. やり方(1)フィルターを定義する(2)使用方法(3)フィルタパラメー...

js でショッピングモールのシミュレーションを実現

HTML、CSS、JSフロントエンドを学習中の皆さん、今回はショッピングモールの事例の実装をシェアし...

Dockerはプライベートライブラリイメージを完全に削除します

まず、インターネット上の一般的な慣行を見てみましょうデフォルトでは、プライベート ライブラリはイメー...

Mysqlの同時パラメータ調整の詳細な説明

目次クエリキャッシュの最適化概要クエリプロセスクエリキャッシュ構成クエリキャッシュの無効化メモリ管理...

通知メッセージカルーセルを実装するための CSS3 トランジション

Vueバージョンをファイルにコピーして使用します <テンプレート> <!-- カル...

bitronix を使用して MySQL に接続するときの MySQLSyntaxErrorException の解決方法

bitronix を使用して MySQL に接続するときの MySQLSyntaxErrorExce...

Vueはタブを切り替えてデータの状態を維持する3つの方法を実装します

Vue でタブ切り替えを実装する 3 つの方法1. v-showはコンテンツの切り替えを制御します1...

MySQLトランザクションの特徴と分離レベルについてお話ししましょう

インターネットにはすでにこの種の記事が溢れていますが、私がこれをまだ書いている理由は単純です。それは...

vue+node+socket ioは複数人のインタラクションを実現し、プロセス全体を解放します

1. 背景1. フロントエンドはvue + vuex + socket.io-clientを使用しま...

URLエスケープエンコーディングの特殊文字に基づいて

目次URL 内の特殊文字URL 特殊文字エスケープ、URL 内の一部の文字には特別な意味があり、基本...

Ubuntu 18.04 で apt-get ソースを変更する方法

apt-get を使用してインストールすると、非常に遅くなります。国内のソースを変更すると、この問題...

QQtabBar による CSS 命名仕様 BEM の詳細な紹介

QQtabBar の BEMまず、BEMとはどういう意味でしょうか? BEM は、ブロック、要素、修...

イメージのパッケージ化とワンクリック展開を実現するためにDockerを組み合わせたアイデア

1. サーバーにDockerをインストールする yumでdockerをインストール設定ファイルを変更...

MySQL の一般的な問題とアプリケーション スキルの概要

序文MySQL の日常的な開発やメンテナンスでは、パスワードの紛失やテーブルの破損など、避けられない...