Forced theme

Use forcedTheme to lock the theme for a page or section. setTheme calls are ignored while a theme is forced.

Try it

Pick a theme, then force one. While forcedTheme is set it wins over the selection; clear it and the selection comes back.

import { ThemeProvider } from "@wrksz/themes/next";

export default function Page({ children }: { children: React.ReactNode }) {
  return (
    <ThemeProvider forcedTheme="dark" target="#page" storage="none">
      <div id="page">{children}</div>
    </ThemeProvider>
  );
}

Per-page forced theme

import { ClientThemeProvider } from "@wrksz/themes/client";

export default function DashboardLayout({ children }) {
  return (
    <ClientThemeProvider forcedTheme="dark">
      {children}
    </ClientThemeProvider>
  );
}

Reading the forced theme

forcedTheme is exposed via useTheme so you can disable theme toggle controls when a theme is forced:

"use client";

import { useTheme } from "@wrksz/themes/client";

export function ThemeToggle() {
  const { resolvedTheme, setTheme, forcedTheme } = useTheme();

  if (forcedTheme) {
    return <span>Theme locked to {forcedTheme}</span>;
  }

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

With scoped theming

Combine forcedTheme with target to force a theme on a specific section without affecting the rest of the app:

<ClientThemeProvider forcedTheme="dark" target="#hero" storage="none">
  <section id="hero">{children}</section>
</ClientThemeProvider>

See Scoped theming for more details.