@serendie/ui
Version:
Adaptive UI component library as part of Serendie Design System by Mitsubishi Electric
75 lines (74 loc) • 2.9 kB
TypeScript
import { ColorTheme, ColorMode } from './ThemeContext';
export interface ColorSchemeScriptOptions {
/** カラーテーマを直接指定（localStorageより優先） */
colorTheme?: ColorTheme;
/** カラーモードを直接指定（localStorageより優先） */
colorMode?: ColorMode;
/** デフォルトのカラーテーマ（デフォルト: 'konjo'）。colorTheme未指定かつlocalStorageに値がない場合に使用 */
defaultTheme?: ColorTheme;
/** デフォルトのカラーモード（デフォルト: 'light'）。colorMode未指定かつlocalStorageに値がない場合に使用 */
defaultColorMode?: ColorMode;
/** localStorageのキー（テーマ）（デフォルト: 'serendie-color-theme'） */
themeStorageKey?: string;
/** localStorageのキー（モード）（デフォルト: 'serendie-color-mode'） */
modeStorageKey?: string;
}
/**
* FOUC（Flash of Unstyled Content）を防ぐためのインラインスクリプトを生成する
*
* このスクリプトはHTMLの<head>内にインラインで埋め込むことで、
* ページ読み込み時に正しいテーマが即座に適用されるようにします。
*
* @param options - スクリプト生成オプション
* @returns インラインスクリプトの文字列
*
* @example
* ```tsx
* // Next.js App Routerでの使用例
* // 推奨: ColorSchemeScriptコンポーネントを使用してください
* import { getColorSchemeScript } from '@serendie/ui';
*
* export default function RootLayout({ children }) {
* return (
* <html suppressHydrationWarning>
* <head>
* <script
* dangerouslySetInnerHTML={{
* __html: getColorSchemeScript({ colorTheme: 'konjo', colorMode: 'system' })
* }}
* />
* </head>
* <body>{children}</body>
* </html>
* );
* }
* ```
*/
export declare function getColorSchemeScript(options?: ColorSchemeScriptOptions): string;
/**
* FOUC防止用のReactコンポーネント
* Next.jsのApp Routerで使用する場合のヘルパー
*
* SerendieProviderの内側で使用する場合、propsを省略するとContextから
* テーマ設定を自動的に取得します。
*
* @example
* ```tsx
* // layout.tsx（推奨: SerendieProviderの内側で使用）
* import { ColorSchemeScript, SerendieProvider } from '@serendie/ui';
*
* export default function RootLayout({ children }) {
* return (
* <SerendieProvider lang="ja" colorTheme="konjo" colorMode="system">
* <html suppressHydrationWarning>
* <head>
* <ColorSchemeScript />
* </head>
* <body>{children}</body>
* </html>
* </SerendieProvider>
* );
* }
* ```
*/
export declare function ColorSchemeScript(props?: ColorSchemeScriptOptions): import("react/jsx-runtime").JSX.Element;