TailwindCSS - 在 "Light"、"Dark" 或 "System setting" 之间切换颜色主题

Question

TailwindCSS 提供了 2 种不同的方式来在您的网站上启用暗模式。

首先通过媒体，这意味着如果您的操作系统支持暗模式并且激活了它，您的网站将自动以暗模式显示（如果你定义了它）。

tailwind.config.js

module.exports = {
    darkMode: 'media',
};

第二个到 class，意思是如果你的 < html > 标签有 class="dark" aassigned 你的网站也将以暗模式显示（如果你定义的话）。

tailwind.config.js

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

是否有同时使用这两个选项的简单方法？

我想要实现的效果是用户可以在Lightmode、Darkmode和System之间设置自己的偏好设置

类似于堆栈上这里使用的函数溢出:

如果 TailwindCSS 无法直接使用此选项，那么最干净、最简单的解决方法是什么？

我的项目信息：

TailwindCSS
Laravel 8
Fortify
Jetstream
Livewire

谢谢莱昂

Answer 1

我的项目中有完全相同的用例。我通过使用 class 模式和媒体观察器解决了这个问题。您需要在页面加载、设置更改以及事件触发时设置 class。

const setTheme = (isDark) => {
  document.documentElement.classList.remove('dark');
  if (isDark) {
    document.documentElement.classList.add('dark');
  }
};

if (settingIsAuto) {
  setTheme(window.matchMedia('(prefers-color-scheme: dark)').matches);
}

window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', e => {
  const newIsDark = e.matches;
  if (settingIsAuto) {
    setTheme(newIsDark);
  }
});

// watch for settings changes

TailwindCSS - 在 "Light"、"Dark" 或 "System setting" 之间切换颜色主题

TailwindCSS - Switch color theme between "Light", "Dark" OR "System setting"

javascript

php

laravel

tailwind-css

laravel-8