gpt4 book ai didi

javascript - 如何在浏览器上使用 TailwindCSS 强制暗模式?

转载 作者:行者123 更新时间:2023-12-05 04:28:16 25 4
gpt4 key购买 nike

我有一个 website使用 TailwindCSS 正确实现深色/浅色 UI。

我想知道是否有一种方法可以强制网站以暗模式加载,直到用户通过单击切换按钮专门打开亮模式。

为什么?因为我更喜欢网站在深色模式下的外观,但由于正确实现了浅色/深色主题,我宁愿保留它并强制它在深色模式下加载,而不管用户的浏览器设置如何。

最佳答案

尝试以下操作

tailwind.config.css 中将 darkMode 设置为 class

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

当你需要 darkMode 时,只需在 html 标签内添加 darkClassName

<html className="dark">
<body>
<!-- Will be black -->
<div className="bg-white dark:bg-black">
<!-- ... -->
</div>
</body>
</html>

当您需要 light 时,只需删除 html 标签内 darkClassName

希望对您有所帮助!

关于javascript - 如何在浏览器上使用 TailwindCSS 强制暗模式?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/72649576/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com