Theming

Customize the editor appearance using CSS custom properties. Design on Web ships with light and dark themes and supports full customization of colors, typography, spacing, and layout dimensions.

Light & Dark Themes

Switch between built-in themes using the theme prop on EditorShell.

// Via EditorShell prop
<EditorContext.Provider value={engine}>
  <EditorShell theme="dark" />
</EditorContext.Provider>

// Switch themes dynamically
<EditorShell theme={isDark ? 'dark' : 'light'} />

ℹ️

Default theme

The editor uses the light theme by default if no theme prop is provided.

CSS Custom Properties

All visual aspects of the editor are controlled through CSS custom properties (CSS variables). Override them on the .dow-editor class to apply your custom theme.

/* Core design tokens */
--dow-color-primary: #2563eb;          /* Primary brand color */
--dow-color-primary-hover: #1d4ed8;    /* Primary hover state */
--dow-color-primary-active: #1e40af;   /* Primary active/pressed state */

/* Surface colors */
--dow-color-surface: #ffffff;           /* Panel/card backgrounds */
--dow-color-surface-hover: #f9fafb;    /* Surface hover state */
--dow-color-background: #f5f5f5;       /* Page/canvas area background */

/* Text colors */
--dow-color-text: #1a1a1a;             /* Primary text */
--dow-color-text-secondary: #6b7280;   /* Secondary/muted text */
--dow-color-text-disabled: #9ca3af;    /* Disabled text */
--dow-color-text-on-primary: #ffffff;  /* Text on primary color bg */

/* Border colors */
--dow-color-border: #e5e5e5;           /* Default border */
--dow-color-border-focus: #2563eb;     /* Focused element border */

/* Status colors */
--dow-color-success: #10b981;          /* Success states */
--dow-color-warning: #f59e0b;          /* Warning states */
--dow-color-error: #ef4444;            /* Error states */

/* Typography */
--dow-font-family: system-ui, -apple-system, sans-serif;
--dow-font-size-xs: 11px;
--dow-font-size-sm: 12px;
--dow-font-size-base: 13px;
--dow-font-size-lg: 14px;

/* Layout */
--dow-radius: 8px;                     /* Border radius */
--dow-radius-sm: 4px;                  /* Small radius (buttons) */
--dow-radius-lg: 12px;                 /* Large radius (modals) */
--dow-toolbar-height: 48px;            /* Top toolbar height */
--dow-sidebar-width: 280px;            /* Side panel width */

/* Shadows */
--dow-shadow-sm: 0 1px 2px rgba(0,0,0,0.05);
--dow-shadow-md: 0 4px 6px rgba(0,0,0,0.1);
--dow-shadow-lg: 0 10px 15px rgba(0,0,0,0.1);

Key Variables

Name	Type	Default	Description
`--dow-color-primary`	`color`	`#2563eb`	Primary brand color used for buttons, links, selections
`--dow-color-surface`	`color`	`#ffffff`	Background for panels, cards, and dropdowns
`--dow-color-background`	`color`	`#f5f5f5`	Main page/canvas area background
`--dow-color-text`	`color`	`#1a1a1a`	Primary text color
`--dow-color-border`	`color`	`#e5e5e5`	Border color for panels, inputs, dividers
`--dow-font-family`	`font`	`system-ui`	Base font family for the editor UI
`--dow-radius`	`length`	`8px`	Default border radius
`--dow-toolbar-height`	`length`	`48px`	Height of the top toolbar
`--dow-sidebar-width`	`length`	`280px`	Width of the side panels

Custom Theme

Override CSS variables to match your brand. Place the overrides in your application stylesheet.

/* Override CSS variables on the editor root */
.dow-editor {
  --dow-color-primary: #059669;
  --dow-color-primary-hover: #047857;
  --dow-color-primary-active: #065f46;
  --dow-radius: 12px;
  --dow-font-family: 'Inter', sans-serif;
}

/* Override specific component styles */
.dow-editor .dow-toolbar {
  --dow-toolbar-height: 56px;
}

.dow-editor .dow-sidebar {
  --dow-sidebar-width: 320px;
}

Dark Theme Values

For reference, here are the CSS variable values used by the built-in dark theme. You can override individual values in dark mode using the [data-theme="dark"] selector.

/* Dark theme is applied automatically with theme="dark" */
/* These are the dark theme variable values for reference: */

.dow-editor[data-theme="dark"] {
  --dow-color-primary: #3b82f6;
  --dow-color-primary-hover: #60a5fa;
  --dow-color-surface: #1e1e1e;
  --dow-color-surface-hover: #2a2a2a;
  --dow-color-background: #121212;
  --dow-color-text: #e5e5e5;
  --dow-color-text-secondary: #a3a3a3;
  --dow-color-text-disabled: #525252;
  --dow-color-border: #333333;
  --dow-color-border-focus: #3b82f6;
  --dow-shadow-sm: 0 1px 2px rgba(0,0,0,0.3);
  --dow-shadow-md: 0 4px 6px rgba(0,0,0,0.4);
  --dow-shadow-lg: 0 10px 15px rgba(0,0,0,0.5);
}

Theme Examples

Here are examples of custom branded themes:

/* Example: Corporate green theme */
.dow-editor {
  --dow-color-primary: #059669;
  --dow-color-primary-hover: #047857;
  --dow-color-primary-active: #065f46;
  --dow-color-text-on-primary: #ffffff;
  --dow-color-surface: #f0fdf4;
  --dow-color-background: #ecfdf5;
  --dow-color-border: #bbf7d0;
  --dow-radius: 6px;
  --dow-font-family: 'Nunito', sans-serif;
}

/* Example: Rounded playful theme */
.dow-editor.theme-playful {
  --dow-color-primary: #8b5cf6;
  --dow-color-primary-hover: #7c3aed;
  --dow-radius: 16px;
  --dow-radius-sm: 8px;
  --dow-radius-lg: 24px;
  --dow-font-family: 'Quicksand', sans-serif;
}

💡

Scoping themes

You can scope themes to specific instances by using a wrapper class instead of targeting .dow-editor globally. This is useful if you have multiple editor instances with different themes on the same page.

CSS Imports

The editor requires three CSS files to render correctly:

@design-on-web/ui/themes/variables.css — defines all CSS custom properties (design tokens)
@design-on-web/ui/themes/light.css or dark.css — applies theme-specific values
@design-on-web/ui/components/EditorShell.css — component styles that reference the tokens

⚠️

Import order

Always import variables.css before the theme file. Your custom overrides should come after all three imports.