スムーズなダーク/ライト モード変換を行う方法

さて、あなたは Web サイトを閲覧しており、ダーク モードになっています。 しかし、あなたはライトモードを好みます（そうするなら、それはあなたの特権ですか？）。午前3時です。ダーク/ライト モードの切り替えをクリックします。 突然、閃光が！ 一時的に失明し、続いて耳鳴りと発作が起こります。 あとで救急外来に行くと、お金がかかるし（米国の医療制度に感謝！）、何千ドルもかかってしまいます。

それは少し誇張でしたが、耳障りなテーマの切り替えは間違いなく迷惑です。 直しましょう！ 最先端の CSS (最先端ではないかもしれませんが、その) を使用すると、スムーズな移行を実装できます。 コードと説明を提供します。

まず、テーマスイッチャーが必要です。 まだお持ちでない場合は、このリンク で手順を確認してください。 このメソッドは、CSS 変数 (--color: blue;) および同様のアプローチと互換性があります。

コードは次のとおりです:

* {
  transition-duration: 1s;
}

1s (1 秒) を好みのトランジション速度に調整します。

アスタリスク (*) はユニバーサル セレクターであり、ページ上の すべての要素 が影響を受けます。 transition-duration を設定すると、要素のプロパティが変更されるたびにスムーズな遷移を適用するようにブラウザーに指示します。 シンプル！

読んでいただきありがとうございます!

アンドリュー・マクシリワン

以上がスムーズなダーク/ライト モード変換を行う方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。