如何解决Tailwind CSS暗模式未启用
我正在尝试使用顺风来基于系统默认值启用暗模式。
为此,我正在使用插件:Tailwind dark mode。
我的顺风配置失败如下:
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-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 通过在任何类之前添加 <script type="text/javascript" src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script type="text/javascript" src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
<link type="text/css" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" rel="stylesheet">
前缀来支持暗模式 out-of-the-box 启用它。不确定它是否与问题有关,但认为您需要知道。
您使用的插件说明了以下用于启用暗模式的用途:
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-odd']
}
...
元素时使用。你如何做到这一点取决于你。 prefers-dark.js 作为一个选项提供,它是一个简单的脚本,可以根据用户的系统主题启用暗模式。
因此,要通过插件启用暗模式,请使用:
<html>
将额外的 < 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
有了上述内容,主题将随着用户在系统设置中更改他/她的偏好而改变。
附言如果您想使用暗模式,请使用 TailWindCSS v2 中内置的一种。像这样启用它:
< 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>
< tailwind.config.js >
module.exports = {
darkMode: 'media',...
}
可以更改为 media
。
媒体:现在只要在用户的操作系统上启用暗模式,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
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。