Theming

The editor is themed with CSS custom properties. Set them in your own stylesheet on .stesura (the class on the editor root) or on any ancestor of the editor. The one exception is --editor-accent-color, which only works on :root (see Accent and icons).


/* your-theme.css, loaded after @stesura/core/styles */
.stesura {
  --stesura-canvas-solid: #fffef5;
  --stesura-page-border-color: rgba(0, 0, 0, 0.2);
}
 
:root {
  --editor-accent-color: oklch(0.65 0.19 55);
}


import "./your-theme.css";

Every variable is optional. Without them the editor uses its built-in light and dark defaults.

Canvas background

The canvas is the surface the pages sit on. It spans the toolbar’s tab strip and the margins around each page. It is either a solid color or a two-stop linear gradient. Light and dark mode are configured independently: every variable has a -dark counterpart, so theming one mode never changes the other.

Canvas colors must be opaque. The gaps between pages must be opaque (see What the gradient covers), so the editor rejects translucent values such as rgba(…, 0.5) or #fff8.

Solid


.stesura {
  --stesura-canvas-solid: #fffef5;
  --stesura-canvas-solid-dark: #0b1220;
}

Gradient

Opt in by setting both stops for that mode. direction is optional and defaults to to bottom right.


.stesura {
  --stesura-canvas-gradient-from: #ffffff;
  --stesura-canvas-gradient-to: #ffd6d6;
  --stesura-canvas-gradient-direction: to bottom right;
 
  --stesura-canvas-gradient-from-dark: #1a1416;
  --stesura-canvas-gradient-to-dark: #4a1f24;
  --stesura-canvas-gradient-direction-dark: to bottom right;
}

direction must be one of the CSS to … keywords: to top, to bottom, to left, to right, to top left, to top right, to bottom left, to bottom right. Angles are not supported. Any other value disables the gradient for that mode.

Colors can use any CSS color syntax (hex, rgb(), named colors, oklch(), color-mix()). The editor normalizes them to sRGB and interpolates in sRGB.

Resolution order

For each mode, the editor uses the first of these that applies:

the gradient, if both stops are valid opaque colors and direction is valid or unset
that mode’s solid color
the built-in default

So a gradient in light mode with a solid color in dark mode (or the reverse) works.

What the gradient covers

The gradient is screen-space: it is anchored to the editor’s box, not to the document, so it does not scroll with the pages. It is painted behind the toolbar’s tab strip and the margins around the pages. The raised toolbar ribbon keeps its own opaque background.

The gaps between pages look like windows onto the gradient, but they are opaque: content flows behind mid-table page breaks and would otherwise show through. Each gap paints the slice of the gradient at its on-screen position. That is why the gradient is declared as from/to/direction rather than a free CSS background-image: the slice has to be computable.

The note and header/footer sub-editors paint the gradient across their own panel instead of continuing the canvas behind them.

Changing the theme at runtime

The editor reads the canvas variables on mount and again whenever class or data-theme changes on <html>, or class changes on the editor root. To apply other runtime changes (a swapped stylesheet, an OS color-scheme switch without a class change), toggle one of those attributes or remount the editor.

Pages


.stesura {
  --stesura-page-border-color: rgba(0, 0, 0, 0.2);
  --stesura-page-shadow-color: rgba(0, 0, 0, 0.08);
}

Both default to transparent: pages have no border or shadow until a theme sets them. The border is a 1px solid line; the shadow is a 6px blur.

The page background is not themeable. It comes from the document’s docBgColor attribute (white by default), so it round-trips through DOCX and is edited in the UI.

Accent and icons


:root {
  --editor-accent-color: oklch(0.65 0.19 55);
}

Set the accent on :root, in a stylesheet loaded after @stesura/core/styles. The icon layer variables are declared on :root as var(--editor-accent-color), and a custom property resolves var() where it is declared. So an accent set on .stesura never reaches the icons. To theme one editor only, set the --editor-icon-* variables themselves on .stesura.

Each path in an icon names a semantic layer. --editor-icon-outline-* layers paint strokes, the rest paint fills:

Variable	Default	Purpose
`--editor-icon-outline-primary`	`currentColor`	Glyph strokes. Icons follow button text color, including hover and disabled states.
`--editor-icon-outline-secondary`	accent	Stroked accents: indent arrows, line-height marks.
`--editor-icon-accent-primary/-secondary/-tertiary`	accent	Filled emphasis marks such as list numerals and bullets.
`--editor-icon-fill-primary`	`currentColor`	Solid glyph surfaces.
`--editor-icon-fill-secondary/-tertiary`	`transparent`	Optional interior surfaces.
`--editor-icon-constructive` / `--editor-icon-destructive`	green / red	Table actions: insert vs delete.

The PDF and Word brand marks use --editor-icon-brand-pdf and --editor-icon-brand-word. Leave them alone: they are logo colors, and the accent deliberately doesn’t touch them.

Icon set

The iconSet prop picks the icon geometry: "fluent" (default, Microsoft Fluent) or "classic" (the original Stesura set, completed with lucide). Both use the layer variables above.


<StesuraEditor iconSet="classic" /* … */ />

Comments


.stesura {
  --stesura-comment-bg: oklch(71.4% 0.203 305.504 / 20%);
  --stesura-comment-boundary-color: oklch(71.4% 0.203 305.504 / 40%);
  --stesura-comment-pending-comment-bg: oklch(71.4% 0.203 305.504 / 80%);
  --stesura-comment-selected-comment-bg: oklch(71.4% 0.203 305.504);
}

The values shown are the defaults: commented text, the range boundary markers, a comment being drafted, and the selected thread.

Dark mode

The editor is in dark mode when:

an ancestor of the editor, or the editor root, has the .dark class (the next-themes convention with attribute="class"), or
no .dark class is present, <html> doesn’t have the .light class, and the OS prefers dark.

data-theme is not read. With a class-based theme switcher, use attribute="class".

In dark mode the editor reads the -dark canvas variables itself, so you don’t need a .dark { … } block for them. Other variables (pages, icons, comments) have a single value: override them inside .dark if dark mode needs different ones.

PDF export

@stesura/pdf-export-client forces a flat white canvas and hides the page border and shadow during export, whatever the theme. Browser printing (Ctrl+P) is not affected.

Variables the editor writes

The editor writes these on the editor root. Read them in your own UI; don’t set them in a theme, they are overwritten.

Variable	Value
`--stesura-canvas-surface`	The canvas’s flat color: the solid color, or the gradient’s `from` stop. Use it where a plain background should match the canvas.
`--stesura-canvas-gradient`	The active gradient as a CSS `linear-gradient(…)`, or `none` for a solid canvas.