html 如果系统设置为暗模式，则使用TailwindCSS的应用程序无法更改为亮模式

sbtkgmzw 于 2022-12-16 发布在其他

关注(0)|答案(2)|浏览(120)

我正在使用T3堆栈开发一个新项目，我希望能够在亮暗模式之间切换。但是，只有文本颜色发生了变化，背景总是设置为系统的首选项。
如果我将浏览器主题设置为浅色，则背景为浅色，如果我将浏览器主题设置为深色，则背景为深色。当设置了其中一个主题时，我在Web应用程序中切换浅色和深色主题，文本颜色会发生变化，但背景保持不变。
除了documentation中描述的元素之外，是否有一个特定的类需要设置为某个元素，以便主题在亮和暗之间正确切换？
换句话说，bg-base-100和bg-base-content等CSS类是否动态设置为正确的颜色，或者我是否必须显式设置应用中每个元素的颜色？

编辑

这是同一个站点的Google Chrome（左）和Firefox（右）的并排表示，背景发生了变化，因为我在内容容器元素中添加了bg-slate-100 text-slate-800 dark:bg-slate-800 dark:text-slate-100。
请注意工具栏（即navbar bg-neutral text-neutral-content）和表格（即table table-compact）如何不更改背景颜色，但正确应用了文本颜色。
第一节第一节第一节第一节第一次

Html

来源：https://stackoverflow.com/questions/74744848/application-using-tailwindcss-cannot-change-to-light-mode-if-system-is-set-to-da

2条答案

按热度按时间

u59ebvdq1#

您需要在UI中有一个按钮，该按钮带有一个单击事件侦听器，用于向组件添加dark类或从中删除dark类。
样本代码：

// On page load or when changing themes, best to add inline in `head` to 

avoid FOUC
if (localStorage.theme === 'dark' || (!('theme' in localStorage) && window.matchMedia('(prefers-color-scheme: dark)').matches)) {
  document.documentElement.classList.add('dark')
} else {
  document.documentElement.classList.remove('dark')
}

// Whenever the user explicitly chooses light mode
localStorage.theme = 'light'

// Whenever the user explicitly chooses dark mode
localStorage.theme = 'dark'

// Whenever the user explicitly chooses to respect the OS preference
localStorage.removeItem('theme')

文档链接：https://tailwindcss.com/docs/dark-mode

赞(0）回复(0）举报 2022-12-16

x759pob22#

我的主题切换功能就像in the documentation找到的一样，也就是：

function applyTheme() {
  if (typeof window !== "undefined") {
    if (
      localStorage.theme === "dark" ||
      (!("theme" in localStorage) &&
        window.matchMedia("(prefers-color-scheme: dark)").matches)
    ) {
      document.documentElement.classList.add("dark");
    } else {
      document.documentElement.classList.remove("dark");
    }
  }
}

但是，我正在使用DaisyUI，所以我错过了this part：

<html data-theme="cupcake"></html>

换句话说，data-theme HTML属性。修改applyTheme函数以：

function applyTheme() {
  if (typeof window !== "undefined") {
    if (
      localStorage.theme === "dark" ||
      (!("theme" in localStorage) &&
        window.matchMedia("(prefers-color-scheme: dark)").matches)
    ) {
      document.documentElement.classList.add("dark");
      document.documentElement.setAttribute("data-theme", "dark");
    } else {
      document.documentElement.classList.remove("dark");
      document.documentElement.setAttribute("data-theme", "light");
    }
  }
}

让它工作。

赞(0）回复(0）举报 2022-12-16

我来回答

html 如果系统设置为暗模式，则使用TailwindCSS的应用程序无法更改为亮模式

编辑

2条答案

相关问题

热门标签

最新问答