feat: Dark Mode + Support Login, Registration, Music, Ticket Actions, KB/Automation CRUD, Service/Stat-Item-Management

frontend/src/components/layout/Topbar.tsx

@@ -1,4 +1,6 @@
-import { Chip } from '@heroui/react';
+import { Button, Chip } from '@heroui/react';
+import { Moon, Sun } from 'lucide-react';
+import { useEffect, useState } from 'react';
 
 type Props = {
   guildName: string;
@@ -7,6 +9,13 @@ type Props = {
 };
 
 export function Topbar({ guildName, statusMessage, children }: Props) {
+  const [dark, setDark] = useState(() => localStorage.getItem('papo-theme') !== 'light');
+
+  useEffect(() => {
+    document.documentElement.classList.toggle('dark', dark);
+    localStorage.setItem('papo-theme', dark ? 'dark' : 'light');
+  }, [dark]);
+
   return (
     <div className="mb-6 flex flex-col gap-4 sm:flex-row sm:items-center sm:justify-between">
       <div>
@@ -17,6 +26,9 @@ export function Topbar({ guildName, statusMessage, children }: Props) {
         {statusMessage && (
           <Chip color="warning" size="sm" variant="flat">{statusMessage}</Chip>
         )}
+        <Button isIconOnly radius="lg" size="sm" variant="light" onPress={() => setDark((d) => !d)}>
+          {dark ? <Sun size={16} /> : <Moon size={16} />}
+        </Button>
         {children}
       </div>
     </div>