Skip to content

theming/types#

THEME_ID_PATTERN#

const THEME_ID_PATTERN: RegExp;

Ids must be safe to embed in a [data-theme='…'] attribute selector.

RegisteredTheme#

Extends#

Properties#

base#

base: ThemeBase;

Drives fallback, color-scheme, MUI mode and nativeTheme.themeSource.

Inherited from#

ThemeDefinition.base

css?#

optional css?: string;

Raw CSS escape hatch. Sanitized and scoped — see sanitizeCss.ts.

Inherited from#

ThemeDefinition.css

cssInStylesheet#

cssInStylesheet: boolean;

True when the CSS already lives in index.css and must not be emitted.

density?#

optional density?: ThemeDensity;
Inherited from#

ThemeDefinition.density

description?#

optional description?: string;
Inherited from#

ThemeDefinition.description

editorTheme?#

optional editorTheme?: {
  ace?: string;
  monaco?: string;
};
ace?#
optional ace?: string;
monaco?#
optional monaco?: string;
Inherited from#

ThemeDefinition.editorTheme

id#

id: string;
Inherited from#

ThemeDefinition.id

muiPalette?#

optional muiPalette?: ThemeMuiPalette;
Inherited from#

ThemeDefinition.muiPalette

name#

name: string;
Inherited from#

ThemeDefinition.name

owner?#

optional owner?: string;

Plugin id, for unregisterByOwner and for grouping in settings.

plotlyTemplate?#

optional plotlyTemplate?: string;
Inherited from#

ThemeDefinition.plotlyTemplate

preview?#

optional preview?: ThemePreview;
Inherited from#

ThemeDefinition.preview

sanitizedCss?#

optional sanitizedCss?: string;

Sanitized output of css, ready to inject.

shape?#

optional shape?: ThemeShape;
Inherited from#

ThemeDefinition.shape

source#

source: "builtin" | "plugin";

tokens#

tokens: Record<string, string>;

SPARSE — only the tokens that differ from the base built-in. The rest are inherited through the cascade via [data-theme-base='…']. Requiring all ~140 tokens is why nobody would ever write a theme.

Inherited from#

ThemeDefinition.tokens

typography?#

optional typography?: ThemeTypography;
Inherited from#

ThemeDefinition.typography

warnings#

warnings: ThemeWarning[];

ThemeDefinition#

Extended by#

Properties#

base#

base: ThemeBase;

Drives fallback, color-scheme, MUI mode and nativeTheme.themeSource.

css?#

optional css?: string;

Raw CSS escape hatch. Sanitized and scoped — see sanitizeCss.ts.

density?#

optional density?: ThemeDensity;

description?#

optional description?: string;

editorTheme?#

optional editorTheme?: {
  ace?: string;
  monaco?: string;
};
ace?#
optional ace?: string;
monaco?#
optional monaco?: string;

id#

id: string;

muiPalette?#

optional muiPalette?: ThemeMuiPalette;

name#

name: string;

plotlyTemplate?#

optional plotlyTemplate?: string;

preview?#

optional preview?: ThemePreview;

shape?#

optional shape?: ThemeShape;

tokens#

tokens: Record<string, string>;

SPARSE — only the tokens that differ from the base built-in. The rest are inherited through the cascade via [data-theme-base='…']. Requiring all ~140 tokens is why nobody would ever write a theme.

typography?#

optional typography?: ThemeTypography;

ThemeDensity#

Properties#

scale?#

optional scale?: number;

Clamped to [0.85, 1.25]. Multiplies the chrome height tokens.

ThemeMuiPalette#

Properties#

background?#

optional background?: {
  __type?: string;
  paper?: string;
};
__type?#
optional __type?: string;
paper?#
optional paper?: string;

primary?#

optional primary?: string;

secondary?#

optional secondary?: string;

success?#

optional success?: string;

ThemePreview#

Swatch used by the onboarding schematic and the settings theme list.

Properties#

accent#

accent: string;

card#

card: string;

chrome#

chrome: string;

divider#

divider: string;

muted#

muted: string;

sunken#

sunken: string;

text#

text: string;

ThemeShape#

Properties#

borderWidth?#

optional borderWidth?: string;

radiusLg?#

optional radiusLg?: string;

radiusMd?#

optional radiusMd?: string;

radiusPill?#

optional radiusPill?: string;

radiusSm?#

optional radiusSm?: string;

shadow1?#

optional shadow1?: string;

shadow2?#

optional shadow2?: string;

shadow3?#

optional shadow3?: string;

ThemeTypography#

Properties#

fontMono?#

optional fontMono?: string;

fontScale?#

optional fontScale?: number;

Clamped to [0.9, 1.15].

fontUi?#

optional fontUi?: string;

Family list. Must resolve to shipped or system fonts — no @font-face.

fontWeightUi?#

optional fontWeightUi?: number;

Clamped to [300, 600].

ThemeWarning#

Properties#

kind#

kind: ThemeWarningKind;

message#

message: string;

subject#

subject: string;

Token name, CSS property, or selector the warning refers to.

ThemeBase#

type ThemeBase = "light" | "dark";

The theme model shared by built-in themes and plugin-provided skins.

Built-ins and plugin themes are described by the SAME type and flow through the same registry, resolver, MUI builder and settings UI. The only difference is cssInStylesheet: a built-in's CSS already lives in styles/index.css (so it is applied by the CSS parser before the first frame, which is what keeps cold start flash-free), while a plugin theme is compiled to a