我正在尝试使用顺风根据系统默认值启用暗模式。
为此,我正在使用插件:顺风黑暗模式。
我的顺风配置失败如下:
defaultTheme = require('tailwindcss/defaultTheme');
module.exports = {
experimental: {
darkModeVariant: true
},
purge: [],
theme: {
extend: {
fontFamily: {
sans: ['Nunito', ...defaultTheme.fontFamily.sans],
},
screens: {
'dark': {'raw': '(prefers-color-scheme: dark)'},
// => @media (prefers-color-scheme: dark) { ... }
},
},
},
variants: {
backgroundColor: ['dark', 'dark-hover', 'dark-group-hover', 'dark-even', 'dark-odd'],
borderColor: ['dark', 'dark-disabled', 'dark-focus', 'dark-focus-within'],
textColor: ['dark', 'dark-hover', 'dark-active', 'dark-placeholder'],
opacity: ['responsive', 'hover', 'focus', 'disabled']
},
plugins: [require('tailwindcss-dark-mode')()],
}
defaultTheme = require('tailwindcss/defaultTheme');
在我的 html 文件中,我添加了以下内容:
<span class="dark:text-yellow-400">
1
</span>
该插件检查我的暗模式,但文本不会变黄,它保持黑色。
有谁知道为什么它不起作用?
首先,现在 TailWIndCSS 支持开箱即用的暗模式,方法是在启用后在任何类之前添加dark:
前缀。不确定它是否与问题有关,但认为您需要知道。
您正在使用的插件声明以下用于启用暗模式的用途:
< tailwind.config.js >
...
plugins: [
require('tailwindcss-dark-mode')()
]
// To enable dark mode for all classes:
variants: ['dark', 'dark-hover', 'dark-group-hover', 'dark-even', 'dark-odd', ...]
// To enable dark mode for only single utility class:
variants: {
backgroundColor: ['dark', 'dark-hover', 'dark-group-hover', 'dark-even', 'dark-odd']
}
...
它还指出,
仅当选择器应用于
<html>
元素时,才会使用此插件生成的样式。你如何做到这一点取决于你。首选-深色.js作为选项提供,这是一个简单的脚本,可根据用户的系统主题启用深色模式。
因此,要通过插件启用暗模式,请使用:
< mypage.html >
...
<body class="mode-dark">
<div class="bg-white dark:bg-black">
<p class="text-black dark:text-white">
My eyes are grateful.
<a class="text-blue-300 hover:text-blue-400">
Learn more
</a>
</p>
</div>
...
</body>
将该额外的mode-dark
类添加到包装元素(在本例中为body
)。
要通过插件根据用户偏好更改主题:
< mypage.html >
<head>
<script src="to/prefers-dark.js"></script>
</head>
...
<body class="mode-dark">
<div class="bg-white dark:bg-black">
<p class="text-black dark:text-white">
My eyes are grateful.
<a class="text-blue-300 hover:text-blue-400">
Learn more
</a>
</p>
</div>
...
</body>
如上所述,随着用户在系统设置中更改他/她的首选项,主题将发生变化。
附言如果要使用暗模式,请使用 TailWindCSS v2 中内置的模式。像这样启用它:
< tailwind.config.js >
module.exports = {
darkMode: 'media',
...
}
media
可以更改为class
.
类媒体:现在,只要在用户的操作系统上启用暗模式,dark:{class} 类将优先于不带前缀的类。媒体策略在引擎盖下使用首选配色方案媒体功能。
:如果要支持手动切换深色模式,而不是依赖于操作系统首选项,请使用类策略而不是媒体策略。
希望这对你有所帮助:)
由于忘记更新tailwind.config.js
,我遇到了这个问题:
我改变了:
darkMode: false,
自
darkMode: 'class',
我在 Vue 中有一个简单的观察器,可以通过以下方式切换它:
document.querySelector('html').classList.add('dark')
document.querySelector('html').classList.remove('dark')
您可以在此处阅读更多内容: https://tailwindcss.com/docs/dark-mode