@tldraw/editor
Version:
tldraw infinite canvas SDK (editor).
8 lines (7 loc) • 5.53 kB
Source Map (JSON)
{
"version": 3,
"sources": ["../../../../../src/lib/editor/managers/ThemeManager/ThemeManager.ts"],
"sourcesContent": ["import { Atom, atom, computed } from '@tldraw/state'\nimport { TLTheme, TLThemeId, TLThemes } from '@tldraw/tlschema'\nimport { structuredClone } from '@tldraw/utils'\nimport type { Editor } from '../../Editor'\nimport { DEFAULT_THEME } from './defaultThemes'\n\n/**\n * Resolve a partial set of user-provided themes into a complete `TLThemes`\n * record by merging with `DEFAULT_THEME`. The result is suitable for passing to\n * `registerColorsFromThemes`, `registerFontsFromThemes`, and the\n * `ThemeManager` constructor.\n *\n * @public\n */\nexport function resolveThemes(themes?: Partial<TLThemes>): TLThemes {\n\treturn { default: DEFAULT_THEME, ...themes } as TLThemes\n}\n\n/**\n * Manages the editor's color themes.\n *\n * Stores named theme definitions (each containing light and dark color palettes\n * alongside shared properties like font size). The current theme is resolved by\n * combining the current theme name with the user's color mode preference.\n *\n * **Terminology:**\n * - **Theme** (`TLTheme`): A named set of colors and typographic values for both light and dark modes.\n * - **Color mode** (`'light' | 'dark'`): The resolved appearance mode, derived from the user's\n * `colorScheme` preference (`'light' | 'dark' | 'system'`). Access via `getColorMode()`.\n *\n * @public\n */\nexport class ThemeManager {\n\tprivate readonly _themes: Atom<TLThemes>\n\tprivate readonly _currentThemeId: Atom<TLThemeId>\n\n\tconstructor(\n\t\tprivate readonly editor: Editor,\n\t\toptions: {\n\t\t\tthemes: TLThemes\n\t\t\tinitial: TLThemeId\n\t\t}\n\t) {\n\t\tthis._themes = atom('ThemeManager._definitions', options.themes)\n\t\tthis._currentThemeId = atom('ThemeManager._currentThemeName', options.initial)\n\t}\n\n\t/** Get the current color mode based on the user's dark mode preference. */\n\t@computed getColorMode(): 'light' | 'dark' {\n\t\treturn this.editor.user.getIsDarkMode() ? 'dark' : 'light'\n\t}\n\n\t/** Get all registered theme definitions. */\n\tgetThemes(): TLThemes {\n\t\treturn this._themes.get()\n\t}\n\n\t/** Get a single theme definition by id. */\n\tgetTheme(id: TLThemeId): TLTheme | undefined {\n\t\treturn this._themes.get()[id]\n\t}\n\n\t/** Get the id of the current theme. */\n\tgetCurrentThemeId(): TLThemeId {\n\t\treturn this._currentThemeId.get()\n\t}\n\n\tgetCurrentTheme(): TLTheme {\n\t\treturn this._themes.get()[this.getCurrentThemeId()]!\n\t}\n\n\t/** Set the current theme by id. The theme must have been previously registered. */\n\tsetCurrentTheme(id: TLThemeId): void {\n\t\tif (process.env.NODE_ENV !== 'production') {\n\t\t\tif (!(id in this._themes.get())) {\n\t\t\t\tconsole.warn(\n\t\t\t\t\t`Theme '${id}' not found. Available themes: ${Object.keys(this._themes.get()).join(', ')}`\n\t\t\t\t)\n\t\t\t}\n\t\t}\n\n\t\tthis._currentThemeId.set(id)\n\t}\n\n\t/** Replace all theme definitions, or update them via a callback that receives a deep copy. */\n\tupdateThemes(themes: TLThemes | ((themes: TLThemes) => TLThemes)): void {\n\t\tthis._themes.update((prev) => {\n\t\t\tconst next = typeof themes === 'function' ? themes(structuredClone(prev)) : themes\n\t\t\tif (process.env.NODE_ENV !== 'production') {\n\t\t\t\tif (!('default' in next)) {\n\t\t\t\t\tconsole.warn(\"The 'default' theme cannot be removed.\")\n\t\t\t\t\treturn prev\n\t\t\t\t}\n\t\t\t}\n\t\t\t// If the current theme was removed, fall back to 'default'\n\t\t\tif (!(this._currentThemeId.get() in next)) {\n\t\t\t\tthis._currentThemeId.set('default')\n\t\t\t}\n\t\t\treturn next\n\t\t})\n\t}\n\n\t/** Register or update a named theme definition. */\n\tupdateTheme(theme: TLTheme): void {\n\t\tthis._themes.update((prev) => ({\n\t\t\t...prev,\n\t\t\t[theme.id]: theme,\n\t\t}))\n\t}\n\n\t/** Clean up any resources held by the manager. */\n\tdispose() {\n\t\t// currently no subscriptions to tear down, but here for consistency\n\t\t// with the manager pattern and for future use\n\t}\n}\n"],
"mappings": ";;;;;;;;;;AAAA,SAAe,MAAM,gBAAgB;AAErC,SAAS,uBAAuB;AAEhC,SAAS,qBAAqB;AAUvB,SAAS,cAAc,QAAsC;AACnE,SAAO,EAAE,SAAS,eAAe,GAAG,OAAO;AAC5C;AAgBO,MAAM,aAAa;AAAA,EAIzB,YACkB,QACjB,SAIC;AALgB;AAMjB,SAAK,UAAU,KAAK,6BAA6B,QAAQ,MAAM;AAC/D,SAAK,kBAAkB,KAAK,kCAAkC,QAAQ,OAAO;AAAA,EAC9E;AAAA,EARkB;AAAA,EAJD;AAAA,EACA;AAAA,EAcP,eAAiC;AAC1C,WAAO,KAAK,OAAO,KAAK,cAAc,IAAI,SAAS;AAAA,EACpD;AAAA;AAAA,EAGA,YAAsB;AACrB,WAAO,KAAK,QAAQ,IAAI;AAAA,EACzB;AAAA;AAAA,EAGA,SAAS,IAAoC;AAC5C,WAAO,KAAK,QAAQ,IAAI,EAAE,EAAE;AAAA,EAC7B;AAAA;AAAA,EAGA,oBAA+B;AAC9B,WAAO,KAAK,gBAAgB,IAAI;AAAA,EACjC;AAAA,EAEA,kBAA2B;AAC1B,WAAO,KAAK,QAAQ,IAAI,EAAE,KAAK,kBAAkB,CAAC;AAAA,EACnD;AAAA;AAAA,EAGA,gBAAgB,IAAqB;AACpC,QAAI,QAAQ,IAAI,aAAa,cAAc;AAC1C,UAAI,EAAE,MAAM,KAAK,QAAQ,IAAI,IAAI;AAChC,gBAAQ;AAAA,UACP,UAAU,EAAE,kCAAkC,OAAO,KAAK,KAAK,QAAQ,IAAI,CAAC,EAAE,KAAK,IAAI,CAAC;AAAA,QACzF;AAAA,MACD;AAAA,IACD;AAEA,SAAK,gBAAgB,IAAI,EAAE;AAAA,EAC5B;AAAA;AAAA,EAGA,aAAa,QAA2D;AACvE,SAAK,QAAQ,OAAO,CAAC,SAAS;AAC7B,YAAM,OAAO,OAAO,WAAW,aAAa,OAAO,gBAAgB,IAAI,CAAC,IAAI;AAC5E,UAAI,QAAQ,IAAI,aAAa,cAAc;AAC1C,YAAI,EAAE,aAAa,OAAO;AACzB,kBAAQ,KAAK,wCAAwC;AACrD,iBAAO;AAAA,QACR;AAAA,MACD;AAEA,UAAI,EAAE,KAAK,gBAAgB,IAAI,KAAK,OAAO;AAC1C,aAAK,gBAAgB,IAAI,SAAS;AAAA,MACnC;AACA,aAAO;AAAA,IACR,CAAC;AAAA,EACF;AAAA;AAAA,EAGA,YAAY,OAAsB;AACjC,SAAK,QAAQ,OAAO,CAAC,UAAU;AAAA,MAC9B,GAAG;AAAA,MACH,CAAC,MAAM,EAAE,GAAG;AAAA,IACb,EAAE;AAAA,EACH;AAAA;AAAA,EAGA,UAAU;AAAA,EAGV;AACD;AAnEW;AAAA,EAAT;AAAA,GAhBW,aAgBF;",
"names": []
}