Tailwind CSS と CSS 変数を使用したダーク モードとナイト モード

ダーク モードとナイト モードは、最新の Web サイトには必須です。アクセシビリティが向上し、ユーザーが好みの外観を柔軟に選択できるようになります。 Tailwind CSS と CSS 変数を使用してこの機能を構築する方法を詳しく見てみましょう。

Tailwind CSS と CSS 変数がうまく機能する理由

• CSS 変数: さまざまなテーマの色の管理を簡素化します。
• 親クラス: 単一の親クラスを切り替えることでテーマを切り替えます。
• JavaScript の統合: 最小限の機能でテーマを動的に更新します 努力。

CSS変数を使用したテーマカラーの設定

テーマの色を定義することから始めます。これらの CSS 変数は、テーマの切り替えを簡単にするために親クラス内にあります。

/* Light Theme (Default) */
:root {
  --bg-color: #ffffff;
  --text-color: #000000;
}

/* Dark Theme */
.theme-dark {
  --bg-color: #000000;
  --text-color: #ffffff;
}

/* Solarized Theme */
.theme-solarized {
  --bg-color: #002b36;
  --text-color: #839496;
}

Tailwind クラスでの CSS 変数の使用

Tailwind を使用すると、スタイル設定に CSS 変数を簡単に使用できます。

<div>



<h2>
  
  
  Adding JavaScript for Dynamic Theme Switching
</h2>

<p>Here’s the JavaScript to handle theme changes dynamically:<br>
</p>

<pre class="brush:php;toolbar:false">const themeSelect = document.getElementById("theme-select");
const rootElement = document.documentElement;

// Listen for dropdown changes
themeSelect.addEventListener("change", (event) => {
  const selectedTheme = event.target.value;

  // Remove all theme classes
  rootElement.classList.remove("theme-light", "theme-dark", "theme-solarized");

  // Add the selected theme class
  rootElement.classList.add(selectedTheme);
});

// Set default theme on load
window.addEventListener("DOMContentLoaded", () => {
  rootElement.classList.add("theme-light");
});

リアルタイムのテーマ切り替え動作

ユーザーがドロップダウンからテーマを選択すると、背景とテキストの色が即座に変わります。この動的なアップデートにより、エクスペリエンスがシームレスでインタラクティブなものになります。

このアプローチが素晴らしい理由

• スケーラビリティ: 追加の CSS 変数を定義して、新しいテーマを追加します。
• 明確な分離: CSS がテーマを処理します。 JavaScript はロジックを管理します。
• パフォーマンス: CSS 変数により、更新がスムーズかつ効率的になります。

LocalStorage を使用してテーマ設定を保存する

選択したテーマを保存してセッションをまたいで保持することで、ワンランク上のテーマを実現できます。

// Save the theme
themeSelect.addEventListener("change", (event) => {
  const selectedTheme = event.target.value;
  rootElement.classList.remove("theme-light", "theme-dark", "theme-solarized");
  rootElement.classList.add(selectedTheme);
  localStorage.setItem("theme", selectedTheme);
});

// Load the saved theme
window.addEventListener("DOMContentLoaded", () => {
  const savedTheme = localStorage.getItem("theme") || "theme-light";
  rootElement.classList.add(savedTheme);
});

ダークモードとナイトモードに関する追加のヒント

• その他のテーマ: ハイコントラストまたはカスタムのユーザー定義テーマを追加します。
• トランジション: 背景とテキストの色を滑らかに変更するには、CSS トランジションを使用します。
• アクセシビリティ: テーマ スイッチャーがキーボードやスクリーン リーダーで適切に動作することを確認してください。

Tailwind CSS と CSS 変数を使用すると、動的なダーク モードやナイト モードを簡単かつ効率的に作成できます。試してみて、Web サイトのユーザー エクスペリエンスがどのように変化するかを確認してください!

以上がTailwind CSS と CSS 変数を使用したダーク モードとナイト モードの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。