深色模式和夜間模式是現(xiàn)代網(wǎng)站的必備功能。它們提高了可訪問性，并讓用戶可以靈活地選擇自己喜歡的外觀。讓我們深入了解如何使用 Tailwind CSS 和 CSS 變量構(gòu)建此功能。

為什么 Tailwind CSS 和 CSS 變量工作得這么好

• CSS 變量：簡(jiǎn)化管理不同主題的顏色。
• 父類：通過切換單個(gè)父類來(lái)切換主題。
• JavaScript集成：用最少的時(shí)間動(dòng)態(tài)更新主題 努力。

使用 CSS 變量設(shè)置主題顏色

首先定義主題的顏色。這些 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 變量進(jìn)行樣式設(shè)置。

<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");
});

實(shí)時(shí)主題切換

當(dāng)用戶從下拉列表中選擇主題時(shí)，背景和文本顏色會(huì)立即更改。這種動(dòng)態(tài)更新使體驗(yàn)變得無(wú)縫和互動(dòng)。

為什么這種方法很棒

• 可擴(kuò)展性：通過定義額外的 CSS 變量來(lái)添加新主題。
• Clean Separation：CSS 處理主題； JavaScript 管理邏輯。
• 性能：CSS 變量使更新流暢高效。

使用 LocalStorage 保存主題首選項(xiàng)

通過保存所選主題使其更上一層樓，以便它在會(huì)話中持續(xù)存在。

// 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);
});

深色模式和夜間模式的額外提示

• 更多主題：添加高對(duì)比度或自定義用戶定義主題。
• 過渡：使用 CSS 過渡實(shí)現(xiàn)平滑的背景和文本顏色變化。
• 輔助功能：確保您的主題切換器與鍵盤和屏幕閱讀器配合良好。

使用 Tailwind CSS 和 CSS 變量，創(chuàng)建動(dòng)態(tài)深色模式或夜間模式既簡(jiǎn)單又高效。嘗試一下，看看它如何改變您網(wǎng)站的用戶體驗(yàn)！

以上是帶有 Tailwind CSS 和 CSS 變量的深色模式和夜間模式的詳細(xì)內(nèi)容。更多信息請(qǐng)關(guān)注PHP中文網(wǎng)其他相關(guān)文章！