@mocanvas/editor · class
declare class ThemeManagerHolds the themes and the colour mode, reactively.
Every read goes through a signal, so a shape that resolves its display values inside a reactive context re-renders by itself when the app swaps a palette or flips to dark — nothing has to be invalidated by hand.
Methods · 14
constructor(editor: ThemeManagerHost, options?: ThemeManagerOptions)dispose(): voidStop following the system colour scheme.
getColorMode(): TLColorModeThe mode the current theme resolves in: what is actually painted.
getColors(): TLThemeColorsThe ramp being painted: the current theme's colours for the current mode.
getColorScheme(): TLColorSchemeThe mode *setting* — "system" included, unresolved.
getCurrentTheme(): TLThemeThe theme the editor is painting with.
getCurrentThemeId(): TLThemeIdThe id of the current theme.
getTheme(id: TLThemeId): TLTheme | undefinedOne registered theme, or undefined if that id was never registered.
getThemes(): TLThemesEvery registered theme, by id.
setColorScheme(scheme: TLColorScheme): voidPin the colour mode, or hand it back to the host window with "system".
setCurrentTheme(id: TLThemeId): voidSwitch to a registered theme. Ids that are not registered are ignored — a board keeps painting rather than losing its palette to a typo.
updateTheme(id: TLThemeId, patch: TLThemePatch): voidChange part of one theme. colors is merged one ramp at a time, so
updateTheme("default", { colors: { light: { blue: … } } }) keeps the dark
ramp and every other light entry.
Registers the theme if the id is new, which is how an app adds a palette after the editor is already running.
updateThemes(patch: Partial<Record<TLThemeId, TLThemePatch>>): voidThe same, for several themes at once — one atom write, so a whole palette swap repaints in a single frame.
watchSystemColorScheme(win: TLColorSchemeWindow | null | undefined): voidFollow a window's prefers-color-scheme. Called with the editor's own
window on construction; pass another one (or null) to redirect it.
mocanvas is built by Symbio. Free for non-commercial, non-profit and development use; commercial use needs an agreement. Not affiliated with or endorsed by tldraw.