@dnb/eufemia
Version:
DNB Eufemia Design System UI Library
58 lines (57 loc) • 1.86 kB
TypeScript
/**
* Blocking scripts that prevent dark mode flash (FOUC).
*
* These scripts run synchronously before the browser paints,
* setting the correct color-scheme classes on HTML elements
* based on the user's stored preference or system setting.
*
*
* import {
* ColorSchemeHeadScript,
* ColorSchemeBodyFirstScript,
* ColorSchemeBodyLastScript,
* } from '@dnb/eufemia/shared/ColorSchemeScript'
*
* <head>
* <ColorSchemeHeadScript />
* </head>
* <body>
* <ColorSchemeBodyFirstScript />
* {content}
* <ColorSchemeBodyLastScript />
* </body>
*/
/**
* Returns the inline script that resolves the color scheme
* from localStorage and adds the scope hash to <html>.
* Place this in <head>.
*/
export declare function getHeadScript(scopeHash?: string): string;
/**
* Returns the inline script that adds the color-scheme class to <body>.
* Place this as the first child of <body>.
*/
export declare function getBodyScript(): string;
/**
* Returns the inline script that swaps color-scheme classes
* on all .eufemia-theme elements in the static HTML.
* Place this after the main content div.
*/
export declare function getContentScript(): string;
/**
* Script component for <head>.
* Resolves the color scheme and adds the scope hash class to <html>.
*/
export declare function ColorSchemeHeadScript({ scopeHash, }?: {
scopeHash?: string;
}): import("react/jsx-runtime").JSX.Element;
/**
* Script component for the first child of <body>.
* Adds the color-scheme class to <body>.
*/
export declare function ColorSchemeBodyFirstScript(): import("react/jsx-runtime").JSX.Element;
/**
* Script component placed after the main content.
* Swaps color-scheme classes on server-rendered Theme elements.
*/
export declare function ColorSchemeBodyLastScript(): import("react/jsx-runtime").JSX.Element;