最近、WeChatはAppleによってダークモードの開発を強制されました。ますます多くのウェブサイトやアプリケーションがダークモードをサポートし始めています。ウェブサイトにダークモードを選択する人も多くいます。この見た目を好むのかもしれませんし、目の疲れを防ぎたいのかもしれません。 この投稿では、訪問者のテーマに基づいて変化する自動 CSS ダーク モードを実装する方法を説明します。 私は自分のブログページMy Shop [1]で CSS ダークモード テーマの色を設定するための変数を定義しました。プロセスがはるかに簡単になるので、同じことをすることをお勧めします。デフォルトのカラー変数は次のとおりです。 :根 { --アクセント: #226997; --メイン: #333; --ライト: #666; --ライター: #f3f3f3; --境界線: #e6e6e6; --bg:#ffffff; } これらの変数をスタイルシートで使用する場合は、次のようにします。 p { 色: var(--main); } この方法では、テーマの色を変更したい場合は、定義された変数を変更するだけで、その変数を使用するすべてのものが更新されます。 ここで、CSS ダーク モードを呼び出すときに使用する新しい変数のセットを定義する必要があります。 /* ダークモードの色を定義します */ :根 { --アクセント: #3493d1; --メイン: #f3f3f3; --light: #ececec; --ライター: #666; --境界線: #e6e6e6; --bg: #333333; } ダークサポートを追加 これで 2 セットの変数が定義されたので、残っているのは Dark カラー変数を取得し、次の /* ダークモードの色を定義します */ @media (優先カラースキーム: 暗い) { :根 { --アクセント: #3493d1; --メイン: #f3f3f3; --light: #ececec; --ライター: #666; --境界線: #e6e6e6; --bg: #333333; } } それでおしまい!ダーク OS テーマを使用しているユーザーが Web サイトにアクセスすると、Web サイトは自動的にダーク モードに切り替わります。 この変更が機能するかどうかをテストしたいと思うでしょう。これを行うには、iOS ダーク テーマなど、オペレーティング システムでダーク テーマを有効にするだけです。 あるいは、OS のテーマ設定に時間を無駄にしたくない場合は、Firefox でこのテストを強制することもできます。方法は次のとおりです。 Firefox を開き、アドレスバーに リスクを負って、それを受け入れるよう求められます。 検索バーで、 ページは黒くなるはずです。 ウェブサイトに戻ると、テーマが自動的にダーク モードに更新されているはずです。 元に戻るかどうかをテストしたい場合は、値を テストが終了したら、ゴミ箱をクリックしてオプションを削除します。 CSS 変数を使用してダーク モードを実装するサンプル コードに関するこの記事はこれで終了です。CSS ダーク モードに関するより関連性の高いコンテンツについては、123WORDPRESS.COM の過去の記事を検索するか、以下の関連記事を引き続き参照してください。今後とも 123WORDPRESS.COM をよろしくお願いいたします。 |
<<: html-cssタグのスタイル設定が機能しない2つの理由
<textarea></textarea> は、複数行を入力できるテキスト ...
目次フィルター01.とは02. やり方(1)フィルターを定義する(2)使用方法(3)フィルタパラメー...
HTML、CSS、JSフロントエンドを学習中の皆さん、今回はショッピングモールの事例の実装をシェアし...
まず、インターネット上の一般的な慣行を見てみましょうデフォルトでは、プライベート ライブラリはイメー...
目次クエリキャッシュの最適化概要クエリプロセスクエリキャッシュ構成クエリキャッシュの無効化メモリ管理...
Vueバージョンをファイルにコピーして使用します <テンプレート> <!-- カル...
bitronix を使用して MySQL に接続するときの MySQLSyntaxErrorExce...
Vue でタブ切り替えを実装する 3 つの方法1. v-showはコンテンツの切り替えを制御します1...
インターネットにはすでにこの種の記事が溢れていますが、私がこれをまだ書いている理由は単純です。それは...
1. 背景1. フロントエンドはvue + vuex + socket.io-clientを使用しま...
目次URL 内の特殊文字URL 特殊文字エスケープ、URL 内の一部の文字には特別な意味があり、基本...
apt-get を使用してインストールすると、非常に遅くなります。国内のソースを変更すると、この問題...
QQtabBar の BEMまず、BEMとはどういう意味でしょうか? BEM は、ブロック、要素、修...
1. サーバーにDockerをインストールする yumでdockerをインストール設定ファイルを変更...
序文MySQL の日常的な開発やメンテナンスでは、パスワードの紛失やテーブルの破損など、避けられない...