55 lines
1.7 KiB
TypeScript
55 lines
1.7 KiB
TypeScript
"use client";
|
|
|
|
import { createContext, useEffect, useState } from "react";
|
|
import Cookies from "js-cookie";
|
|
|
|
// Define theme options
|
|
type ThemeType = "light" | "dark";
|
|
|
|
export const ThemeContext = createContext<{
|
|
theme: ThemeType;
|
|
toggleTheme: () => void;
|
|
}>({
|
|
theme: "light",
|
|
toggleTheme: () => {},
|
|
});
|
|
|
|
export const ThemeProvider = ({ children }: { children: React.ReactNode }) => {
|
|
const [theme, setTheme] = useState<ThemeType>("light");
|
|
|
|
useEffect(() => {
|
|
// Get theme from cookies or system preference
|
|
const savedTheme = Cookies.get("theme") as ThemeType | undefined;
|
|
if (savedTheme === "dark" || savedTheme === "light") {
|
|
setTheme(savedTheme);
|
|
} else {
|
|
// Detect system preference
|
|
const prefersDark = window.matchMedia("(prefers-color-scheme: dark)").matches;
|
|
setTheme(prefersDark ? "dark" : "light");
|
|
Cookies.set("theme", prefersDark ? "dark" : "light", { expires: 365 });
|
|
}
|
|
}, []);
|
|
|
|
// Apply the transition effect when theme changes
|
|
useEffect(() => {
|
|
document.documentElement.classList.add("transition-theme");
|
|
document.documentElement.setAttribute("data-theme", theme);
|
|
|
|
return () => {
|
|
document.documentElement.classList.remove("transition-theme");
|
|
};
|
|
}, [theme]);
|
|
|
|
const toggleTheme = () => {
|
|
const newTheme: ThemeType = theme === "dark" ? "light" : "dark";
|
|
setTheme(newTheme);
|
|
Cookies.set("theme", newTheme, { expires: 365 });
|
|
};
|
|
|
|
return (
|
|
<ThemeContext.Provider value={{ theme, toggleTheme }}>
|
|
{children}
|
|
</ThemeContext.Provider>
|
|
);
|
|
};
|