We use the shadcn/ui theming system to style the designer. You can bring in your own theme using CSS variables.
Use the -ds prefix for all CSS variables.
Add the following CSS variables to your index.css file. Update the values to match your theme.
@import "tailwindcss";
:root {
--ds-radius: 0.625rem;
--ds-background: oklch(1 0 0);
--ds-foreground: oklch(0.145 0 0);
--ds-card: oklch(1 0 0);
--ds-card-foreground: oklch(0.145 0 0);
--ds-popover: oklch(1 0 0);
--ds-popover-foreground: oklch(0.145 0 0);
--ds-primary: oklch(0.205 0 0);
--ds-primary-foreground: oklch(0.985 0 0);
--ds-muted: oklch(0.97 0 0);
--ds-muted-foreground: oklch(0.556 0 0);
--ds-accent: oklch(0.97 0 0);
--ds-accent-foreground: oklch(0.205 0 0);
--ds-destructive: oklch(0.577 0.245 27.325);
--ds-border: oklch(0.922 0 0);
--ds-input: oklch(0.97 0 0);
--ds-ring: oklch(0.708 0 0);
}
.dark {
--ds-background: oklch(0.145 0 0);
--ds-foreground: oklch(0.985 0 0);
--ds-card: oklch(0.205 0 0);
--ds-card-foreground: oklch(0.985 0 0);
--ds-popover: oklch(0.269 0 0);
--ds-popover-foreground: oklch(0.985 0 0);
--ds-primary: oklch(0.922 0 0);
--ds-primary-foreground: oklch(0.205 0 0);
--ds-muted: oklch(0.269 0 0);
--ds-muted-foreground: oklch(0.708 0 0);
--ds-accent: oklch(0.371 0 0);
--ds-accent-foreground: oklch(0.985 0 0);
--ds-destructive: oklch(0.704 0.191 22.216);
--ds-border: oklch(1 0 0 / 10%);
--ds-input: oklch(1 0 0 / 15%);
--ds-ring: oklch(0.556 0 0);
}