Getting Started

Better Themes is a framework-agnostic theming solution for React applications. It provides seamless dark mode support with zero flash on load, system preference detection, and flexible storage options.

Better Themes Preview

Features

Zero flash on load - Prevents theme flash during page load (SSR/SSG safe)
System preference detection - Automatically detects and respects user's system theme preference via prefers-color-scheme
Storage support - Support for localStorage (default) and sessionStorage (per-tab isolation)
Themed browser UI - Sets color-scheme CSS property for native browser UI elements
Custom themes - Support for multiple custom themes beyond light/dark
Flexible styling - Use class or data attributes (works with Tailwind CSS)
TypeScript - Fully typed with TypeScript
Framework agnostic - Works with Next.js, Remix / React Router, Vite, TanStack Start, Waku, and more

Quick Start

Install better-themes:

npm install better-themes

Wrap your app with ThemeProvider:

layout.tsx

import { ThemeProvider } from "better-themes";

function Layout({ children }: { children: React.ReactNode }) {
  return (
    <ThemeProvider>
      {children}
    </ThemeProvider>
  );
}

Use the theme in your components:

theme-switcher.tsx

import { useTheme } from "better-themes";

function theme-switcher() {
  const { theme, setTheme } = useTheme();

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