@adaptabletools/adaptable/src/AdaptableState/ThemeState.d.ts

Powerful data-agnostic HTML5 AG Grid extension which provides advanced, cutting-edge functionality to meet all DataGrid requirements

import { BaseState } from './BaseState';
import { AdaptableObject } from './Common/AdaptableObject';
import { TypeHint } from './Common/Types';
/**
 * Theme section of Adaptable State
 */
export interface ThemeState extends BaseState {
    /**
     * Name of current theme (or theme to set at startup); leave blank if using 'Light Theme', set to 'dark' for 'Dark Theme' or provide name of Custom Theme
     */
    CurrentTheme?: TypeHint<string, 'light' | 'dark' | 'os'>;
    /**
     * Which, if any, of the 2 themes shipped by Adaptable should be available; leave unset to provide both, or an empty array to provide neither.
     */
    SystemThemes?: (AdaptableTheme | string)[];
    /**
     * Custom themes (of type AdaptableTheme) provided by developers
     */
    UserThemes?: AdaptableTheme[];
}
/**
 * Used for creating User (i.e. Custom) Themes
 */
export interface AdaptableTheme extends AdaptableObject {
    /**
     * Name of the Theme
     */
    Name: string;
    /**
     * Description of Theme - will appear in Theme Toolbar and Toolpanel
     */
    Description: string;
    /**
     * Ag Grid theme to apply when loading theme; relevant only when using the legacy AG Grid themes
     *
     * @deprecated no longer used with the new AG Grid Theming API
     */
    AgGridClassName?: string;
    /**
     * Variables to be applied at runtime
     */
    CSSVariables?: Record<string, string>;
    /**
     * Base theme variant to derive custom theme from.
     * Use `light` to inherit from Adaptable Light Theme or `dark` for Adaptable Dark Theme.
     * When creating custom themes, specifying a variant ensures proper inheritance of base theme styles.
     */
    Variant?: 'light' | 'dark';
    /**
     * AG Grid theme mode to apply when this theme is selected.
     * Valid values are `light`, `dark`, `dark-blue` or any custom theme mode defined in AG Grid.
     * When set, adds a data-ag-theme-mode attribute to the document body.
     *
     * @see https://www.ag-grid.com/javascript-data-grid/theming-colors/#theme-modes
     */
    AgThemeMode?: TypeHint<string, 'light' | 'dark' | 'dark-blue'>;
}