GithubProxy/coai
1
0
Fork 0
mirror of https://github.com/coaidev/coai.git synced 2025-05-19 13:00:14 +09:00
Code Issues Actions Packages Projects Releases Wiki Activity

chore: transition animation for Sun and Moon icons when switching themes

Browse Source
This commit is contained in:
Sh1n3zZ 2025-04-29 21:21:39 +08:00
parent 34dfa05c9b
commit 2d2fe52bab
No known key found for this signature in database
GPG Key ID: 696702CF723B0452
1 changed files with 23 additions and 32 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

55
app/src/components/ThemeProvider.tsx
View File

@ -106,46 +106,37 @@ export const useTheme = () => {
};
export function ModeToggle() {
const { theme, toggleTheme } = useTheme();
const [currentIconIndex, setCurrentIconIndex] = useState(0);
const icons = [
<Moon key="dark" className="h-[1.2rem] w-[1.2rem]" />,
<Sun key="light" className="h-[1.2rem] w-[1.2rem]" />,
<Monitor key="system" className="h-[1.2rem] w-[1.2rem]" />,
];
const { toggleTheme } = useTheme();
const [systemMode, setSystemMode] = useState(false);
useEffect(() => {
const savedTheme = getTheme();
const index = icons.findIndex(icon => icon.key === savedTheme);
setCurrentIconIndex(index >= 0 ? index : 0);
}, [theme]);
const currentTheme = getTheme();
setSystemMode(currentTheme === "system");
}, []);
const handleClick = () => {
toggleTheme?.();
const currentTheme = getTheme();
let nextTheme: Theme;
if (currentTheme === "dark") {
nextTheme = "light";
} else if (currentTheme === "light") {
nextTheme = "system";
} else {
nextTheme = "dark";
}
const nextIndex = icons.findIndex(icon => icon.key === nextTheme);
setCurrentIconIndex(nextIndex >= 0 ? nextIndex : 0);
const newTheme = getTheme();
setSystemMode(newTheme === "system");
};
if (systemMode) {
return (
<Button variant="outline" size="icon" onClick={handleClick}>
<Monitor className="h-[1.2rem] w-[1.2rem]" />
</Button>
);
}
return (
<Button
variant="outline"
size="icon"
onClick={handleClick}
>
{icons[currentIconIndex]}
<Button variant="outline" size="icon" onClick={handleClick}>
<Sun
className={`relative dark:absolute h-[1.2rem] w-[1.2rem] rotate-0 scale-100 transition-all dark:-rotate-90 dark:scale-0`}
/>
<Moon
className={`absolute dark:relative h-[1.2rem] w-[1.2rem] rotate-90 scale-0 transition-all dark:rotate-0 dark:scale-100`}
/>
</Button>
);
}