# Custom theme

> Override --primary and --secondary tokens for a third-party brand.

Source: https://docs.docmosaic.com/docs/examples/custom-theme

DocMosaic reads every accent colour from CSS custom properties - the same `--primary`, `--secondary`, `--accent`, `--destructive` shape every shadcn app already uses. Rebrand the editor by overriding the variables; there's no JavaScript theme provider to wire.

The fastest path: change `--primary` and let everything else inherit. The exhaustive path: override the whole semantic surface.

## One-variable rebrand

```css
/* my-app/styles/editor-brand.css */
:root {
    --primary: 79 70 229; /* indigo-600 */
    --primary-foreground: 255 255 255;
    --secondary: 224 231 255; /* indigo-100 */
    --secondary-foreground: 30 27 75;
}
```

Then import it once at the boundary:

```tsx
'use client';

import { Editor } from '@docmosaic/react';
import '@docmosaic/react/styles.css';
import './editor-brand.css';

export default function BrandedEditor() {
    return (
        <Editor.Root>
            <Editor.Properties />
            <Editor.Toolbar />
            <Editor.Pages />
            <Editor.Canvas>
                <Editor.Section />
            </Editor.Canvas>
        </Editor.Root>
    );
}
```

Every button, focus ring, selected-section border, and toolbar accent now reflects indigo. The structural tokens (`--radius`, `--editor-radius-section`, `--editor-shadow-section`) are untouched - you only changed the accent.

<Callout type="info">
    Color tokens are stored as **space-separated RGB triplets** (`56 29 42`) so they compose with the modern `rgb(R G B / <alpha-value>)` syntax. Don't write hex values - they won't work with the editor's alpha-aware components.
</Callout>

## Full custom palette

For an exhaustive override, ship `base.css` only and supply every semantic token:

```tsx
// Don't import the bundled brand theme - start from the structural base.
import '@docmosaic/react/styles/base.css';
import './my-theme.css';
```

```css
/* my-theme.css */
:root {
    --background: 250 250 252;
    --foreground: 15 23 42;
    --card: 255 255 255;
    --card-foreground: 15 23 42;
    --primary: 79 70 229;
    --primary-foreground: 255 255 255;
    --secondary: 224 231 255;
    --secondary-foreground: 15 23 42;
    --muted: 244 244 245;
    --muted-foreground: 113 113 122;
    --accent: 34 197 94;
    --accent-foreground: 255 255 255;
    --destructive: 220 38 38;
    --destructive-foreground: 255 255 255;
    --border: 228 228 231;
    --input: 228 228 231;
    --ring: 79 70 229;
    --radius: 0.5rem;
}
```

## Related

-   [Theming](/docs/theming) - full token surface
-   [Dark mode recipe](/docs/recipes/dark-mode) - the bundled `.dark` scope