php TailwindCSS -在“亮”、“暗”或“系统设置”之间切换颜色主题

s6fujrry 于 2023-01-29 发布在 PHP

关注(0)|答案(1)|浏览(235)

TailwindCSS提供了2种不同的方式来启用您网站上的暗模式。
First through media，意思是如果您的操作系统支持暗模式并激活了暗模式，您的网站将自动以暗模式显示（如果您定义了暗模式）。
顺风配置js

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

第二个到class，这意味着如果您的***< html >* 标签分配了**class=“dark”**a，您的网站也将以暗模式显示（如果您定义了它）。
顺风配置js

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

有没有一种简单的方法可以同时使用这两个选项？
我想要达到的效果是用户可以在Lightmode、Darkmode和System Settings之间设置他们的首选项
类似于这里在stackoverflow上使用的函数：

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

有关我的项目的信息：

尾风CSS
拉腊维尔8
设防
捷流
火线

谢谢里昂

php

来源：https://stackoverflow.com/questions/66498857/tailwindcss-switch-color-theme-between-light-dark-or-system-setting

1条答案

按热度按时间

wfveoks01#

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

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

赞(0）回复(0）举报 2023-01-29

我来回答

php TailwindCSS -在“亮”、“暗”或“系统设置”之间切换颜色主题

1条答案

相关问题

热门标签

最新问答