数分でウェブサイトをダークモードに対応

ユーザーの 80% 以上がアプリでダーク モードを望んでおり、Web アプリケーションにダーク モードを実装するには今が最適な時期です...

しかし、心配しないでください。CSS を書き直したり、さまざまな難しい学習プロセスを経たりするために多くのことを行う必要はありません。

15 分以内 (はい、本当にそうです) でサイトにダーク モード サポートを組み込む方法を共有します。

このチュートリアルが終わるまでに、システムを認識し、ユーザーに好印象を与えることができるエレガントなダーク モードを作成できるはずです。

システムレベルのダークモードについて

近年のダーク モードで非常に印象的なのは、複雑なテーマ スイッチャーを最初から作成する必要がないことです。

最新の OS はすでにユーザーのニーズに対応しており、ブラウザは CSS を使用してこれを簡単に実現します。

ここでの魔法は、prefers-color-scheme と呼ばれるメディア クエリを通じて発生します。次のようになります:

@media (prefers-color-scheme: dark) {

  /* Your dark mode styles go here */

}

ユーザーがシステム上で恐ろしいダーク モード スイッチを有効にすると、デフォルトでこのメディア クエリが有効になります。

これにより、ユーザーの好みに応じて Web サイトのスタイルを自動的に調整できます。

良いことに、最新のブラウザのほとんどはこれをそのままサポートしているということです。 Chrome、Firefox、Safari、Edge について話しています – これらはすべて搭載されています...

これは、追加の JavaScript や複雑なロジックを使用せずにシステムレベルの設定を利用できることを意味します。

楽しい部分に移りましょう – これを実際にコードに実装してみましょう。

迅速な実装方法

早速本題に入りましょう。最初に行う必要があるのは、CSS でカラー変数を設定することです。その方法は次のとおりです:

/* In your root CSS file */
:root {
  /* Light mode colors (default) */
  --background: #ffffff;
  --text: #333333;
  --surface: #f5f5f5;
  --accent: #0066cc;
}

@media (prefers-color-scheme: dark) {
  :root {
    /* Dark mode colors */
    --background: #1a1a1a;
    --text: #ffffff;
    --surface: #2d2d2d;
    --accent: #66b3ff;
  }
}

ここで、色をハードコーディングする代わりに、これらの変数を使用します。このように:

body {
  background-color: var(--background);
  color: var(--text);
}

.card {
  background-color: var(--surface);
}

.button {
  background-color: var(--accent);
}

文字通りそれだけです! Web サイトは、ユーザーのシステム設定に基づいて、ライト モードとダーク モードの間で自動的に切り替わります。 JavaScript も面倒なロジックも不要 – クリーンでシンプルな CSS。

簡単なヒント: 基本的な色から始めて、ブランドに応じて調整してください。最初はあまり心配しないでください。後でいつでも戻ってきて調整できます。

高度なタッチ

上記のコードを使用すると、Web サイトは完璧に機能するはずですが、ダーク モードの実装を本当にプロフェッショナルなものにするために、さらに磨きをかけましょう。

これらの調整にはほんの数分しかかかりませんが、大きな違いが生じます:

まず、モードの切り替えが不快にならないように、スムーズなトランジションを追加します。

:root {
  --background: #ffffff;
  --text: #333333;
  /* Add this line */
  transition: background-color 0.3s ease, color 0.3s ease;
}

画像、特にロゴの場合、次のメディア クエリを追加してエレガントに処理します。

@media (prefers-color-scheme: dark) {
  img {
    /* Slightly dim non-essential images */
    opacity: 0.8;
  }

  /* But keep logos crisp */
  .logo {
    opacity: 1;
    filter: brightness(1.2);
  }
}

テーマ切り替えボタンの追加

システム設定を上書きしたいユーザーのために、手動テーマスイッチャーを追加しましょう。

完全な実装は次のとおりです:

まず、トグル ボタンに次の HTML を追加します。

@media (prefers-color-scheme: dark) {

  /* Your dark mode styles go here */

}

そして、これがすべて機能する JavaScript です:

/* In your root CSS file */
:root {
  /* Light mode colors (default) */
  --background: #ffffff;
  --text: #333333;
  --surface: #f5f5f5;
  --accent: #0066cc;
}

@media (prefers-color-scheme: dark) {
  :root {
    /* Dark mode colors */
    --background: #1a1a1a;
    --text: #ffffff;
    --surface: #2d2d2d;
    --accent: #66b3ff;
  }
}

このコードは、次の切り替え可能なボタンを提供します。

• デフォルトでユーザーのシステム設定を尊重します
• 手動設定をローカルストレージに保存します
• ページをリロードしても保持されます
• 現在のテーマに基づいて太陽/月のアイコンを表示します
• モード間のスムーズな移行

プロのヒント: アイコンは自由にカスタマイズできます。SVG を使用したり、より精巧なスイッチ デザインを作成したりすることもできます。現在のテーマが何であるかが明らかであることを確認してください!

結論

それでは、どうぞ — あなたのサイトには、専門的に作成された完全に機能するダーク モード機能が追加されました。

システム対応のテーマ、スムーズなアニメーション、正しい画像レンダリング、さらには優れたトグル ボタンも備えています。

初日にすべてを完璧にする必要はありません。覚えておいてください。

裸の実装を実行し、プッシュし、ユーザーがサイトを使用するにつれて変更を加えます。

ユーザーは、完全に機能していない場合でも、ダーク モードを喜んで受け取るでしょう。

以上が数分でウェブサイトをダークモードに対応の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。