Theme

System/light/dark theming — provider, no-flash script, and toggle.

Installation

npm install @aspyn-io/kit @aspyn-io/tokens

import { ThemeProvider, ThemeScript, ThemeToggle, useTheme } from "@aspyn-io/kit";

Setup (Next.js)

ThemeProvider manages system/light/dark (defaulting to auto), ThemeScript prevents a flash of the wrong theme, and ThemeToggle is the ready-made switcher. Developers write zero theme code.

// app/layout.tsx
import { ThemeProvider, ThemeScript } from "@aspyn-io/kit";

export default function RootLayout({ children }) {
  return (
    <html lang="en" suppressHydrationWarning>
      <head>
        <ThemeScript />
      </head>
      <body>
        <ThemeProvider>{children}</ThemeProvider>
      </body>
    </html>
  );
}

Setup (Vite)

// index.html — inline the no-flash script
<script>/* paste themeInitScript() output, or: */</script>

// main.tsx
import { ThemeProvider } from "@aspyn-io/kit";

createRoot(document.getElementById("root")!).render(
  <ThemeProvider>
    <App />
  </ThemeProvider>
);

Programmatic control

const { theme, resolvedTheme, setTheme } = useTheme();

setTheme("dark");    // explicit
setTheme("system");  // follow the OS (default)
resolvedTheme;       // "light" | "dark" — what's actually applied

Notes

Defaults to system (auto) and follows OS changes live — the recommended behavior for all Aspyn products.
Preference persists in localStorage under "aspyn-theme" (configurable via storageKey).
This very page is powered by these components — try the toggle in the header.