Waku

Installation

npm install better-themes

Setup

Update your root layout

In pages/_layout.tsx, wrap your app with ThemeProvider:

pages/_layout.tsx

import { ThemeProvider } from "better-themes/rsc";
import type { ReactNode } from "react";

type RootLayoutProps = { children: ReactNode };

export default async function RootLayout({ children }: RootLayoutProps) {
  return (
    <html lang="en" suppressHydrationWarning>
      <head>
        {/* Your head content */}
      </head>
      <body>
        <ThemeProvider attribute="class" disableTransitionOnChange>
          {children}
        </ThemeProvider>
      </body>
    </html>
  );
}

Note: Waku uses React Server Components, so use the /rsc export.

Create a theme switcher component

components/theme-switcher.tsx

"use client";

import { useTheme } from "better-themes/rsc";
import { useEffect, useState } from "react";

export function ThemeSwitcher() {
  const [mounted, setMounted] = useState(false);
  const { theme, setTheme } = useTheme();

  useEffect(() => {
    setMounted(true);
  }, []);

  if (!mounted) {
    return null;
  }

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

Complete Example

pages/_layout.tsx

import { ThemeProvider } from "better-themes/rsc";
import type { ReactNode } from "react";
import { ThemeSwitcher } from "@/components/theme-switcher";

type RootLayoutProps = { children: ReactNode };

export default async function RootLayout({ children }: RootLayoutProps) {
  return (
    <html lang="en" suppressHydrationWarning>
      <head>
        <meta name="description" content="My Waku app" />
      </head>
      <body>
        <ThemeProvider attribute="class" disableTransitionOnChange>
          <ThemeSwitcher />
          {children}
        </ThemeProvider>
      </body>
    </html>
  );
}

Notes

Use better-themes/rsc for Waku (React Server Components)
Add suppressHydrationWarning to the <html> tag

Example

View a complete example implementation: Waku Example

Try the live demo: Live Demo