Migrating from next-themes

Mostly drop-in, plus one move into the server layout

ThemeProvider and useTheme are drop-in for the common props:

- import { ThemeProvider, useTheme } from 'next-themes'
+ import { ThemeProvider, useTheme } from 'uni-themes'

attribute, defaultTheme, enableSystem, storageKey, disableTransitionOnChange, forcedTheme and themes behave the same.

Then move the anti-FOUC script into your server layout's <head> — this is the step that removes the React 19 warning:

app/layout.tsx

import { ThemeScript } from 'uni-themes/script'

// inside <head>:
<ThemeScript />

Not carried over

value class mapping — themes land on <html> under their own names
scriptProps — pass nonce directly to ThemeScript
nested providers — an inner provider is independent, not a no-op; remove redundant inner providers

New capabilities

storage="cookie" + getTheme() / getThemeFromRequest() for server-side reading
One library across Next.js, React Router, TanStack Start and Vite

API Reference

Options, hooks and subpath exports

Comparison

How uni-themes relates to next-themes and the other theme libraries

On this page

Not carried over New capabilities