Dark Mode
This page shows examples of how to set up the dark mode theme for the Toaster component. Using Vite, Next.js (with next-themes) or Remix (with remix-themes).
💡 If you need to activate the dark mode directly, you can use the
theme
property:show
Vite
Click here to show the Dark Mode Theme snippet (optional)
- Snippet from
shadcn/ui
Dark Mode documentation.
tsx
import { createContext, useContext, useEffect, useState } from "react";
export type Theme = "dark" | "light" | "system";
type ThemeProviderProps = {
children: React.ReactNode;
defaultTheme?: Theme;
storageKey?: string;
};
type ThemeProviderState = {
theme: Theme;
setTheme: (theme: Theme) => void;
};
const initialState: ThemeProviderState = {
theme: "system",
setTheme: () => null,
};
const ThemeProviderContext = createContext<ThemeProviderState>(initialState);
export function ThemeProvider({
children,
defaultTheme = "system",
storageKey = "my-ui-theme",
...props
}: ThemeProviderProps) {
const [theme, setTheme] = useState<Theme>(
() => (localStorage.getItem(storageKey) as Theme) || defaultTheme,
);
useEffect(() => {
const root = window.document.documentElement;
root.classList.remove("light", "dark");
if (theme === "system") {
const systemTheme = window.matchMedia("(prefers-color-scheme: dark)")
.matches
? "dark"
: "light";
root.classList.add(systemTheme);
root.style.colorScheme = systemTheme;
return;
}
root.classList.add(theme);
root.style.colorScheme = theme;
}, [theme]);
const value = {
theme,
setTheme: (theme: Theme) => {
localStorage.setItem(storageKey, theme);
setTheme(theme);
},
};
return (
<ThemeProviderContext.Provider {...props} value={value}>
{children}
</ThemeProviderContext.Provider>
);
}
export const useTheme = () => {
const context = useContext(ThemeProviderContext);
if (context === undefined)
throw new Error("useTheme must be used within a ThemeProvider");
return context;
};
- Create a
ToasterProvider.tsx
file with the following content:
- Import the
useTheme
hook from theThemeProvider
file. - Change the
theme
value based on the current theme.
tsx
// 📄 components/ToasterProvider.tsx
import type { ToasterProperties } from "@pheralb/toast";
import { Toaster } from "@pheralb/toast";
import { useTheme } from "./themeProvider";
const ToasterProvider = (props: ToasterProperties) => {
const { theme } = useTheme();
return <Toaster theme={theme} {...props} />;
};
export default ToasterProvider;
- Import the
ToasterProvider
component in themain.tsx
file:
tsx
// 📄 main.tsx
import ToasterProvider from "./providers/toasterProvider";
ReactDOM.createRoot(document.getElementById("root") as HTMLElement).render(
<React.StrictMode>
<ThemeProvider defaultTheme="system" storageKey="my-ui-theme">
<App />
<ToasterProvider />
</ThemeProvider>
</React.StrictMode>,
);
Next.js with next-themes
📚 Click here to read the
next-themes
documentation.
- Create a
ToasterNextTheme.tsx
file with the following content:
- Import
useTheme
hook fromnext-themes
. - Change the
theme
value based on the current theme.
tsx
// 📄 components/ToasterNextTheme.tsx
"use client";
import {
Toaster,
type ToastTheme,
type ToasterProperties,
} from "@pheralb/toast";
import { useTheme } from "next-themes";
const ToasterNextTheme = (props: ToasterProperties) => {
const { theme } = useTheme();
return <Toaster theme={theme as ToastTheme} {...props} />;
};
export default ToasterNextTheme;
- Import the
ToasterNextTheme
component in thelayout/app.tsx
file:
tsx
// 📄 layout/app.tsx
import ToasterNextTheme from "@/components/ToasterNextTheme";
export default function RootLayout({
children,
}: Readonly<{
children: React.ReactNode;
}>) {
return (
<html lang="en" className={inter.className}>
<body>
<ThemeProvider
attribute="class"
defaultTheme="system"
enableSystem
disableTransitionOnChange
>
{children}
<ToasterNextTheme />
</ThemeProvider>
</body>
</html>
);
}
Remix with remix-themes
📚 Click here to read the
remix-themes
documentation.
Import the useTheme
hook from remix-themes
and change the theme value:
tsx
// 📄 app/root.tsx
import clsx from 'clsx';
import { Toaster } from '@pheralb/toast';
import { useTheme } from 'remix-themes';
function App() {
const [theme] = useTheme();
return (
<html lang="en" className={clsx(theme)}>
<head>
<meta charSet="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<Meta />
<Links />
</head>
<body>
<Outlet />
<Toaster theme={theme!} />>
<ScrollRestoration />
<Scripts />
</body>
</html>
);
}