@studiocms/ui
Version:
The UI library for StudioCMS. Includes the layouts & components we use to build StudioCMS.
50 lines (49 loc) • 2.02 kB
TypeScript
type Theme = 'dark' | 'light' | 'system';
type ThemeChangeCallback = (newTheme: Theme, oldTheme: Theme) => void;
/**
* A helper to toggle, set and get the current StudioCMS UI theme.
*/
declare class ThemeHelper {
private themeManagerElement;
private observer;
private themeChangeCallbacks;
/**
* A helper to toggle, set and get the current StudioCMS UI theme.
* @param themeProvider The element that should carry the data-theme attribute (replaces the document root)
*/
constructor(themeProvider?: HTMLElement);
/**
* Get the current theme.
* @param {boolean} resolveSystemTheme Whether to resolve the `system` theme to the actual theme (`dark` or `light`)
* @returns {Theme} The current theme.
*/
getTheme: <T extends boolean>(resolveSystemTheme?: T) => T extends true ? "dark" | "light" : Theme;
/**
* Sets the current theme.
* @param theme The new theme. One of `dark`, `light` or `system`.
*/
setTheme: (theme: Theme) => void;
/**
* Toggles the current theme.
*
* If the theme is set to `system` (or no theme is set via the root element),
* the theme is set depending on the user's color scheme preference (set in the browser).
*/
toggleTheme: () => void;
/**
* Register an element to act as a toggle! When clicked, it will toggle the theme.
* @param toggle The HTML element that should act as the toggle
*/
registerToggle: (toggle: HTMLElement | null) => void;
/**
* Allows for adding a callback that gets called whenever the theme changes.
* @param callback The callback to be executed
*/
onThemeChange: (callback: ThemeChangeCallback) => void;
/**
* Simply gets the first mutation and calls all registered callbacks.
* @param mutations The mutations array from the observer. Due to the specified options, this will always be a 1-length array,
*/
private themeManagerMutationHandler;
}
export { ThemeHelper, type Theme };