Quick Start
Get started with better-themes in minutes
Basic Setup
Wrap your app with ThemeProvider
The ThemeProvider component should be placed at the root of your application:
import { ThemeProvider } from "better-themes";
function Layout({ children }: { children: React.ReactNode }) {
return (
<ThemeProvider>
{children}
</ThemeProvider>
);
}Add suppressHydrationWarning to your <html> tag
This prevents hydration warnings when the theme is applied:
<html lang="en" suppressHydrationWarning>
<body>
<ThemeProvider>
{children}
</ThemeProvider>
</body>
</html>Style your app
By default, ThemeProvider sets a class attribute on the <html> element. Style your app with CSS:
:root {
--background: white;
--foreground: black;
}
.dark {
--background: black;
--foreground: white;
}Or use hard-coded values:
html,
body {
color: #000;
background: #fff;
}
.dark,
.dark body {
color: #fff;
background: #000;
}Using the Theme
Access the current theme and change it with the useTheme hook:
import { useTheme } from "better-themes";
function theme-switcher() {
const { theme, setTheme, themes } = useTheme();
return (
<div>
<p>Current theme: {theme}</p>
<button onClick={() => setTheme("light")}>Light</button>
<button onClick={() => setTheme("dark")}>Dark</button>
<button onClick={() => setTheme("system")}>System</button>
</div>
);
}Tailwind CSS
For Tailwind CSS, use class-based dark mode:
<ThemeProvider attribute="class">
{children}
</ThemeProvider>Then use Tailwind's dark mode classes:
<h1 className="text-black dark:text-white">
Hello
</h1>Important Notes
- The theme value is
undefinedon the server. Only use it after the component mounts on the client. - See the SSR Guide for details on handling server-side rendering.
- Check out Framework Guides for framework-specific setup instructions.