Designer uses the [shadcn/ui](https://ui.shadcn.com/docs/theming) theming system. How you theme it depends on the stylesheet entry point you use.

## Standalone apps

If you import the full stylesheet, theme Designer with `--ds-*` variables.

```tsx
import "@shadcn/designer/styles.css";
```

Add the following CSS variables to your `index.css` file. Update the values to match your theme.

```css
@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);
}
```

## Existing Tailwind apps

If your app already has Tailwind CSS 4, use the core stylesheet and let your app generate Designer's utility classes.

```css
@import "tailwindcss";
@import "@shadcn/designer/core.css";

@source "../node_modules/@shadcn/designer";
```

In this setup, Designer uses your app's semantic Tailwind variables. Configure those variables in your app theme.

```css
@theme inline {
  --color-background: var(--background);
  --color-foreground: var(--foreground);
  --color-card: var(--card);
  --color-card-foreground: var(--card-foreground);
  --color-popover: var(--popover);
  --color-popover-foreground: var(--popover-foreground);
  --color-primary: var(--primary);
  --color-primary-foreground: var(--primary-foreground);
  --color-muted: var(--muted);
  --color-muted-foreground: var(--muted-foreground);
  --color-accent: var(--accent);
  --color-accent-foreground: var(--accent-foreground);
  --color-destructive: var(--destructive);
  --color-border: var(--border);
  --color-input: var(--input);
  --color-ring: var(--ring);
}

:root {
  --background: oklch(1 0 0);
  --foreground: oklch(0.145 0 0);
  --card: oklch(1 0 0);
  --card-foreground: oklch(0.145 0 0);
  --popover: oklch(1 0 0);
  --popover-foreground: oklch(0.145 0 0);
  --primary: oklch(0.205 0 0);
  --primary-foreground: oklch(0.985 0 0);
  --muted: oklch(0.97 0 0);
  --muted-foreground: oklch(0.556 0 0);
  --accent: oklch(0.97 0 0);
  --accent-foreground: oklch(0.205 0 0);
  --destructive: oklch(0.577 0.245 27.325);
  --border: oklch(0.922 0 0);
  --input: oklch(0.97 0 0);
  --ring: oklch(0.708 0 0);
}
```

## Scoped Designer theme

To give Designer a different theme from the rest of your app while using `core.css`, scope variable overrides to a wrapper.

```tsx
import { Designer } from "@shadcn/designer";

export function MyDesigner() {
  return (
    <div className="designer-theme">
      <Designer className="h-svh">
        {/* ... */}
      </Designer>
    </div>
  );
}
```

```css
.designer-theme {
  --background: oklch(1 0 0);
  --foreground: oklch(0.145 0 0);
  --card: oklch(1 0 0);
  --card-foreground: oklch(0.145 0 0);
  --popover: oklch(1 0 0);
  --popover-foreground: oklch(0.145 0 0);
  --primary: oklch(0.205 0 0);
  --primary-foreground: oklch(0.985 0 0);
  --muted: oklch(0.97 0 0);
  --muted-foreground: oklch(0.556 0 0);
  --accent: oklch(0.97 0 0);
  --accent-foreground: oklch(0.205 0 0);
  --destructive: oklch(0.577 0.245 27.325);
  --border: oklch(0.922 0 0);
  --input: oklch(0.97 0 0);
  --ring: oklch(0.708 0 0);
}

.dark .designer-theme {
  --background: oklch(0.145 0 0);
  --foreground: oklch(0.985 0 0);
  --card: oklch(0.205 0 0);
  --card-foreground: oklch(0.985 0 0);
  --popover: oklch(0.269 0 0);
  --popover-foreground: oklch(0.985 0 0);
  --primary: oklch(0.922 0 0);
  --primary-foreground: oklch(0.205 0 0);
  --muted: oklch(0.269 0 0);
  --muted-foreground: oklch(0.708 0 0);
  --accent: oklch(0.371 0 0);
  --accent-foreground: oklch(0.985 0 0);
  --destructive: oklch(0.704 0.191 22.216);
  --border: oklch(1 0 0 / 10%);
  --input: oklch(1 0 0 / 15%);
  --ring: oklch(0.556 0 0);
}
```

With `core.css`, scope the variables that your Tailwind theme maps to semantic utilities. Do not scope generated utility classes such as `.bg-background` or `.border-input`.