/* Exported from WebberUI Theme Studio */
:root {
--color-fd-primary: #0f172a;
--color-fd-primary-foreground: #ffffff;
--color-fd-ring: #0f172a;
--color-fd-background: #ffffff;
--color-fd-foreground: #0a0a0a;
--color-fd-card: #ffffff;
--color-fd-card-foreground: #0a0a0a;
--color-fd-popover: #ffffff;
--color-fd-popover-foreground: #0a0a0a;
--color-fd-muted: #f5f5f5;
--color-fd-muted-foreground: #787878;
--color-fd-accent: #f0f0f0;
--color-fd-accent-foreground: #0a0a0a;
--color-fd-secondary: #f2f2f2;
--color-fd-secondary-foreground: #0a0a0a;
--color-fd-border: #e0e0e0;
--wb-radius: 8px;
--wb-radius-sm: 4px;
--wb-radius-lg: 14px;
--wb-font-family: -apple-system, "Noto Sans TC", "PingFang TC", "Microsoft JhengHei", sans-serif;
--wb-font-size: 16px;
--wb-density: 1;
--wb-space: 0.250rem;
--wb-duration-fast: 200ms;
--wb-duration-normal: 400ms;
--wb-duration-slow: 800ms;
}
Paste the export into your project's globals.css and every WebberUI component you installed through shadcn picks up the same theme.
Note: components colored through the semantic variables (fd-*) follow completely; a few visuals that deliberately pin their own scale (dark data cards, tinted background effects) keep their original design. Pro can save several brand themes.