Theme Preset Provider
Applies the persisted theme preset on mount and injects a no-flash script so the saved preset is set before paint. Install Theme Preset Provider from the VLLNT UI registry with the shadcn CLI.
Applies the persisted theme preset on mount and injects a no-flash script so the saved preset is set before paint. Part of the utility family in VLLNT UI, it ships as a machine-readable registry entry — copy the source directly into your app with the shadcn CLI and own it, no runtime dependency on a component library.
Preview
Switch between light and dark to inspect the embedded Storybook preview.
Installation
Add Theme Preset Provider to your project with the shadcn CLI. The source lands in your codebase, ready to adapt:
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
Explore every variant and state in the interactive Storybook:
Preview
Switch between light and dark to inspect the embedded Storybook preview.