TailwindCSS - 在“浅色”、“深色”或“系统设置”之间切换颜色主题

Posted 2023-03-07

【中文标题】TailwindCSS - 在“浅色”、“深色”或“系统设置”之间切换颜色主题

【英文标题】：TailwindCSS - Switch color theme between "Light", "Dark" OR "System setting"

【发布时间】：2021-06-04 12:09:39

【问题描述】：

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

---

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

tailwind.config.js

module.exports = 
    darkMode: 'media',
;

---

Second through class，这意味着如果您的 标记具有分配的 class="dark"，您的网站也将显示在暗模式（如果您定义了它）。

tailwind.config.js

module.exports = 
    darkMode: 'class',
;

---

有没有一种同时使用这两个选项的简单方法？

我想要达到的效果是用户可以在Lightmode、Darkmode和System Settings

之间设置偏好

类似于这里在堆栈上使用的函数overflow：

---

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

---

关于我的项目的信息：

TailwindCSS Laravel 8 强化 急流 Livewire

---

谢谢里昂

【参考方案1】：

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

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 现在想要在 标记内而不是在 标记内的 'dark' 类......也许这改变了一段时间？

我刚刚改了“document.body.classList.remove('dark');”和“document.body.classList.add('dark');”到“document.documentElement.classList.remove('dark');”和“document.documentElement.classList.add('dark');”

是的，你是对的，这是一个错误。感谢您修复它！