/** * Theme model — two layers, one attribute. * * Layer 1, static: a theme is a CSS block `[theme=""] { --token: … }` * in the app's stylesheets; switching sets the `theme` attribute on * `` (the same attribute pd-shared-styles uses for `light`/`dark`). * Layer 2, dynamic: a style editor overrides single tokens as inline custom * properties on `` — inline beats every block, derived tokens in CSS * follow. A custom design is therefore always "base theme + overrides". */ export type ThemeTokens = Record<`--${string}`, string>; export interface ActiveTheme { /** Value of the `theme` attribute, e.g. "blue", "dark", "wood". */ id: string; /** Editor overrides as inline custom properties on ``; absent = none. */ overrides?: ThemeTokens; } export interface ThemeConfig { /** localStorage key of the mirror (app prefix, like the locale key). */ storageKey: string; /** Theme id applied when nothing valid is stored. */ fallback: string; /** * Token whose computed colour is written to `` * on every change (browser chrome on mobile). */ themeColorToken?: `--${string}`; } export declare const PD_THEME_CHANGED_EVENT = "pd-theme-changed"; export declare const THEME_ATTRIBUTE = "theme"; //# sourceMappingURL=theme-model.d.ts.map