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

/* 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:

'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.

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.

Full custom palette

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

// Don't import the bundled brand theme - start from the structural base.
import '@docmosaic/react/styles/base.css';
import './my-theme.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;
}

Theming - full token surface
Dark mode recipe - the bundled .dark scope

Custom theme

One-variable rebrand

Full custom palette

Related

On this page