Tailwind CSS，为你的网站添加暗黑模式

站长

2023年02月09日 06:24 · 阅读数 46

「这是我参与2022首次更文挑战的第5天，活动详情查看：2022首次更文挑战」。

Tailwind CSS 是当今发展最快的 CSS 框架之一。即使 Tailwind 有一个非常好的暗模式集成指南，也没有关于如何构建一个开关元素来切换它的明确解释。最重要的是，Tailwind 不包含任何支持暗模式的实际组件。

这就是 Flowbite 的用武之地。Flowbite 是一个在 Tailwind CSS 之上提供组件和交互元素的库。从 1.2 版开始，它支持暗模式。

这就是我今天要向你展示的内容——如何构建Tailwind CSS 暗模式切换元素，以及如何使用 Flowbite 组件。 Tailwind CSS官网。

Tailwind CSS，为你的网站添加暗黑模式在深入学习本教程之前，请确保您已经设置了 Tailwind CSS 项目。你还应该将 Flowbite 安装为插件，以便您可以在暗模式下使用其组件。

如何安装 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 的安装指南。

如何安装 Flowbit

我们需要安装 Flowbite 才能访问组件的全部功能和暗版支持。幸运的是，设置过程非常简单，因为它是一个 Tailwind CSS 插件。

让我们首先通过 NPM 安装它：

npm i @themesberg/flowbite

然后在文件中将其作为插件要求tailwind.config.js：

module.exports = {

    plugins: [
        require('@themesberg/flowbite/plugin')
    ]

}

最后，确保在<body>标签关闭之前的某处还包含 JavaScript 文件：

<script src="../path/to/@themesberg/flowbite/dist/flowbite.bundle.js"></script>

如何在 Tailwind CSS 中启用暗模式

首先要了解的是 Tailwind CSS 中暗模式的工作原理。你可以通过两种方式进行设置：

使用media选项
使用class选项

主要区别在于该media选项只会考虑浏览器的配色方案偏好，这实际上是由操作系统设置的。

该class选项将仅查找.dark应用于主<html>标签的类。这是大多数网站使用的，因为通过这种方法，用户可以手动设置他们的偏好。

我们将坚持使用该class选项，因为它可以让用户更好地控制他们的主题偏好。

让我们首先将以下内容添加到tailwind.config.js文件中：

module.exports = {
  darkMode: 'class',
  // ...
}

Tailwind CSS 暗模式配置

这会将 Tailwind 配置为使用class暗模式选项。

接下来，将脚本添加到<head>页面元素。这将检查以前的用户偏好localStorage，并使用浏览器的配色方案作为备份：

<script>
  // It's best to inline this in `head` to avoid FOUC (flash of unstyled content) when changing pages or themes
  if (
    localStorage.getItem('color-theme') === 'dark' ||
    (!('color-theme' in localStorage) &&
      window.matchMedia('(prefers-color-scheme: dark)').matches)
  ) {
    document.documentElement.classList.add('dark');
  } else {
    document.documentElement.classList.remove('dark');
  }
</script>

暗模式检查器 localStorage

我们将此脚本添加到<head>标签而不是结束<body>标签之前的原因是因为我们希望在将页面设置为深色或浅色模式时避免闪烁效果。

如何构建暗模式开关

现在已配置 Tailwind，我们需要构建用户将与之交互的元素，以将主题从暗模式更改为亮模式。

为此，我们将坚持使用Flowbite 组件库<button>中的一个基本元素，并使用两个可互换的图标。

将以下 HTML 代码添加到您的页面。我建议在导航栏右上角的某处添加该元素，因为这是用户想要更改配色方案时自然而然的地方：

<button
  id="theme-toggle"
  type="button"
  class="text-gray-500 dark:text-gray-400 hover:bg-gray-100 dark:hover:bg-gray-700 focus:outline-none focus:ring-4 focus:ring-gray-200 dark:focus:ring-gray-700 rounded-lg text-sm p-2.5"
>
  <svg
    id="theme-toggle-dark-icon"
    class="w-5 h-5 hidden"
    fill="currentColor"
    viewBox="0 0 20 20"
    xmlns="http://www.w3.org/2000/svg"
  >
    <path
      d="M17.293 13.293A8 8 0 016.707 2.707a8.001 8.001 0 1010.586 10.586z"
    ></path>
  </svg>
  <svg
    id="theme-toggle-light-icon"
    class="w-5 h-5 hidden"
    fill="currentColor"
    viewBox="0 0 20 20"
    xmlns="http://www.w3.org/2000/svg"
  >
    <path
      d="M10 2a1 1 0 011 1v1a1 1 0 11-2 0V3a1 1 0 011-1zm4 8a4 4 0 11-8 0 4 4 0 018 0zm-.464 4.95l.707.707a1 1 0 001.414-1.414l-.707-.707a1 1 0 00-1.414 1.414zm2.12-10.607a1 1 0 010 1.414l-.706.707a1 1 0 11-1.414-1.414l.707-.707a1 1 0 011.414 0zM17 11a1 1 0 100-2h-1a1 1 0 100 2h1zm-7 4a1 1 0 011 1v1a1 1 0 11-2 0v-1a1 1 0 011-1zM5.05 6.464A1 1 0 106.465 5.05l-.708-.707a1 1 0 00-1.414 1.414l.707.707zm1.414 8.486l-.707.707a1 1 0 01-1.414-1.414l.707-.707a1 1 0 011.414 1.414zM4 11a1 1 0 100-2H3a1 1 0 000 2h1z"
      fill-rule="evenodd"
      clip-rule="evenodd"
    ></path>
  </svg>
</button>

这两个 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浏览器中的或配色方案。

代码的第二部分处理 switch 元素本身的点击事件，并localStorage根据选择的主题进行设置。

如何使用导航栏中的暗模式开关

我们还没有完成，因为我们需要找到一个位置来放置暗模式切换器 - 除了导航栏之外，还有一个更好的地方来做这件事。

幸运的是，Flowbite 带有许多很棒的导航栏组件，我们可以从中选择并将暗模式切换按钮放置在其中。

让我们以带有按钮的导航栏为例，并使用我们自己的暗模式切换器对其进行更改：

<nav class="bg-white border-gray-200 px- bg-white border-gray-200 px-2 sm:px-4 py-2.5 rounded dark:bg-gray-800">
  <div class="container mx-auto flex flex-wrap items-center justify-between">
  <a href="#" class="flex">
    <svg class="h-10 mr-3" viewBox="0 0 52 72" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M1.87695 53H28.7791C41.5357 53 51.877 42.7025 51.877 30H24.9748C12.2182 30 1.87695 40.2975 1.87695 53Z" fill="#76A9FA"></path><path d="M0.000409561 32.1646L0.000409561 66.4111C12.8618 66.4111 23.2881 55.9849 23.2881 43.1235L23.2881 8.87689C10.9966 8.98066 1.39567 19.5573 0.000409561 32.1646Z" fill="#A4CAFE"></path><path d="M50.877 5H23.9748C11.2182 5 0.876953 15.2975 0.876953 28H27.7791C40.5357 28 50.877 17.7025 50.877 5Z" fill="#1C64F2"></path></svg>
      <span class="self-center text-lg font-semibold whitespace-nowrap dark:text-white">FlowBite</span>
  </a>
  <div class="flex md:order-2">
      
      <!-- Dark mode switcher -->
          <button
      id="theme-toggle"
      type="button"
      class="text-gray-500 dark:text-gray-400 hover:bg-gray-100 dark:hover:bg-gray-700 focus:outline-none focus:ring-4 focus:ring-gray-200 dark:focus:ring-gray-700 rounded-lg text-sm p-2.5"
    >
      <svg
        id="theme-toggle-dark-icon"
        class="w-5 h-5 hidden"
        fill="currentColor"
        viewBox="0 0 20 20"
        xmlns="http://www.w3.org/2000/svg"
      >
        <path
          d="M17.293 13.293A8 8 0 016.707 2.707a8.001 8.001 0 1010.586 10.586z"
        ></path>
      </svg>
 <svg
        id="theme-toggle-light-icon"
        class="w-5 h-5 hidden"
        fill="currentColor"
        viewBox="0 0 20 20"
        xmlns="http://www.w3.org/2000/svg"
      >
        <path
          d="M10 2a1 1 0 011 1v1a1 1 0 11-2 0V3a1 1 0 011-1zm4 8a4 4 0 11-8 0 4 4 0 018 0zm-.464 4.95l.707.707a1 1 0 001.414-1.414l-.707-.707a1 1 0 00-1.414 1.414zm2.12-10.607a1 1 0 010 1.414l-.706.707a1 1 0 11-1.414-1.414l.707-.707a1 1 0 011.414 0zM17 11a1 1 0 100-2h-1a1 1 0 100 2h1zm-7 4a1 1 0 011 1v1a1 1 0 11-2 0v-1a1 1 0 011-1zM5.05 6.464A1 1 0 106.465 5.05l-.708-.707a1 1 0 00-1.414 1.414l.707.707zm1.414 8.486l-.707.707a1 1 0 01-1.414-1.414l.707-.707a1 1 0 011.414 1.414zM4 11a1 1 0 100-2H3a1 1 0 000 2h1z"
          fill-rule="evenodd"
          clip-rule="evenodd"
        ></path>
      </svg>
    </button>
    <!-- Dark mode switcher end -->
      
      <button data-collapse-toggle="mobile-menu-4" type="button" class="md:hidden text-gray-500 hover:bg-gray-100focus:outline-none focus:ring-2 focus:ring-gray-200 rounded-lg text-sm p-2 inline-flex items-center dark:text-gray-400 dark:hover:bg-gray-700 dark:focus:ring-gray-600" aria-controls="mobile-menu-4" aria-expanded="false">
      <span class="sr-only">Open main menu</span>
      <svg class="w-6 h-6" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M3 5a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1zM3 10a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1zM3 15a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1z" clip-rule="evenodd"></path></svg>
      <svg class="hidden w-6 h-6" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z" clip-rule="evenodd"></path></svg>
    </button>
  </div>
  <div class="hidden md:flex justify-between items-center w-full md:w-auto md:order-1" id="mobile-menu-4">
    <ul class="flex-col md:flex-row flex md:space-x-8 mt-4 md:mt-0 md:text-sm md:font-medium">
      <li>
        <a href="#" class="bg-blue-700 md:bg-transparent text-white block pl-3 pr-4 py-2 md:text-blue-700 md:p-0 rounded dark:text-white" aria-current="page">Home</a>
      </li>
      <li>
  <a href="#" class="text-gray-700 hover:bg-gray-50 border-b border-gray-100 md:hover:bg-transparent md:border-0 block pl-3 pr-4 py-2 md:hover:text-blue-700 md:p-0 md:dark:hover:text-white dark:text-gray-400 dark:hover:bg-gray-700 dark:hover:text-white md:dark:hover:bg-transparent dark:border-gray-700">About</a>
      </li>
      <li>
        <a href="#" class="text-gray-700 hover:bg-gray-50 border-b border-gray-100 md:hover:bg-transparent md:border-0 block pl-3 pr-4 py-2 md:hover:text-blue-700 md:p-0 md:dark:hover:text-white dark:text-gray-400 dark:hover:bg-gray-700 dark:hover:text-white md:dark:hover:bg-transparent dark:border-gray-700">Services</a>
      </li>
      <li>
        <a href="#" class="text-gray-700 hover:bg-gray-50 border-b border-gray-100 md:hover:bg-transparent md:border-0 block pl-3 pr-4 py-2 md:hover:text-blue-700 md:p-0 md:dark:hover:text-white dark:text-gray-400 dark:hover:bg-gray-700 dark:hover:text-white md:dark:hover:bg-transparent dark:border-gray-700">Contact</a>
      </li>
    </ul>
  </div>
  </div>
</nav>

最终结果应如下所示：

Tailwind CSS，为你的网站添加暗黑模式

暗模式开关（亮模式）

Tailwind CSS，为你的网站添加暗黑模式暗模式开关（暗模式）

暗模式开关（暗模式）

现在，每当用户单击按钮时，整个布局将从暗变为亮，反之亦然。这是使用 Tailwind CSS 和 Flowbite 创建暗模式切换器所需的所有代码。

总结

在为你的网站构建黑暗版本时，我希望本教程对你的 Tailwind CSS 和 Flowbite 之旅有所帮助。

转载自:https://juejin.cn/post/7056040376561303583