@labmgm/themes
v0.1.0
Published
Theme provider for the MGM Laboratory Design System. SSR-safe (no FOUC), light/dark/system, toggles data-theme on <html>, optional next-themes interop.
Downloads
72
Maintainers
mgm-administratorReadme
@labmgm/themes
Theme provider for the MGM Laboratory Design System. SSR-safe, light/dark/system, toggles data-theme on <html> so the CSS variables shipped by @labmgm/tokens light up the whole tree.
Install
pnpm add @labmgm/themes react react-domUse
Next.js App Router
// app/layout.tsx
import "@labmgm/styles/base.css";
import { ThemeProvider, ThemeScript } from "@labmgm/themes";
export default function RootLayout({ children }: { children: React.ReactNode }) {
return (
<html lang="en" suppressHydrationWarning>
<head>
<ThemeScript />
</head>
<body>
<ThemeProvider defaultTheme="system">{children}</ThemeProvider>
</body>
</html>
);
}<ThemeScript /> is an inline <script> that runs before React hydrates. It reads the stored theme (or system preference) and writes data-theme on <html> so the page paints in the correct theme with no flash.
Reading and setting the theme
import { useTheme } from "@labmgm/themes";
function ThemeToggle() {
const { resolvedTheme, toggle } = useTheme();
return (
<button onClick={toggle} aria-label="Toggle theme">
{resolvedTheme === "dark" ? "🌙" : "☀️"}
</button>
);
}useTheme() throws if used outside <ThemeProvider> — that's intentional, so the mistake is caught at first render.
API
| Export | Description |
| --------------------- | ---------------------------------------------------------------------------------------- |
| ThemeProvider | React context provider. Persists to localStorage and follows system pref when needed. |
| ThemeScript | <script> element with the inline no-FOUC bootstrap. Drop into <head>. |
| useTheme() | Returns { theme, resolvedTheme, setTheme, toggle }. |
| themeScriptSource() | The raw script body — useful for frameworks that inject inline scripts a different way. |
Props
interface ThemeProviderProps {
children: ReactNode;
defaultTheme?: "light" | "dark" | "system"; // default "system"
storageKey?: string; // default "labmgm-theme"
disableStorage?: boolean; // default false (useful in tests)
attribute?: string; // default "data-theme"
target?: HTMLElement; // default document.documentElement
}License
MIT © MGM Laboratory.