TailwindCSS 从零开始 - dark 深色模式

dark

深色模式的原理

TailwindCSS 有趣的还有深色模式，可以透过 media 与 class 的方式启动深色模式。
可以在配置档 tailwind.config.js 中自行设定。

media：让装置在深色模式的时候自动转换。
class：手动切换深色模式。

tailwind.config.js

module.exports = {
    mode: "jit", //加在这里
    purge: ["./**/*.html", "./src/**/*.css"],
    darkMode: false, // or 'media' or 'class'
    theme: {
        extend: {},
    },
    variants: {
        extend: {
            // ringWidth: ["active"], //加在这里
        },
    },
    plugins: [],
};

装置切换这边就不需要特别说明，不管是电脑、平板或手机现在都能设定在某个时间就切换成深色模式。

这边主要是介绍手动切换的练习。

起手式

首先先把深色模式设定成 class 的状态。

module.exports = {
    mode: "jit", 
    purge: ["./**/*.html", "./src/**/*.css"],
    darkMode: 'class', //记得要是字串
    theme: {
        extend: {},
    },
    variants: {
        extend: {
                   },
    },
    plugins: [],
};

实作背景切换深色模式

我这边写两个按钮，分别要去切换日间模式与夜间模式。

Step 1 - 写两个按钮

HTML

  <button id="light"
            class="px-4 py-2 rounded-full bg-white border-gray-400 border-2">日间模式
            <i class="fas fa-sun text-yellow-500"></i></button>
        <button id="dark"
            class="px-4 py-2 rounded-full bg-gray-700 border-gray-700 border-2 text-white">夜间模式<i
                class="fas fa-moon text-yellow-500"></i></button>

会得到下方画面：

button

Step 2 - 在 CSS 修改 base 的 body 样式

@tailwind base;
@tailwind components;
@tailwind utilities;

@layer base {
  body {
    @apply dark:bg-black; 
  }
}

务必记得一定要在配置档改成 class 或 media 状态，不然 CSS 其实看不懂什麽是 dark:bg-black 的样式。

Step 3 - 写入事件

引入 JS 於 <body> 之前，这应该不用赘述。

HTML

<body>
...
  <script src="js/all.js"></script>
</body>

JavaScript

let light = document.getElementById("light");
let dark = document.getElementById("dark");

light.addEventListener("click", function () {
  document.documentElement.classList.remove("dark");
});

dark.addEventListener("click", function () {
  document.documentElement.classList.add("dark");
});

我绑定两个按钮後，分别写入在日间模式时就移除 .dark ，反之，在夜间模式就新增 .dark 启动深色模式。