如何使用 TailwindCSS 实现动态主题切换功能-JavaScript中文网-JavaScript教程资源分享门户

前言

动态主题切换是现在很多网站和应用程序的常见需求。例如，在夜间模式下，背景将变为深色，文本颜色也会相应地更改，以便用户更好地浏览网页或应用程序。在前端开发中，我们可以使用 CSS 和 JavaScript 来实现这种功能。但是如果你使用 TailwindCSS，可以轻松实现这种功能，而无需编写繁琐的 CSS 代码。

在这篇文章中，我们将学习如何使用 TailwindCSS 实现动态主题切换功能，以及如何为你的网站或应用程序提供一个更好的用户体验。

准备工作

在开始编写代码之前，我们需要安装 TailwindCSS。如果你还没有安装它，可以在终端中运行以下命令：

npm install tailwindcss

然后，我们还需要一个基本的 HTML 结构和 TailwindCSS 的配置文件。你可以使用以下代码作为一个简单的示例：

-- -------------------- ---- -------
--------- -----
------
  ------
    -----------------------
    ----- ---------------- ----------------------------------------------------------------------
  -------
  ------
    ---- ----------- ------------ -------------- ----------
      --- --------------- --------- ------------- ----------------------------------
    ------
  -------
-------

存储此文件，并将其称为 index.html。然后，从命令行中调用以下命令，以便在浏览器中查看我们的示例：

npx http-server

实现动态主题切换

添加 CSS 变量

首先，我们需要添加一些 CSS 变量，以便在我们的 HTML 元素中引用它们。这些变量可以存储我们的主要和备用颜色。

:root {
  --primary-color: #4299e1;
  --primary-color-dark: #2c5282;
  --secondary-color: #edf2f7;
  --secondary-color-dark: #1a202c;
}

在这个示例中，我们定义了两个主题颜色：蓝色和蓝色的深色阴影。我们还定义了两个支持颜色：灰色和深色的灰色。

添加 dark 类

接下来，我们需要添加一些样式，以便在我们的 HTML 元素中引用它们。这些样式将为我们的动态主题切换功能提供支持。

.dark {
  --bg-color: var(--secondary-color-dark);
  --text-color: var(--secondary-color);
}

在这个示例中，我们定义了一个名为 dark 的新类，它将使用我们之前定义的变量来更改背景和文本颜色。

添加切换按钮

然后，我们需要添加一个切换按钮，使用户能够在不同的主题之间切换。这可以通过以下代码实现：

<button id="theme-toggle" class="fixed top-0 right-0 p-4 m-4 bg-white text-gray-800 dark:text-white dark:bg-gray-800 rounded-full shadow-md focus:outline-none">
  <svg class="w-6 h-6" viewBox="0 0 24 24" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
    <path d="M4 12C4 8.68629 5.79086 5.83427 8.47214 4.86055C10.4976 4.18445 12.8329 4.63102 14.3361 6.13415C15.8392 7.63728 16.2858 9.97249 15.6097 11.998C14.636 14.6793 11.7839 16.4702 8.47014 16.4702C7.43868 16.4702 6.43387 16.3045 5.5 15.9828C5.77605 14.3232 6.48696 12.8226 7.49749 11.6131C8.50802 10.4036 9.76743 9.52501 11.1556 9.08488C12.5438 8.64475 14.0067 8.66706 15.391 9.1499C15.9155 8.19221 16.1745 7.10166 16.1362 6.00205C16.0979 4.90243 15.7624 3.83552 15.1978 2.94042C14.6332 2.04532 13.8717 1.36505 13.0151 1.00018C12.1584 0.635305 11.2318 0.597335 10.3323 0.891007C9.43292 1.18468 8.59218 1.801 7.88289 2.66648C7.17361 3.53195 6.62459 4.6228 6.28544 5.81819C5.9463 7.01359 5.8253 8.2842 5.93136 9.54513C5.03773 9.26231 4.17113 9.3763 3.38227 9.86751C2.59341 10.3587 1.92003 11.2041 1.44721 12.2637C0.974394 13.3233 0.717014 14.5479 0.707107 15.7852C0.697201 17.0226 0.935178 18.2519 1.40632 19.3784C1.87747 20.505 2.56791 21.4812 3.42282 22.2373C4.27773 22.9933 5.2715 23.5029 6.33312 23.6977C7.39473 23.8925 8.48967 23.7609 9.49489 23.3182C10.5001 22.8756 11.3728 22.1459 12.0124 21.2343C12.6521 20.3227 13.0298 19.2717 13.1004 18.1883H4V12Z"/>
  </svg>
</button>

此按钮将切换我们的主题。我们在 HTML 中添加此按钮时，我们还可以使用基础样式和当前主题来设置按钮的样式。

切换主题

最后，我们需要从 JavaScript 中提供一些功能，以便允许用户在不同的主题之间切换。这将实现如下：

const toggleButton = document.getElementById('theme-toggle')
const html = document.documentElement

toggleButton.addEventListener('click', () => {
  html.classList.toggle('dark')
})

在这段简短的代码中，我们获取到切换主题按钮和 HTML 根元素。我们为按钮设置了一个 click 事件监听器，使得每次点击它时可以切换一个名为 dark 的 CSS 类。我们添加了这个类，以切换到我们在上面定义的第二个主题。

总结

使用 TailwindCSS 实现动态主题切换功能非常简单。为了实现这个功能，我们只需要添加一些 CSS 变量和支持类，以及一些基本的 HTML 和 JavaScript。

虽然这个示例非常简单，但是你可以扩展其功能来处理更多的主题颜色，或添加其他视觉效果，以便为你的网站或应用程序提供更好的用户体验。

来源：JavaScript中文网，转载请注明来源 https://www.javascriptcn.com/post/648aa44948841e98948c0060