React

1import { useTheme } from "@theme-kit/react";
2
3export function ThemeToggle() {
4  const { theme, mode, setMode, setFamily, toggleTheme } = useTheme();
5  return (
6    <div className="row">
7      <button onClick={toggleTheme}>{theme.name}</button>
8      <button onClick={() => setMode("dark")}>Dark</button>
9      <button onClick={() => setMode("light")}>Light</button>
10      <select value={family} onChange={(e) => setFamily(e.target.value)}>
11        {["neutral", "mint", "plum"].map((f) => (
12          <option key={f} value={f}>{f}</option>
13        ))}
14      </select>
15      <span className="mono">{mode}</span>
16    </div>
17  );
18}

1import { useThemeHistory, useThemeRuntime } from "@theme-kit/react";
2
3export function ThemeControls() {
4  const { undo, redo, canUndo, canRedo } = useThemeHistory();
5  const runtime = useThemeRuntime();
6
7  return (
8    <div>
9      <button onClick={undo} disabled={!canUndo}>Undo</button>
10      <button onClick={redo} disabled={!canRedo}>Redo</button>
11      <button
12        onClick={() => runtime.update({ colors: { primary: "#6366f1" } })}
13      >
14        Make primary indigo
15      </button>
16    </div>
17  );
18}

1import { ThemeScope, useScopedTheme, useRef, type ThemeTransitionOptions } from "@theme-kit/react";
2
3const transition: ThemeTransitionOptions = { duration: 300, easing: "ease" };
4
5export function Dashboard() {
6  return (
7    <>
8      <Sidebar /> {/* inherits the global theme */}
9      <ThemeScope theme="forest" transition={transition}>
10        <DataViz /> {/* always themed "forest" */}
11      </ThemeScope>
12    </>
13  );
14}
15
16export function ScopedCard() {
17  const ref = useRef<HTMLDivElement>(null);
18  useScopedTheme(ref, "forest");
19  return <div ref={ref}>Imperatively scoped</div>;
20}

1import { useEffect } from "react";
2import { useThemeLifecycle, useThemePacks } from "@theme-kit/react";
3
4export function Telemetry() {
5  const { on } = useThemeLifecycle();
6  const usePack = useThemePacks();
7
8  useEffect(() => {
9    const off = on("beforeThemeChange", (e) => {
10      console.log("theme changed to", e.next.name);
11    });
12    return off;
13  }, [on]);
14
15  return (
16    <button onClick={() => usePack({ name: "a11y", themes: highContrast })}
17    >
18      Apply High Contrast pack
19    </button>
20  );
21}

1import { ThemeProvider } from "@theme-kit/react";
2
3export function App() {
4  return (
5    <ThemeProvider
6      themes={themes}
7      transition={{
8        enabled: true,
9        duration: 300,
10        easing: "ease-in-out",
11        properties: [
12          "color",
13          "background-color",
14          "border-color",
15          "border-radius",
16          "font-size",
17          "box-shadow",
18        ],
19      }}
20    >
21      <ThemeSwitcher />
22    </ThemeProvider>
23  );
24}