@serendie/ui/dist/theme/ThemeContext.d.ts

Adaptive UI component library as part of Serendie Design System by Mitsubishi Electric

/**
 * カラーモード
 * - 'system': OSの設定に従う
 * - 'light': ライトモード固定
 * - 'dark': ダークモード固定
 */
export type ColorMode = "system" | "light" | "dark";
/**
 * カラーテーマ
 * Serendie UIで利用可能なカラーテーマ
 */
export type ColorTheme = "konjo" | "asagi" | "sumire" | "tsutsuji" | "kurikawa";
export interface ThemeContextValue {
    /** 現在のカラーテーマ */
    colorTheme: ColorTheme;
    /** 現在のカラーモード設定 */
    colorMode: ColorMode;
    /** 解決後のテーマ名（data-panda-themeに設定される値） */
    resolvedTheme: string;
    /** システムが現在ダークモードかどうか */
    systemPrefersDark: boolean;
}
export declare const ThemeContext: import('react').Context<ThemeContextValue | undefined>;
/**
 * テーマコンテキストを取得するフック
 *
 * @returns ThemeContextValue | undefined
 *
 * @example
 * ```tsx
 * function Component() {
 *   const theme = useThemeContext();
 *   if (theme) {
 *     console.log(theme.resolvedTheme); // 'konjo' or 'konjo-dark' etc.
 *   }
 * }
 * ```
 */
export declare function useThemeContext(): ThemeContextValue | undefined;
/**
 * テーマ名を解決する
 *
 * @param colorTheme - カラーテーマ（konjo, asagi等）
 * @param colorMode - カラーモード（system, light, dark）
 * @param systemPrefersDark - システムがダークモードかどうか
 * @returns 解決後のテーマ名（data-panda-themeに設定する値）
 *
 * @example
 * ```ts
 * resolveTheme('konjo', 'system', true);  // 'konjo-dark'
 * resolveTheme('konjo', 'light', true);   // 'konjo'
 * resolveTheme('asagi', 'dark', false);   // 'konjo-dark' (asagi-darkは未実装のためフォールバック)
 * ```
 */
export declare function resolveTheme(colorTheme: ColorTheme, colorMode: ColorMode, systemPrefersDark: boolean): string;