主题定制

DUI 使用 CSS 变量实现主题系统，你可以轻松覆盖默认样式。

主题变量

覆盖主题

在你的全局 CSS 中重新定义变量：

/* src/styles/theme.css */
:root {
  --dui-primary: #8b5cf6;  /* 紫色主题 */
  --dui-radius-md: 16px;   /* 更大的圆角 */
  --dui-shadow: 0 10px 25px rgba(0,0,0,0.1);
}

@import '@dui/core/dist/style.css';

暗色模式

利用 CSS 媒体查询或 class 切换启用暗色模式：

/* 媒体查询方式（自动跟随系统） */
@media (prefers-color-scheme: dark) {
  :root {
    --dui-bg: #0f172a;
    --dui-text: #f1f5f9;
  }
}

/* class 方式（手动切换） */
.dark {
  --dui-bg: #0f172a;
  --dui-text: #f1f5f9;
}

组件级定制

你也可以针对单个组件使用 @apply：

.custom-button {
  @apply bg-gradient-to-r from-purple-600 to-pink-600;
}