simplify theme switch (#461)

Author: lazarusA

src/app/ClientRoot.tsx

@@ -1,24 +1,37 @@
 "use client";
 
+import Link from "next/link";
 import { ThemeProvider } from "next-themes";
+import { Footer, VersionSelector } from "@/components/ui";
+import GithubButton from "@/components/ui/GithubButton";
+import HomeButton from "@/components/ui/HomeButton";
 import MobileUIHider from "@/components/ui/MobileUIHider";
-import { Footer } from "@/components/ui";
-import { BrowZarrPopover } from "./BrowZarrPopover";
-import { VersionSelector } from "@/components/ui";
-import Link from "next/link";
 import ThemeSwitch from "@/components/ui/ThemeSwitch";
-import HomeButton from "@/components/ui/HomeButton";
-import GithubButton from "@/components/ui/GithubButton";
+import { BrowZarrPopover } from "./BrowZarrPopover";
 
-export default function ClientRoot({ children }: { children: React.ReactNode }) {
+export default function ClientRoot({
+	children,
+}: {
+	children: React.ReactNode;
+}) {
 	return (
-		<ThemeProvider attribute="data-theme" enableSystem defaultTheme="system" disableTransitionOnChange>
+		<ThemeProvider
+			attribute="data-theme"
+			enableSystem
+			defaultTheme="system"
+			disableTransitionOnChange
+		>
 			<MobileUIHider />
 			{/* left menu */}
 			<div className="fixed top-2 left-2 z-50 flex items-center gap-2">
 				<HomeButton />
 				<BrowZarrPopover />
-				<Link href="/docs" className="text-sm underline sm:inline-block" target="_blank" rel="noopener noreferrer">
+				<Link
+					href="/docs"
+					className="text-sm underline sm:inline-block"
+					target="_blank"
+					rel="noopener noreferrer"
+				>
 					docs
 				</Link>
 			</div>
@@ -28,9 +41,7 @@ export default function ClientRoot({ children }: { children: React.ReactNode })
 				<GithubButton />
 				<ThemeSwitch />
 			</div>
-			<main className="min-h-screen">
-				{children}
-			</main>
+			<main className="min-h-screen">{children}</main>
 			<Footer />
 		</ThemeProvider>
 	);

src/components/ui/ThemeSwitch.tsx

@@ -1,57 +1,55 @@
-'use client';
+"use client";
 
-import { useState, useEffect } from 'react'
-import { useTheme } from 'next-themes'
-import { BsMoonStarsFill } from "react-icons/bs";
-import { BsSunFill } from "react-icons/bs";
-import { Button } from "@/components/ui/button"
+import { useTheme } from "next-themes";
+import { useEffect, useState } from "react";
+import { BsMoonStarsFill, BsSunFill } from "react-icons/bs";
+import { Button } from "@/components/ui/button";
 import {
-  Tooltip,
-  TooltipContent,
-  TooltipTrigger,
-} from "@/components/ui/tooltip"
-
+	Tooltip,
+	TooltipContent,
+	TooltipTrigger,
+} from "@/components/ui/tooltip";
 
 const ThemeSwitch = () => {
-  const [mounted, setMounted] = useState(false)
-  const { theme, setTheme, resolvedTheme } = useTheme()
-  
-  const toggleTheme = () => {
-    if (theme === 'dark') {
-      setTheme('light')
-    } else {
-      setTheme('dark')
-    }
-  }
-  // useEffect only runs on the client, so now we can safely show the UI
-  useEffect(() => {
-    setTimeout(() => {
-      setMounted(true);
-    }, 0);
-  }, []);
+	const [mounted, setMounted] = useState(false);
+	const { resolvedTheme, setTheme } = useTheme();
+
+	// useEffect only runs on the client, so now we can safely show the UI
+	useEffect(() => {
+		setTimeout(() => {
+			setMounted(true);
+		}, 0);
+	}, []);
 
-  const current = mounted ? (theme ?? resolvedTheme) : undefined
+	if (!mounted) return null;
 
-  return (
-    <Tooltip delayDuration={500} >
-      <TooltipTrigger asChild>
-    <Button
-      variant="ghost"
-      size="icon"
-      className="cursor-pointer"
-      onClick={toggleTheme} 
-      >
-        {!mounted ? <BsSunFill className="size-6" /> : current === 'dark' ? <BsMoonStarsFill className="size-6"/> : <BsSunFill className="size-6"/>}
-    </Button>
-    </TooltipTrigger>
-      <TooltipContent side="bottom" align="start">
-        {current === 'dark' ? 
-          <span>Switch to Light Mode</span> : 
-          <span>Switch to Dark Mode</span>
-        }
-      </TooltipContent>
-    </Tooltip>
-  )
-}
+	return (
+		<Tooltip delayDuration={500}>
+			<TooltipTrigger asChild>
+				<Button
+					variant="ghost"
+					size="icon"
+					className="cursor-pointer"
+					onClick={() =>
+						setTheme(resolvedTheme === "light" ? "dark" : "light")
+					}
+				>
+					{resolvedTheme === "light" ? (
+						<BsMoonStarsFill className="size-6" />
+					) : (
+						<BsSunFill className="size-6" />
+					)}
+				</Button>
+			</TooltipTrigger>
+			<TooltipContent side="bottom" align="start">
+				{resolvedTheme === "dark" ? (
+					<span>Switch to Light Mode</span>
+				) : (
+					<span>Switch to Dark Mode</span>
+				)}
+			</TooltipContent>
+		</Tooltip>
+	);
+};
 
-export default ThemeSwitch
+export default ThemeSwitch;