1.0.10 • Published 4 months ago
themix v1.0.10
Themix
A Next.js theme manager that uses cookies to store and manage the switch between light, dark and system modes.
Why?
This package was built because storing the cookie in the browser local storage doesn't work too well with Next.js and Server Components. So, with Themix you get:
- Initial load with no flashing;
- No hydration warnings.
Installation
npm i themixUsage
- Set up your root layout component:
// layout.tsx
import { ThemixProvider } from "themix/client";
import { getThemixServerData } from "themix/server";
export default function RootLayout({ children }: { children: React.ReactNode }) {
const { initialTheme, bodyThemeClass } = getThemixServerData();
return (
<html lang="en">
<body className={`${inter.className} ${bodyThemeClass}`}>
<ThemixProvider initialTheme={initialTheme}>
{children}
</ThemixProvider>
</body>
</html>
);
}- Use the
useThemix()hook to get and set the current theme in your Client Components.
// theme-switcher.tsx
"use client";
import { useThemix } from "themix/client";
export function ThemeSwitcher() {
const { theme, setTheme } = useThemix();
return <button onClick={() => setTheme("dark")}>Dark mode</button>;
}Disable transition on switch
You can pass the noTransition prop to ThemixProvider to disable the transition on theme switch.
Types
themix/types exports ThemixTheme and ThemixCookie types:
export type ThemixTheme = "light" | "dark" | "system";
export type ThemixCookie = "light" | "dark" | "system-light" | "system-dark";Credits
Many thanks to the next-themes package for inspiring this and for the disable transition on switch feature.
License
Themix is released under the MIT license.
1.0.9
4 months ago
1.0.8
4 months ago
1.0.10
4 months ago
1.0.7
5 months ago
1.0.5
5 months ago
1.0.4
5 months ago
1.0.3
5 months ago
1.0.2
5 months ago
1.0.1
5 months ago
1.0.0-beta.3
5 months ago
1.0.0-beta.2
5 months ago
1.0.0-beta.1
5 months ago
1.0.0
5 months ago