数分でウェブサイトをダークモードに対応-CSSチュートリアル-php.cn

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

Linda Hamilton

リリース： 2024-12-27 14:09:10

オリジナル

772 人が閲覧しました

Make Your Website Dark Mode Ready in Minutes

ユーザーの 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;
  }
}

ログイン後にコピー

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