如何使用Tailwind CSS实现黑暗模式

DebugUsery
901 阅读7分钟

使用Tailwind CSS实现黑暗模式

黑暗模式是为用户界面建立的一种显示设置。它让用户将应用程序的主题色改为黑色或更接近黑色的颜色。

最近，大多数开发者都在他们的应用程序中加入了这个功能。这些应用程序包含一个切换开关，在点击时将颜色变为深色或浅色。

最近版本的Tailwind css带有一个功能，使用户能够在他们的网页上添加黑暗模式。

在本教程中，我们将使用该功能为我们的页面添加一个黑暗主题。

前提条件

要完成这篇文章，你需要对HTML、CSS、Tailwind CSS和Javascript有一个清晰的认识。

让我们开始吧!

第1步：将Tailwind添加到你的项目中

我将假设你已经安装了最新版本的Tailwind。

第2步：我们的HTML

我们将需要在我们的网页上有一些内容，以便我们可以看到很酷的黑暗模式效果。

这就是我们将使用的网页。

Blog page

这是该网页的代码。

<div class="flex flex-row items-center justify-center">
  <div class="p-8 rounded-lg max-w-md mx-auto">
    <h2 class="text-3xl font-bold text-black items-start ">
      Tailwind Dark Mode
    </h2>
    <p class="font-semibold text-gray-800">
      We can switch from light to dark mode!
    </p>
    <p class="font-light">
      Lorem ipsum dolor sit amet consectetur adipisicing elit. Saepe suscipit
      reprehenderit deleniti perferendis debitis ullam quos praesentium, esse
      totam adipisci illum illo.
    </p>
    <button
      class="
            flex
            items-center
            w-24
            px-2
            py-2
            mt-4
            text-center text-white
            bg-blue-900
            rounded-lg
          "
    >
      Read More
    </button>
    <!--IMAGE HERE-->
    <div class="w-96 h-46 mb-5">
      <img class="rounded mt-2" src="./images/image1.jpg" />
    </div>
  </div>
</div>

现在我们有了一个可以练习的网页，让我们进入下一个步骤。

第3步：建立开关

在你开始之前，确保你有一个清晰的想法，你希望你的开关看起来像什么，你希望它在哪里。

一些网页在导航栏的 "设置 "选项卡中设置了黑暗模式功能。其他的则是在页面的右上角包括这个功能。

对于我们的情况，我们将把它放在右角，因为它更简单。

让我们开始吧!

我们将使用input 元素进行切换。

我们的第一个任务是确保开关在网页的右上角。

我们通过创建一个具有以下类的div 容器来做到这一点。

<body>
  <div
    class="flex items-center justify-center mx-auto absolute top-5 right-0 left-1/3"
  ></div>
</body>

这里发生了什么？

  • flex 将使开关的内容垂直对齐。
  • items-center,justify-center, 和mx-auto 将把开关对齐到中心。
  • absolute 类将元素定位在页面的正常流程之外。因此，为了控制绝对位置的开关，我们将添加top-5,right-0, 和left-1/3 。这意味着我们的元素将在右边和顶部。

让我们添加一些内容，以便我们可以看到位置。

我们将在容器下添加另一个div 元素。

div 将包含以下类别。

<div class="flex justify-end items-center space-x-2 mx-auto relative">
  <span class="text-xs font-extralight">Light </span>
  <span class="text-xs font-semibold">Dark</span>
</div>

这就是它在这一点上应该有的样子。

Result

在上面的代码中。

  • flex 将在同一行中垂直对齐内容，而 将把开关对齐到容器空间的末端。开关被移到了右边。justify-end
  • space-x-2 在切换开关和 "light "和 "dark "这两个词之间增加了一些空间。在这种情况下，为了便于理解，我们使用了文字而不是图标。
  • <span> 元素添加了 "light "和 "dark "字样。
  • relative 类将项目定位到右边。这意味着这些字不会影响页面的布局和周围的任何东西。

由于 "light "和 "dark "这两个词在我们的页面上就像图标一样，让我们添加一个可以点击的开关。它将出现在这两个词之间。

在添加 "光明 "文字的<span> 元素下，创建另一个像下面这样的div 元素。

<div>
  <input type="checkbox" name="" id="checkbox" class="hidden" />
  <label for="checkbox" class="cursor-pointer">
    <div class="w-9 h-5 flex items-center bg-gray-300 rounded-full p2">
      <div class="w-4 h-4 bg-white rounded-full shadow"></div>
    </div>
  </label>
</div>

我们在这里添加了什么？

  • 首先，我们创建了一个复选框；我们使用了<input> 元素来做到这一点。这个复选框将对我们的开关应用 "开 "和 "关 "的样式；它是用hidden 类别隐藏的。
  • 在<input> 元素的下面有一个<label> 元素。它将允许我们点击开关的任何地方来打开或关闭它。cursor-pointer 类可以实现这一功能。
  • 在<label> ，有另一个<div> 元素，它创建了一个项目供我们点击。这个项目有一个灰色的背景和一个圆形的形状。
  • 第二个<div> 元素在圆形的项目中创建了一个球。这将帮助我们看到复选框是否被选中，因为它是隐藏的。

在这一点上，我们的开关应该看起来像下面这样。

Step 3 end result

让我们在球上添加一些自定义CSS，当我们点击它时，它就会移动。

对于自定义CSS，让我们将球命名为switch-ball ，并在<head> 标签下使用<style> 元素添加样式。

这里是样式。

<style>
    #checkbox:checked + label .switch-ball{
      background-color: white;
      transform: translateX(24px);
      transition: transform 0.3s linear;
    }
  </style>

这意味着什么呢？

它意味着。

  • 当复选框被点击时，球将向右滑动。transform 属性使这成为可能。
  • transition 属性将使球平稳地滑动，并在0.3秒内到达另一边。

这就是它的滑动方式。

Ball Sliding

第4步：配置Tailwind CSS

默认情况下，Tailwind CSS的黑暗模式是不启用的。根据官方文档，默认情况下不启用它是因为考虑到文件大小。

因此，为了启用它，我们需要在我们的tailwind.config 中设置黑暗模式选项。

让我们这样做吧。

首先，转到你的tailwind.config.js 文件。

module.exports = {
  purge: [],
  darkMode: false, // or 'media' or 'class'
  theme: {
    extend: {},
  },
  variants: {
    extend: {},
  },
  plugins: [],
};

将darkMode 设置为'class'。

使用'媒体'将根据操作系统设置主题。

当我们使用'class'时，用户将能够在他们喜欢的主题之间进行切换。

改变为类模式后，确保你的文件看起来像这样。

module.exports = {
  purge: [],
  darkMode: "class",
  theme: {
    extend: {},
  },
  variants: {
    extend: {},
  },
  plugins: [],
};

之后，到终端运行这个命令。

npm run tw:build

这将是结果。

Step 4 result

这表明在我们的项目中启用了黑暗模式。我们的下一个任务是在我们的HTML中添加黑暗模式。

第5步：在我们的HTML中添加暗色模式类

由于我们是使用类模式实现黑暗模式，我们需要在<html> 标签上添加类dark ，如下图所示。

<html lang="en" class="dark"></html>

看看它是否有效，开始向你的元素添加类。例如，如果你想让你的页面的背景颜色更深，选择一个深色的颜色，如bg-gray-800 ，然后再加上 "dark "的前缀。

对于我们页面的背景色，我们将按如下所示添加颜色。

<body class="dark:bg-gray-800 dark:text-gray-200"></body>

在这种情况下，浅色模式下的背景将是白色的，文字将是黑色的。另一方面，深色模式将有一个灰色背景和白色文本。

在为暗色主题选择颜色组合时，要确保它们是对应的。

将dark 类添加到我们的页面后，它应该看起来像下图所示。

Step 5 Result

现在我们对我们的黑暗主题的外观有了一个概念，让我们使我们的开关工作，这样我们就可以在不同的主题之间切换。

第6步：添加JavaScript

在这一步，我们要添加几行Javascript代码，使我们的开关工作。

你可以创建一个外部的Javascript文件并链接它，或者你可以使用<script> 标签添加代码。我们将使用后者。

在script标签内添加以下代码。

    <script>
      const checkbox = document.querySelector("#checkbox");
      const html = document.querySelector("html");

      const toggleDarkMode = function () {
        checkbox.checked
        ? html.classList.add("dark")
        : html.classList.remove("dark");
      }

    //calling the function directly

      toggleDarkMode();
      checkbox.addEventListener("click",toggleDarkMode);

      </script>

这些行将做什么？

  • 首先，我们使用了querySelector() 方法来获取元素HTML 和一个我们为复选框创建的id 。
  • 我们创建了一个函数并将其命名为toggleDarkMode。它告诉我们将如何应用黑暗主题。这意味着，当复选框被选中时，HTML文件将添加类dark ，当复选框被取消时，将删除它。
  • 要在不同的主题之间切换，我们需要调用我们的函数，然后添加一个事件监听器。在我们的例子中，它将是点击。

下面是我们的页面在浅色和深色模式下的情况。

Dark and light theme

结论

在这篇文章中，我们已经通过使用Tailwind CSS在网页中实现了黑暗模式。据说，黑暗模式可以减少智能手机的电池寿命，也可以减少眼睛的疲劳。在你的网页上添加这一功能是很聪明的。

avatar
文章
阅读
粉丝