带有 Tailwind CSS 和 CSS 变量的深色模式和夜间模式-css教程-PHP中文网

带有 Tailwind CSS 和 CSS 变量的深色模式和夜间模式

Mary-Kate Olsen

发布： 2024-12-29 21:02:11

原创

428 人浏览过

Dark Mode and Night Mode with Tailwind CSS and CSS Variables

深色模式和夜间模式是现代网站的必备功能。它们提高了可访问性，并让用户可以灵活地选择自己喜欢的外观。让我们深入了解如何使用 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 变量来添加新主题。
Clean Separation：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);
});

登录后复制

深色模式和夜间模式的额外提示