暗黑模式和夜间模式是现代网站的必备功能。它们提高了可访问性，并让用户可以灵活地选择自己喜欢的外观。让我们深入了解如何使用 Tailwind CSS 和 CSS 变量构建此功能。

为什么 Tailwind CSS 和 CSS 变量效果如此好

使用 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 变量进行样式设置。

  
Dark Mode Demo
  
    Click Me
  
  
    Light Theme
    Dark Theme
    Solarized Theme
  

添加 JavaScript 以实现动态主题切换

以下是动态处理主题变化的 JavaScript：

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

**实时主题切换**

当用户从下拉菜单中选择一个主题时，背景和文本颜色会立即改变。这种动态更新使体验变得无缝且具有交互性。

**为什么这种方法很棒**

使用 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);
});

**暗黑模式和夜间模式的额外提示**

使用 Tailwind CSS 和 CSS 变量，创建动态暗模式或夜间模式既简单又高效。尝试一下，看看它如何改变您网站的用户体验！