z0x/blog.z0x.ca
Code Actions

refactor(index): make theme toggle a button
All checks were successful
build dist / build-dist (push) Successful in 35s
Details

Browse source
This commit is contained in:
z0x 2025-04-25 21:45:55 -04:00
parent 36870785bc
commit e8722431f3
1 changed files with 21 additions and 44 deletions
Download patch file Download diff file Expand all files Collapse all files

51
src/components/ui/mode-toggle.tsx
View file

@ -1,31 +1,21 @@
import { Button } from "@/components/ui/button"; import { Button } from "@/components/ui/button";
import { import { Moon, Sun } from "lucide-react";
DropdownMenu,
DropdownMenuContent,
DropdownMenuItem,
DropdownMenuTrigger,
} from "@/components/ui/dropdown-menu";
import { Laptop, Moon, Sun } from "lucide-react";
import * as React from "react"; import * as React from "react";
export function ModeToggle() { export function ModeToggle() {
const [theme, setThemeState] = React.useState< const [theme, setTheme] = React.useState<"theme-light" | "dark" | "system">(
"theme-light" | "dark" | "system" "theme-light",
>("theme-light"); );
React.useEffect(() => { React.useEffect(() => {
const isDarkMode = document.documentElement.classList.contains("dark"); const isDarkMode = document.documentElement.classList.contains("dark");
setThemeState(isDarkMode ? "dark" : "theme-light"); setTheme(isDarkMode ? "dark" : "theme-light");
}, []); }, []);
React.useEffect(() => { React.useEffect(() => {
const isDark = const isDark = theme === "dark";
theme === "dark" ||
(theme === "system" &&
window.matchMedia("(prefers-color-scheme: dark)").matches);
document.documentElement.classList.add("disable-transitions"); document.documentElement.classList.add("disable-transitions");
document.documentElement.classList[isDark ? "add" : "remove"]("dark"); document.documentElement.classList[isDark ? "add" : "remove"]("dark");
window window
@ -37,34 +27,21 @@ export function ModeToggle() {
}); });
}, [theme]); }, [theme]);
const toggleTheme = () => {
setTheme(theme === "dark" ? "theme-light" : "dark");
};
return ( return (
<DropdownMenu modal={false}>
<DropdownMenuTrigger asChild>
<Button <Button
variant="outline" variant="outline"
size="icon" size="icon"
className="group" className="relative overflow-hidden"
onClick={toggleTheme}
title="Toggle theme" title="Toggle theme"
> >
<Sun className="size-4 scale-100 rotate-0 transition-all dark:scale-0 dark:-rotate-90" /> <Sun className="size-4 absolute inset-0 m-auto scale-100 rotate-0 transition-all duration-500 dark:scale-0 dark:-rotate-90" />
<Moon className="absolute size-4 scale-0 rotate-90 transition-all dark:scale-100 dark:rotate-0" /> <Moon className="size-4 absolute inset-0 m-auto scale-0 rotate-90 transition-all duration-500 dark:scale-100 dark:rotate-0" />
<span className="sr-only">Toggle theme</span> <span className="sr-only">Toggle theme</span>
</Button> </Button>
</DropdownMenuTrigger>
<DropdownMenuContent align="end" className="bg-background">
<DropdownMenuItem onClick={() => setThemeState("theme-light")}>
<Sun className="mr-2 size-4" />
<span>Light</span>
</DropdownMenuItem>
<DropdownMenuItem onClick={() => setThemeState("dark")}>
<Moon className="mr-2 size-4" />
<span>Dark</span>
</DropdownMenuItem>
<DropdownMenuItem onClick={() => setThemeState("system")}>
<Laptop className="mr-2 size-4" />
<span>System</span>
</DropdownMenuItem>
</DropdownMenuContent>
</DropdownMenu>
); );
} }