feat: Add color mode toggle with system preference support

backend/docker-files/docker-compose.yml

@@ -17,7 +17,7 @@ services:
       - POSTGRES_PASSWORD=password
       - POSTGRES_DB=hopp
     ports:
-      - '5432:5432'
+      - '5433:5432'
     volumes:
       - ./docker_data/postgres:/var/lib/postgresql/data
 

backend/env-files/.env.local

@@ -7,4 +7,4 @@ LIVEKIT_API_SECRET=secret
 LIVEKIT_SERVER_URL=ws://localhost:7880
 SESSION_SECRET=renkey-hash-key
 REDIS_URI=redis://localhost:6379/0?protocol=3
-DATABASE_DSN=postgres://hopp:password@localhost:5432/hopp?sslmode=disable
+DATABASE_DSN=postgres://hopp:password@localhost:5433/hopp?sslmode=disable

package.json

@@ -25,5 +25,14 @@
   "packageManager": "yarn@4.9.2",
   "installConfig": {
     "hoistingLimits": "workspaces"
+  },
+  "dependencies": {
+    "@chakra-ui/icons": "2.2.4",
+    "@chakra-ui/react": "^3.27.1",
+    "@emotion/react": "^11.14.0",
+    "@emotion/styled": "^11.14.1",
+    "framer-motion": "^12.23.22",
+    "next-themes": "^0.4.6",
+    "react-icons": "^5.5.0"
   }
 }

web-app/package.json

@@ -23,12 +23,13 @@
     "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.1",
     "lucide-react": "^0.542.0",
+    "next-themes": "^0.4.6",
     "posthog-js": "^1.249.0",
     "react": "^18.2.0",
     "react-cookie": "^7.2.2",
     "react-dom": "^18.2.0",
     "react-hot-toast": "^2.5.2",
-    "react-icons": "^5.4.0",
+    "react-icons": "^5.5.0",
     "react-router": "^7.1.5",
     "react-router-dom": "^7.1.5",
     "react-select": "^5.10.1",
@@ -43,6 +44,7 @@
   "devDependencies": {
     "@eslint/js": "^9.19.0",
     "@tailwindcss/postcss": "^4.1.13",
+    "@tailwindcss/vite": "^4.1.14",
     "@types/node": "^22.13.4",
     "@types/react": "^18.2.15",
     "@types/react-dom": "^18.2.7",

web-app/src/App.tsx

@@ -16,6 +16,7 @@ import { BACKEND_URLS, META } from "./constants";
 import { PostHogProvider } from "posthog-js/react";
 import { PostHogConfig } from "posthog-js";
 import { InvitationHandler } from "./pages/InvitationHandler";
+import { ColorModeProvider } from "@/components/ui/color-mode";
 
 const options: Partial<PostHogConfig> = {
   api_host: "https://eu.i.posthog.com",
@@ -53,16 +54,18 @@ const Providers = ({ requireAuth, overrideRedirect = false }: { requireAuth: boo
       <PostHogProvider apiKey="phc_qOumHIIkywfbcmxjoI84orWP5Wo2oZVamh83bOUeF5x" options={options}>
         <QueryClientProvider client={queryClient}>
           <QueryProvider>
-            <ReactQueryDevtools initialIsOpen={false} />
-            {!authToken && <Outlet />}
-            {authToken && (
-              <SidebarProvider>
-                <HoppSidebar />
-                <main className="p-8 w-full">
-                  <Outlet />
-                </main>
-              </SidebarProvider>
-            )}
+            <ColorModeProvider>
+              <ReactQueryDevtools initialIsOpen={false} />
+              {!authToken && <Outlet />}
+              {authToken && (
+                <SidebarProvider>
+                  <HoppSidebar />
+                  <main className="p-8 w-full">
+                    <Outlet />
+                  </main>
+                </SidebarProvider>
+              )}
+            </ColorModeProvider>
           </QueryProvider>
         </QueryClientProvider>
       </PostHogProvider>

web-app/src/components/sidebar.tsx

@@ -13,6 +13,7 @@ import Logo from "@/assets/Hopp.png";
 import { Button } from "./ui/button";
 import { resetAllStores, useHoppStore } from "@/store/store";
 import { useAPI } from "@/hooks/useQueryClients";
+import { ColorModeButton } from "@/components/ui/color-mode-button";
 
 const items = [
   {
@@ -82,16 +83,19 @@ export function HoppSidebar() {
         </SidebarGroup>
       </SidebarContent>
       <SidebarFooter>
-        <Button
-          variant="outline"
-          className="w-full flex flex-row justify-start max-w-min items-start gap-2"
-          onClick={() => {
-            resetAllStores();
-            setAuthToken(null);
-          }}
-        >
-          <HiArrowRightStartOnRectangle /> Logout
-        </Button>
+        <div className="flex items-center gap-2 px-2">
+          <ColorModeButton />
+          <Button
+            variant="outline"
+            className="flex flex-row justify-start items-start gap-2"
+            onClick={() => {
+              resetAllStores();
+              setAuthToken(null);
+            }}
+          >
+            <HiArrowRightStartOnRectangle /> Logout
+          </Button>
+        </div>
       </SidebarFooter>
     </Sidebar>
   );

web-app/src/components/ui/color-mode-button.tsx

@@ -0,0 +1,18 @@
+import { Button } from "@/components/ui/button"
+import { useColorMode } from "./color-mode"
+import { LuMoon, LuSun } from "react-icons/lu"
+
+export const ColorModeButton = () => {
+  const { toggleColorMode, colorMode } = useColorMode()
+  return (
+    <Button 
+      onClick={toggleColorMode} 
+      variant="outline" 
+      size="icon"
+      className="size-9"
+      aria-label="Toggle color mode"
+    >
+      {colorMode === "light" ? <LuSun className="h-[1.2rem] w-[1.2rem]" /> : <LuMoon className="h-[1.2rem] w-[1.2rem]" />}
+    </Button>
+  )
+}

web-app/src/components/ui/color-mode.tsx

@@ -0,0 +1,43 @@
+import { createContext, useContext, useEffect, useState } from 'react'
+
+type ColorMode = 'light' | 'dark'
+type ColorModeContextType = {
+  colorMode: ColorMode
+  toggleColorMode: () => void
+}
+
+const ColorModeContext = createContext<ColorModeContextType | undefined>(undefined)
+
+export function ColorModeProvider({ children }: { children: React.ReactNode }) {
+  const [colorMode, setColorMode] = useState<ColorMode>(() => {
+    // Check localStorage and system preference
+    const savedMode = localStorage.getItem('color-mode') as ColorMode
+    if (savedMode) return savedMode
+    return window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light'
+  })
+
+  useEffect(() => {
+    const root = window.document.documentElement
+    root.classList.remove('light', 'dark')
+    root.classList.add(colorMode)
+    localStorage.setItem('color-mode', colorMode)
+  }, [colorMode])
+
+  const toggleColorMode = () => {
+    setColorMode(prev => prev === 'light' ? 'dark' : 'light')
+  }
+
+  return (
+    <ColorModeContext.Provider value={{ colorMode, toggleColorMode }}>
+      {children}
+    </ColorModeContext.Provider>
+  )
+}
+
+export function useColorMode() {
+  const context = useContext(ColorModeContext)
+  if (context === undefined) {
+    throw new Error('useColorMode must be used within a ColorModeProvider')
+  }
+  return context
+}

web-app/src/main.tsx

@@ -7,4 +7,4 @@ createRoot(document.getElementById('root')!).render(
   <StrictMode>
     <App />
   </StrictMode>,
-)
+)