Skip to content

暗黑模式

Versakit 基于 Tailwind CSS 实现了完善的暗黑模式支持,让你的应用轻松适应不同光线环境。

使用方法

切换暗黑模式

你可以通过添加或移除 HTML 根元素上的 dark 类名来控制暗黑模式:

html
<!-- 启用暗黑模式 -->
<html class="dark">
	<head></head>
	<body></body>
</html>

配置 Tailwind CSS

确保在 tailwind.config.js 中正确配置暗黑模式:

js
module.exports = {
	darkMode: 'class', // 使用 class 策略来切换暗黑模式
	// 其他配置...
}

组件适配

Versakit 的所有组件都已适配暗黑模式,当添加 dark 类名时,组件会自动切换到对应的暗色主题样式,无需额外配置。

自定义暗黑主题

你还可以通过主题系统自定义暗黑模式下的颜色方案,详见主题定制章节。