CSSとHTML5でダークモードを実装する方法は？-H5 チュートリアル-php.cn

CSSとHTML5でダークモードを実装する方法は？

Emily Anne Brown

リリース： 2025-03-10 17:12:16

オリジナル

679 人が閲覧しました

CSSおよびHTML5でダークモードを実装する方法CSSおよびHTML5を使用してダークモードの実装は比較的簡単です。 Core Conceptは、CSSを使用して、Webサイトの2つの異なるモード、Light and Darkのスタイルを中心に展開します。これは通常、JavaScript（または他のクライアント側のスクリプト）を介して切り替えられたCSSクラスまたは変数を使用して達成されます。

まず、2つの異なるスタイルシート、または1つのスタイルシート内で2つのスタイルを作成する必要があります。ライトモードのスタイルは、デフォルトスタイルになります。ダークモードのスタイルは、低光環境で読みやすさを改善するために、色、背景、および潜在的にテキストのコントラストを反転または調整します。たとえば、

ユーザーがダークモードの好みを切り替えるときにjavaScriptを使用して

要素に「ダークモード」というクラスを追加します。これにより、ダークモードのスタイルが適用されます。より洗練された制御と保守性のために、CSS変数（カスタムプロパティ）を使用することもできます。これについては、次のセクションで詳しく説明します。

/* Light Mode Styles */
body {
  background-color: #ffffff;
  color: #333333;
}

/* Dark Mode Styles */
.dark-mode body {
  background-color: #121212;
  color: #ffffff;
}

.dark-mode h1 {
    color: #f0f0f0; /* Example: adjust heading color in dark mode */
}

ログイン後にコピー

ユーザーの好みに基づいてダークモードをアクティブにするには、「ダークモード」クラスを追加または削除するために、簡単なトグルボタンとJavaScriptを追加する必要があります。これは、次のように簡単になる可能性があります。

<body>

これは、ID

にトグルスイッチがあることを前提としています。このJavaScriptコードをHTMLファイル内に

>タグに含めることを忘れないでください。

const toggleSwitch = document.getElementById('darkModeToggle');
const body = document.body;

toggleSwitch.addEventListener('change', function() {
  body.classList.toggle('dark-mode');
});

ログイン後にコピー

効果的なダークモードを作成するために重要なCSSプロパティは重要ですか？これらの特性により、視覚的な外観を制御し、低光条件で読みやすさを確保できます。重要なプロパティには次のものがあります

background-color：：背景色を明るい色から暗いもの（例えば、白から黒への灰色へ）の変更は基本的です。など（CSS変数）：CSS変数を使用すると、一元化された色管理が可能になり、サイト全体で1回の変更で簡単に更新できます。これは、保守性のために強くお勧めします。
color：
--color-primary --color-secondary：

例：border-colorjavaScriptは、

>要素のクラスを単純に切り替えて、CSS変数の値とテーマ全体を変更します。このアプローチにより、スタイルの維持と更新が容易になり、明るいモードとダークモードの間の矛盾が防止されます。これを拡張して、CSS変数を使用してすべての色とスタイルを管理できます。box-shadowCSSとHTML5を使用してダークモードを実装するときにアクセシビリティの考慮事項はありますか？最も重要な考慮事項は、

コントラスト

です。明るいモードと暗いモードの両方で、テキストと背景色の間の十分なコントラストを確保します。少なくとも4.5：1のコントラスト比は、通常のテキストでは一般的に推奨され、より大きなテキストサイズではさらに高くなります。コントラストチェッカーツールを使用して、アクセシビリティガイドライン（WCAG）を満たす色の組み合わせを確認してください。

その他のアクセシビリティの考慮事項には、次のものがあります。