Tailwind CSS - 在“浅色”、“深色”或“系统设置”之间切换颜色主题
leo*_*las 3 javascript php tailwind-css laravel-8
Tailwind CSS 提供了两种不同的方式在您的网站上启用深色模式。
第一种方式是通过媒体，这意味着您的操作系统是否支持暗模式并且已激活。您的网站将自动以深色模式显示。
我的tailwind.config.js：
module.exports = {
darkMode: 'media',
};
第二种方法是通过“class”，这意味着您的<html>标签是否已class="dark"分配。您的网站将以深色模式显示。
我的tailwind.config.js：
module.exports = {
darkMode: 'class',
};
有没有一种简单的方法可以同时使用这两个选项？
我想要实现的效果是用户可以在“亮”、“暗”和“系统设置”之间设置自己的偏好。
与 Stack Overflow 上使用的函数类似：
如果 Tailwind CSS 目前无法实现此选项，那么最干净、最简单的解决方法是什么？
有关我的项目的信息：
- 顺风 CSS
- 拉拉维尔 8
- 强化
- 捷流
- 活线
我的项目中有完全相同的用例。我通过使用类模式和媒体观察器解决了这个问题。您需要在页面加载、设置更改以及事件触发时设置该类。
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
| 归档时间： |
|
| 查看次数： |
5192 次 |
| 最近记录： |