VersaKit

Appearance

暗黑模式 ​

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 类名时，组件会自动切换到对应的暗色主题样式，无需额外配置。

自定义暗黑主题 ​

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