theme-vir/dist/color/color-theme-override.d.ts

Create an entire web theme.

import { type CssVarName } from 'lit-css-vars';
import { type RequireAtLeastOne } from 'type-fest';
import { themeDefaultKey, type ColorInit, type ColorTheme, type ColorThemeInit, type NoRefColorInit } from './color-theme.js';
/**
 * Input for {@link defineColorThemeOverride} color overrides.
 *
 * @category Internal
 */
export type ColorThemeOverrideInit<Theme extends ColorTheme = ColorTheme> = Omit<Partial<{
    [ColorName in keyof Theme['colors']]: ColorInit;
}>, typeof themeDefaultKey>;
/**
 * Output of {@link defineColorThemeOverride}.
 *
 * @category Internal
 */
export type ColorThemeOverride<Init extends ColorThemeInit = ColorThemeInit> = {
    name: string;
    overrides: Record<CssVarName, string>;
    originalTheme: ColorTheme<Init>;
    asTheme: ColorTheme<Init>;
};
/**
 * Define a color theme override. Use this to define multiple theme variations, like light mode vs
 * dark mode.
 *
 * @category Color Theme
 */
export declare function defineColorThemeOverride<const Init extends ColorThemeInit>(originalTheme: ColorTheme<Init>, overrideName: string, { defaultOverride, colorOverrides, }: Readonly<RequireAtLeastOne<{
    /** Override the default foreground and/or background colors. */
    defaultOverride: Readonly<NoRefColorInit>;
    colorOverrides: Readonly<ColorThemeOverrideInit<ColorTheme<Init>>>;
}>>): ColorThemeOverride<Init>;
/**
 * Set all color theme CSS vars on the given element. If no override is given, the theme color
 * default values are assigned.
 *
 * @category Color Theme
 */
export declare function applyColorTheme<const Theme extends ColorTheme>(
/** This should usually be the top-level `html` element. */
element: HTMLElement, fullTheme: Theme, themeOverride?: ColorThemeOverride | undefined): void;