深色模式开始成为一种必需品，而不再像以前那样只是一种可有可无的功能。它让用户可以选择适合自己的主题，无论他们是在白天还是晚上工作。
如果您还没有听说过，Tailwind CSS 是当今发展最快的 CSS 框架之一，因为它采用实用优先的方法。
但是，尽管 Tailwind 有一个相当不错的暗黑模式集成指南，但没有明确解释如何构建一个开关元素来切换它。最重要的是，Tailwind 不包含任何支持暗黑模式的实际组件。
这就是 Flowbite 的作用所在。Flowbite 是一个在 Tailwind CSS 之上提供组件和交互元素的库。从 1.2 版开始，它支持暗黑模式。
这就是我今天想要向您展示的内容——如何构建 Tailwind CSS 暗模式切换 元素，以及如何使用 Flowbite 组件。
在开始本教程之前，请确保您已设置好 Tailwind CSS 项目。您还应该 安装 Flowbite 作为插件 ，以便在暗黑模式下使用其组件。
入门
如果您已经设置了 Tailwind CSS 项目，那么您可以跳到安装 Flowbite 作为插件的部分。如果没有，请先按照此处的说明安装 Tailwind CSS。
如何安装 Tailwind CSS
使用 Tailwind CSS 最流行的方式是将其安装为 PostCSS 插件。为此，我们需要使用 NPM 安装三个不同的包：
npm install -D tailwindcss@latest postcss@latest autoprefixer@latest
之后，您应该创建一个名为的文件 postcss.config.js 并在其中添加以下代码：
// postcss.config.js
module.exports = {
plugins: {
tailwindcss: {},
autoprefixer: {},
}
}现在打开你的终端并执行以下命令：
npx tailwindcss init
这将创建一个空 tailwind.config.js 文件，我们稍后将使用它将 Flowbite 作为插件包含在内。
接下来您应该创建一个新的 CSS 文件，您可以调用 styles.css 它在里面添加以下代码：
/* ./your-css-folder/styles.css */
@tailwind base;
@tailwind components;
@tailwind utilities;使用 PostCSS 编译代码后，注入的指令（基础、组件、实用程序）将作为样式在最终的 CSS 文件中可用。
最后，您需要做的就是通过运行以下命令使用 Tailwind CLI 编译 CSS：
npx tailwindcss -o tailwind.css
新创建的 tailwind.css 文件将在您的项目中可用，您应该将其包含在 HTML 模板中才能访问样式。
现在，您的计算机上有一个可用的 Tailwind CSS 配置。如果您想了解有关此过程的更多信息，请查看 Tailwind CSS 的安装指南 .
如何安装 Flowbite
我们需要安装 Flowbite 才能使用组件的全部功能和暗版本支持。幸运的是，由于它是一个 Tailwind CSS 插件，因此安装过程非常简单。
让我们首先通过 NPM 安装它：
npm i flowbite
然后将其作为文件内的插件来使用 tailwind.config.js ：
module.exports = {
plugins: [
require('flowbite/plugin')
]
}
最后，确保在标签关闭之前的某处也包含了 JavaScript 文件 <body> ：
如何在 Tailwind CSS 中启用暗黑模式
首先要了解的是 Tailwind CSS 中的暗黑模式是如何工作的。有两种方法可以设置它：
-
使用
media选项 -
使用
class选项
主要区别在于该 media 选项只会考虑您的浏览器的配色方案偏好，这实际上是由操作系统设置的。
该 class 选项将仅查找 .dark 应用于主 <html> 标签的类。大多数网站都使用这种方法，因为通过这种方法，用户可以手动设置他们的偏好。
我们将坚持使用这个 class 选项，因为它可以让用户更好地控制他们的主题偏好。
我们首先在 tailwind.config.js 文件中添加以下内容：
module.exports = {
darkMode: 'class',
// ...
}
这会将 Tailwind 配置为使用 class 暗模式选项。
页面元素 <head> 添加一个脚本 localStorage ，并使用浏览器的配色方案作为备份：
localStorage
我们将此脚本添加到 <head> 标签中而不是添加到结束 <body> 标签之前的原因是我们想避免在将页面设置为暗模式或亮模式时出现闪烁效果。
如何构建暗模式开关
现在 Tailwind 已经配置好了，我们需要构建用户将与之交互的元素，以将主题从暗模式更改为亮模式。
为此，我们将坚持使用 <button> Flowbite 组件库 中的基本元素 ，并使用两个可互换的图标。
将以下 HTML 代码添加到您的页面。我建议将元素添加到导航栏右上角的某个位置，因为这是用户想要更改配色方案时自然会查看的位置：
两个 SVG 对象都是图标，根据活动主题，只会显示其中一个。这三个对象有三个 id：
-
#theme-toggle用于主暗模式切换元素 -
#theme-toggle-dark-icon当活动主题为浅色时将显示月亮图标 -
#theme-toggle-light-icon当活动主题为暗色时将显示太阳图标
如何使用 JavaScript 处理暗黑模式切换
最后我们需要做的就是处理暗模式切换元素的点击事件，并更新 localStorage 和元素内的图标。
在主 JavaScript 文件中添加以下代码：
var themeToggleDarkIcon = document.getElementById('theme-toggle-dark-icon');
var themeToggleLightIcon = document.getElementById('theme-toggle-light-icon');
// Change the icons inside the button based on previous settings
if (localStorage.getItem('color-theme') === 'dark' || (!('color-theme' in localStorage) && window.matchMedia('(prefers-color-scheme: dark)').matches)) {
themeToggleLightIcon.classList.remove('hidden');
} else {
themeToggleDarkIcon.classList.remove('hidden');
}
var themeToggleBtn = document.getElementById('theme-toggle');
themeToggleBtn.addEventListener('click', function() {
// toggle icons inside button
themeToggleDarkIcon.classList.toggle('hidden');
themeToggleLightIcon.classList.toggle('hidden');
// if set via local storage previously
if (localStorage.getItem('color-theme')) {
if (localStorage.getItem('color-theme') === 'light') {
document.documentElement.classList.add('dark');
localStorage.setItem('color-theme', 'dark');
} else {
document.documentElement.classList.remove('dark');
localStorage.setItem('color-theme', 'light');
}
// if NOT set via local storage previously
} else {
if (document.documentElement.classList.contains('dark')) {
document.documentElement.classList.remove('dark');
localStorage.setItem('color-theme', 'light');
} else {
document.documentElement.classList.add('dark');
localStorage.setItem('color-theme', 'dark');
}
}
});
代码的第一部分将根据之前的偏好（通过 localStorage 浏览器的配色方案）更改正在显示的图标。
代码的第二部分处理开关元素本身的点击事件，并 localStorage 根据所选主题进行设置。
如何使用导航栏中的暗模式开关
我们还没有完成，因为我们需要找到一个地方来定位暗模式切换器——除了导航栏之外，还有什么更好的地方可以做到这一点。
幸运的是，Flowbite 带有许多很棒的 导航栏组件 ，我们可以从中选择并将暗模式切换按钮定位在其中。
让我们以带有按钮的导航栏示例为例，并使用我们自己的暗模式切换器对其进行更改：
最终结果应如下所示：
现在，每当用户单击按钮时，整个布局都会从暗变为亮，反之亦然。这是使用 Tailwind CSS 和 Flowbite 创建暗模式切换器所需的全部代码。
暗黑模式下的 Flowbite 组件
在本教程中，我还想向您展示 Flowbite 中一些已经支持暗模式的组件，以及如何在 Tailwind CSS 项目中使用它们。
Flowbite v1.2发布 后， 这个开源组件库增加了一个重要功能：所有组件和插件全面集成暗模式。
类 .dark:{*} 的存在，Flowbite 中的组件可以开箱即用地支持暗黑模式。
一个很好的例子是 模态组件 ，当它从亮切换到暗时，外观会完全改变：
在 上 写了一篇关于如何使用 Flowbite 的文章 ，您可以查看它以了解有关如何使用该库中的组件的更多信息。
结论
我希望本教程能帮助您在为网站构建深色版本时使用 Tailwind CSS 和 Flowbite。很高兴看到开源项目不断发展并使网络变得更好。
在 Twitter 上告诉我您在浏览网站时喜欢哪种配色方案：深色模式还是亮色模式？
发表评论 取消回复