我环顾四周,但找不到任何相关的问答。我正在使用 tailwindCSS 在 ReactJS 中构建一个项目,并在网站上实现暗模式。一切正常,但现在我的背景图片出现了一些问题。
我在 tailwind.config.js
darkMode: 'class',
theme: {
extend: {
backgroundImage: (theme) => ({
'code': "url('/src/components/About/coding-bg-dark.png')",
'light-code': "url('/src/components/About/lightcode.png')",
})
},
},
并且在体面的部分有类名
<section id='introduction' className="bg-code dark:bg-light-code bg-cover bg-fixed flex flex-wrap content-center w-full md:h-screen">
但是当我切换暗模式时,图像没有改变,暗图像保持在亮模式。知道我该如何解决吗?
最佳答案
您需要在 tailwind.config.js
中添加 darkMode: 'media'
,并扩展背景图像的变体以包含深色模式。这是一个示例 tailwind.config.js
:
module.exports = {
darkMode: 'media',
theme: {
extend: {
backgroundImage: (theme) => ({
'image-one':
"url('https://images.unsplash.com/photo-1629651480694-edb8451b31aa?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=668&q=80')",
'image-two':
"url('https://images.unsplash.com/photo-1629651726230-6430554a8890?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=2734&q=80')",
}),
},
},
variants: {
extend: {
backgroundImage: ['dark'],
},
},
plugins: [],
}
然后它应该工作。你可以看到一个工作示例 here .
关于javascript - 有什么方法可以在暗模式切换时更改 tailwind css 中的图像?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/68835659/