Skip to content

Commit

Permalink
add basic darkmode toggle in the topright
Browse files Browse the repository at this point in the history
  • Loading branch information
keturiosakys committed Jun 10, 2024
1 parent 10e66fc commit 7682f53
Showing 1 changed file with 24 additions and 0 deletions.
24 changes: 24 additions & 0 deletions frontend/src/Layout.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -3,9 +3,11 @@ import {
DashboardIcon,
BarChartIcon as LineChart, // FIXME
MixerHorizontalIcon,
MoonIcon,
CubeIcon as Package,
LayoutIcon as PanelLeft,
MagnifyingGlassIcon as Search,
SunIcon,
AvatarIcon as UserIcon,
} from "@radix-ui/react-icons";
import type React from "react";
Expand Down Expand Up @@ -41,6 +43,7 @@ import {
TooltipTrigger,
} from "@/components/ui/tooltip";
import { Fragment, type SVGProps, useMemo } from "react";
import { useTheme } from "./hooks/theme";

const WaveIcon: React.FC<SVGProps<SVGSVGElement>> = (props) => (
<svg
Expand Down Expand Up @@ -126,6 +129,26 @@ const MizuBreadcrumbs: React.FC = () => {
);
};

const DarkModeToggle = () => {
const { theme, setTheme } = useTheme();
return (
<Button
variant="ghost"
size="icon"
className="bg-transparent rounded-full text-gray-400"
onClick={() => setTheme(theme === "dark" ? "light" : "dark")}
>
<div>
{theme === "dark" ? (
<SunIcon width={36} height={36} />
) : (
<MoonIcon width={36} height={36} />
)}
</div>
</Button>
);
};

export const Layout: React.FC<{ children?: React.ReactNode }> = ({
children,
}) => {
Expand Down Expand Up @@ -297,6 +320,7 @@ export const Layout: React.FC<{ children?: React.ReactNode }> = ({
<DropdownMenuItem>Logout</DropdownMenuItem>
</DropdownMenuContent>
</DropdownMenu>
<DarkModeToggle />
</header>
<main className="grid flex-1 items-start gap-4 p-4 sm:px-6 sm:py-0 md:gap-8">
{children}
Expand Down

0 comments on commit 7682f53

Please sign in to comment.