38 lines
954 B
TypeScript
38 lines
954 B
TypeScript
import { useContext } from "react";
|
|
import { ThemeContext } from "@/context/Theme";
|
|
import { MoonIcon, SunIcon, SunMoonIcon } from "lucide-react";
|
|
|
|
interface Props {
|
|
inApp?: boolean;
|
|
}
|
|
|
|
function ThemeIcon({ inApp }: Props) {
|
|
const { theme, setTheme, isDark } = useContext(ThemeContext);
|
|
|
|
const onClick = () => {
|
|
const nextTheme = theme === "light" ? "dark" : theme === "dark" ? "system" : "light";
|
|
setTheme(nextTheme);
|
|
};
|
|
|
|
const getIcon = () => {
|
|
const size = inApp ? 24 : 30;
|
|
const color = inApp ? (isDark ? "white" : "black") : "white";
|
|
|
|
switch (theme) {
|
|
case "light":
|
|
return <SunIcon size={size} color={color} />;
|
|
case "dark":
|
|
return <MoonIcon size={size} color={color} />;
|
|
case "system":
|
|
return <SunMoonIcon size={size} color={color} />;
|
|
}
|
|
};
|
|
|
|
return (
|
|
<button onClick={onClick} title={theme} className={`text-white ${inApp ? "text-black" : ""}`}>
|
|
{getIcon()}
|
|
</button>
|
|
);
|
|
}
|
|
|
|
export default ThemeIcon;
|