feat: switching theme across entire site

Author: mazeincoding

apps/web/src/components/editor/editor-header.tsx

@@ -1,7 +1,7 @@
 "use client";
 
 import { Button } from "../ui/button";
-import { ChevronDown, ArrowLeft, SquarePen, Trash, Sun } from "lucide-react";
+import { ChevronDown, ArrowLeft, SquarePen, Trash } from "lucide-react";
 import { HeaderBase } from "../header-base";
 import { useProjectStore } from "@/stores/project-store";
 import { KeyboardShortcutsHelp } from "../keyboard-shortcuts-help";
@@ -18,16 +18,15 @@ import { RenameProjectDialog } from "../rename-project-dialog";
 import { DeleteProjectDialog } from "../delete-project-dialog";
 import { useRouter } from "next/navigation";
 import { FaDiscord } from "react-icons/fa6";
-import { useTheme } from "next-themes";
 import { PanelPresetSelector } from "./panel-preset-selector";
 import { ExportButton } from "./export-button";
+import { ThemeToggle } from "../theme-toggle";
 
 export function EditorHeader() {
   const { activeProject, renameProject, deleteProject } = useProjectStore();
   const [isDeleteDialogOpen, setIsDeleteDialogOpen] = useState(false);
   const [isRenameDialogOpen, setIsRenameDialogOpen] = useState(false);
   const router = useRouter();
-  const { theme, setTheme } = useTheme();
 
   const handleNameSave = async (newName: string) => {
     console.log("handleNameSave", newName);
@@ -117,15 +116,7 @@ export function EditorHeader() {
       <PanelPresetSelector />
       <KeyboardShortcutsHelp />
       <ExportButton />
-      <Button
-        size="icon"
-        variant="text"
-        className="h-7"
-        onClick={() => setTheme(theme === "dark" ? "light" : "dark")}
-      >
-        <Sun className="!size-[1.1rem]" />
-        <span className="sr-only">{theme === "dark" ? "Light" : "Dark"}</span>
-      </Button>
+      <ThemeToggle />
     </nav>
   );
 

apps/web/src/components/header.tsx

@@ -5,6 +5,7 @@ import { Button } from "./ui/button";
 import { ArrowRight } from "lucide-react";
 import { HeaderBase } from "./header-base";
 import Image from "next/image";
+import { ThemeToggle } from "./theme-toggle";
 
 export function Header() {
   const leftContent = (
@@ -21,7 +22,7 @@ export function Header() {
   );
 
   const rightContent = (
-    <nav className="flex items-center gap-1">
+    <nav className="flex items-center gap-2">
       <div className="flex items-center gap-4">
         <Link href="/blog">
           <Button variant="text" className="text-sm p-0">
@@ -35,11 +36,12 @@ export function Header() {
         </Link>
       </div>
       <Link href="/projects">
-        <Button size="sm" className="text-sm ml-4">
+        <Button size="sm" className="text-sm ml-2">
           Projects
           <ArrowRight className="h-4 w-4" />
         </Button>
       </Link>
+      <ThemeToggle className="mr-2" />
     </nav>
   );
 

apps/web/src/components/theme-toggle.tsx

@@ -0,0 +1,25 @@
+"use client";
+
+import { Button } from "./ui/button";
+import { Sun, Moon } from "lucide-react";
+import { useTheme } from "next-themes";
+
+interface ThemeToggleProps {
+  className?: string;
+}
+
+export function ThemeToggle({ className }: ThemeToggleProps) {
+  const { theme, setTheme } = useTheme();
+
+  return (
+    <Button
+      size="icon"
+      variant="text"
+      className="h-7"
+      onClick={() => setTheme(theme === "dark" ? "light" : "dark")}
+    >
+      <Sun className="!size-[1.1rem]" />
+      <span className="sr-only">{theme === "dark" ? "Light" : "Dark"}</span>
+    </Button>
+  );
+}