Dark mode for any React framework, with no SSR flash

SSR-safe theming for React with system preference, custom palettes, and a simple useTheme hook.

bun add ssr-themes

Theme picker

Pick a palette and the UI updates instantly.

Hydration-safe changes that sync across tabs.

Usage example

Install ssr-themes in a couple lines of code.

import {ThemeProvider, useTheme} from "ssr-themes";

export function ThemePreview() {
  const {theme, setTheme} = useTheme();

  return (
    <button onClick={() => setTheme(theme === "dark" ? "light" : "dark")}>
      Toggle theme
    </button>
  );
}

export function RootLayout({children}) {
  return (
    <ThemeProvider attribute="class" themes={["light", "dark", "quartz", "abyss"]}>
      {children}
    </ThemeProvider>
  );
}