ternary-theme
v0.0.0
Published
Control your light, dark, and automatic themes.
Readme
ternary-theme
Control your light, dark, and automatic themes.
Examples
React context
"use client";
import type { ReactNode } from "react";
import { ThemeProvider } from "ternary-theme";
import type { TernaryTheme } from "ternary-theme";
export default function RootLayout({ children }: { children: ReactNode }) {
return (
<html>
<body>
<ThemeProvider
onThemeInitialize={() => {
return (localStorage.getItem("theme") || "auto") as TernaryTheme;
}}
onThemeChange={(theme, resolvedTheme) => {
document.documentElement.style.colorScheme = resolvedTheme;
localStorage.setItem("theme", theme);
}}
>
{children}
</ThemeProvider>
</body>
</html>
);
}"use client";
import { useTheme } from "ternary-theme";
export default function Page() {
const { theme, resolvedTheme, setTheme } = useTheme();
return (
<>
{theme};{resolvedTheme}
<div>
<button onClick={() => setTheme("light")}>Light</button>
<button onClick={() => setTheme("dark")}>Dark</button>
<button onClick={() => setTheme("auto")}>Auto</button>
</div>
</>
);
}React hook
"use client";
import { useTheme } from "ternary-theme/hook.js";
export default function Page() {
const { theme, resolvedTheme, setTheme } = useTheme();
return (
<>
{theme};{resolvedTheme}
<div>
<button onClick={() => setTheme("light")}>Light</button>
<button onClick={() => setTheme("dark")}>Dark</button>
<button onClick={() => setTheme("auto")}>Auto</button>
</div>
</>
);
}