Theme Preset Provider
Applique le preset de theme persiste au montage et injecte un script anti-scintillement pour que le preset enregistre soit defini avant le rendu. Installez Theme Preset Provider depuis le registre VLLNT UI avec la CLI shadcn.
Applique le preset de theme persiste au montage et injecte un script anti-scintillement pour que le preset enregistre soit defini avant le rendu. Fait partie de la famille utility dans VLLNT UI, il est publie comme entree de registre lisible par machine — copiez la source directement dans votre application avec la CLI shadcn et possedez-la, sans dependance d'execution a une bibliotheque de composants.
Apercu
Basculez entre clair et sombre pour inspecter l'apercu Storybook integre.
Installation
Ajoutez Theme Preset Provider a votre projet avec la CLI shadcn. La source arrive dans votre code, prete a etre adaptee :
pnpm dlx shadcn@latest add https://ui.vllnt.ai/r/theme-preset-provider.jsonSource
"use client";
import { type ReactNode, useEffect } from "react";
import {
CUSTOM_THEME_NAME,
DEFAULT_THEME_PRESET,
isThemePresetName,
THEME_CUSTOM_CSS_STORAGE_KEY,
THEME_CUSTOM_STYLE_ID,
THEME_PRESET_STORAGE_KEY,
} from "../../lib/theme-presets";
import { setThemePreset } from "../../lib/use-theme-preset";
const FOUC_SCRIPT = `(function(){try{var v=localStorage.getItem(${JSON.stringify(
THEME_PRESET_STORAGE_KEY,
)});if(!v||v===${JSON.stringify(
DEFAULT_THEME_PRESET,
)})return;document.documentElement.setAttribute("data-theme",v);if(v===${JSON.stringify(
CUSTOM_THEME_NAME,
)}){var c=localStorage.getItem(${JSON.stringify(
THEME_CUSTOM_CSS_STORAGE_KEY,
)});if(c){var s=document.createElement("style");s.id=${JSON.stringify(
THEME_CUSTOM_STYLE_ID,
)};s.textContent=c;document.head.appendChild(s);}}}catch(e){}})();`;
export type ThemePresetProviderProps = {
readonly children?: ReactNode;
/** Preset applied on first visit when no stored preference exists. */
readonly defaultPreset?: string;
};
/**
* Restores the persisted theme preset before paint (avoiding a flash) and
* optionally seeds a default preset for first-time visitors. Render it once,
* high in the tree, alongside the light/dark `ThemeProvider`.
*/
export function ThemePresetProvider({
children,
defaultPreset,
}: ThemePresetProviderProps) {
useEffect(() => {
if (!defaultPreset || defaultPreset === DEFAULT_THEME_PRESET) {
return;
}
let stored: null | string = null;
try {
stored = window.localStorage.getItem(THEME_PRESET_STORAGE_KEY);
} catch {
stored = null;
}
if (!stored && isThemePresetName(defaultPreset)) {
setThemePreset(defaultPreset);
}
}, [defaultPreset]);
return (
<>
<script
dangerouslySetInnerHTML={{ __html: FOUC_SCRIPT }}
suppressHydrationWarning
/>
{children}
</>
);
}
Stories
Explorez chaque variante et etat dans le Storybook interactif :
Apercu
Basculez entre clair et sombre pour inspecter l'apercu Storybook integre.