Skip to Content

Theme

主题只暴露语义 token，不鼓励业务直接绑颜色。

VekUI 使用 Tailwind v4 的 @theme 和 CSS 变量声明语义 token。 组件只消费 token class，避免把颜色散落到组件实现里。

Token map

主题变量按用途分组，而不是按颜色名堆叠。

Surface

--color-background--color-foreground--color-card--color-popover--color-border

Action

--color-primary--color-primary-foreground--color-secondary--color-accent--color-ring

Feedback

--color-muted--color-muted-foreground--color-destructive--color-destructive-foreground

Tailwind v4

组件使用的是语义 class，而不是固定色值。

@import "tailwindcss";

@theme {
  --color-background: hsl(var(--background));
  --color-foreground: hsl(var(--foreground));
  --color-primary: hsl(var(--primary));
}

推荐组件只使用 bg-background、text-foreground、bg-primary、border-border 这类语义 token。