stateful darkmode toggle

monneyboi · monneyboi · commit e26e9478f5dd · 2025-12-15T00:45:30.000+01:00
diff --git a/poliloom-gui/src/app/globals.css b/poliloom-gui/src/app/globals.css
@@ -132,8 +132,9 @@
   --font-mono: var(--font-monaspace);
 }
 
+/* Dark mode: apply when .dark class is set, or when system prefers dark and no override */
 @media (prefers-color-scheme: dark) {
-  :root {
+  :root:not(.light) {
     /* Backgrounds */
     --background: #0a0a0a;
     --surface: #18181b; /* zinc-900 */
@@ -192,6 +193,65 @@
   }
 }
 
+/* Manual dark mode override */
+:root.dark {
+  /* Backgrounds */
+  --background: #0a0a0a;
+  --surface: #18181b; /* zinc-900 */
+  --surface-muted: #1f1f23;
+  --surface-hover: #27272a; /* zinc-800 */
+  --surface-active: #3f3f46; /* zinc-700 */
+
+  /* Text */
+  --foreground: #ededed;
+  --foreground-secondary: #d4d4d8; /* zinc-300 */
+  --foreground-tertiary: #a1a1aa; /* zinc-400 */
+  --foreground-muted: #71717a; /* zinc-500 */
+  --foreground-subtle: #52525b; /* zinc-600 */
+
+  /* Borders */
+  --border-muted: #27272a; /* zinc-800 */
+  --border: #3f3f46; /* zinc-700 */
+  --border-strong: #52525b; /* zinc-600 */
+
+  /* Primary/Accent (Indigo) */
+  --accent: #6366f1; /* indigo-500 */
+  --accent-hover: #818cf8; /* indigo-400 */
+  --accent-foreground: #a5b4fc; /* indigo-300 */
+  --accent-foreground-hover: #c7d2fe; /* indigo-200 */
+  --accent-muted: rgba(99, 102, 241, 0.15);
+  --accent-muted-hover: rgba(99, 102, 241, 0.25);
+  --accent-light: #4f46e5; /* indigo-600 */
+  --accent-border-hover: #6366f1; /* indigo-500 */
+  --accent-on-muted: #c7d2fe; /* indigo-200 */
+  --accent-on-solid: #ffffff;
+  --accent-on-solid-muted: #a5b4fc; /* indigo-300 - dimmed text on solid */
+
+  /* Success (Green) */
+  --success: #22c55e; /* green-500 */
+  --success-bright: #22c55e; /* green-500 */
+  --success-muted: rgba(34, 197, 94, 0.15);
+  --success-muted-hover: rgba(34, 197, 94, 0.25);
+  --success-foreground: #86efac; /* green-300 */
+
+  /* Danger (Red) */
+  --danger: #ef4444; /* red-500 */
+  --danger-bright: #f87171; /* red-400 */
+  --danger-muted: rgba(239, 68, 68, 0.15);
+  --danger-muted-hover: rgba(239, 68, 68, 0.25);
+  --danger-foreground: #fca5a5; /* red-300 */
+  --danger-foreground-hover: #fecaca; /* red-200 */
+  --danger-subtle: #fca5a5; /* red-300 */
+  --danger-deep: rgba(127, 29, 29, 0.8);
+
+  /* Info (Blue) */
+  --info: #3b82f6; /* blue-500 */
+  --info-hover: #60a5fa; /* blue-400 */
+  --info-muted: rgba(59, 130, 246, 0.15);
+  --info-muted-hover: rgba(59, 130, 246, 0.25);
+  --info-foreground: #93c5fd; /* blue-300 */
+}
+
 body {
   background: var(--background);
   color: var(--foreground);
diff --git a/poliloom-gui/src/app/layout.tsx b/poliloom-gui/src/app/layout.tsx
@@ -1,5 +1,6 @@
 import type { Metadata } from 'next'
 import Script from 'next/script'
+import { cookies } from 'next/headers'
 import './globals.css'
 import { auth } from '@/auth'
 import { SessionProvider } from '@/components/SessionProvider'
@@ -27,9 +28,12 @@ export default async function RootLayout({
   children: React.ReactNode
 }>) {
   const session = await auth()
+  const cookieStore = await cookies()
+  const themeCookie = cookieStore.get('poliloom_theme')?.value
+  const themeClass = themeCookie === 'light' || themeCookie === 'dark' ? themeCookie : ''
 
   return (
-    <html lang="en">
+    <html lang="en" className={themeClass}>
       <head>
         <Script
           src="https://cloud.umami.is/script.js"
diff --git a/poliloom-gui/src/components/layout/Header.tsx b/poliloom-gui/src/components/layout/Header.tsx
@@ -1,17 +1,33 @@
 'use client'
 
-import { useState, useEffect } from 'react'
+import { useState, useEffect, useSyncExternalStore } from 'react'
 import { useSession, signOut, signIn } from 'next-auth/react'
 import Image from 'next/image'
 import Link from 'next/link'
 import { Button } from '@/components/ui/Button'
 import { SpinningCounter } from '@/components/ui/SpinningCounter'
 import { useEvaluationCount } from '@/contexts/EvaluationCountContext'
+import { useUserPreferences } from '@/contexts/UserPreferencesContext'
 
 export function Header() {
   const { status } = useSession()
   const [menuOpen, setMenuOpen] = useState(false)
   const { evaluationCount } = useEvaluationCount()
+  const { theme, setTheme } = useUserPreferences()
+  const systemTheme = useSyncExternalStore(
+    (cb) => {
+      const mq = window.matchMedia('(prefers-color-scheme: dark)')
+      mq.addEventListener('change', cb)
+      return () => mq.removeEventListener('change', cb)
+    },
+    () => (window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light'),
+    () => 'light',
+  )
+  const resolvedTheme = theme ?? systemTheme
+
+  const toggleTheme = () => {
+    setTheme(resolvedTheme === 'dark' ? 'light' : 'dark')
+  }
 
   useEffect(() => {
     if (!menuOpen) return
@@ -71,6 +87,33 @@ export function Header() {
             />
           </Button>
         )}
+        <Button
+          onClick={toggleTheme}
+          variant="secondary"
+          size="small"
+          title={`Switch to ${resolvedTheme === 'dark' ? 'light' : 'dark'} mode`}
+          aria-label={`Switch to ${resolvedTheme === 'dark' ? 'light' : 'dark'} mode`}
+        >
+          {resolvedTheme === 'dark' ? (
+            <svg
+              xmlns="http://www.w3.org/2000/svg"
+              viewBox="0 0 24 24"
+              fill="currentColor"
+              className="w-4 h-4"
+            >
+              <path d="M21.752 15.002A9.72 9.72 0 0 1 18 15.75c-5.385 0-9.75-4.365-9.75-9.75 0-1.33.266-2.597.748-3.752A9.753 9.753 0 0 0 3 11.25C3 16.635 7.365 21 12.75 21a9.753 9.753 0 0 0 9.002-5.998Z" />
+            </svg>
+          ) : (
+            <svg
+              xmlns="http://www.w3.org/2000/svg"
+              viewBox="0 0 24 24"
+              fill="currentColor"
+              className="w-4 h-4"
+            >
+              <path d="M12 2.25a.75.75 0 0 1 .75.75v2.25a.75.75 0 0 1-1.5 0V3a.75.75 0 0 1 .75-.75ZM7.5 12a4.5 4.5 0 1 1 9 0 4.5 4.5 0 0 1-9 0ZM18.894 6.166a.75.75 0 0 0-1.06-1.06l-1.591 1.59a.75.75 0 1 0 1.06 1.061l1.591-1.59ZM21.75 12a.75.75 0 0 1-.75.75h-2.25a.75.75 0 0 1 0-1.5H21a.75.75 0 0 1 .75.75ZM17.834 18.894a.75.75 0 0 0 1.06-1.06l-1.59-1.591a.75.75 0 1 0-1.061 1.06l1.591 1.591ZM12 18a.75.75 0 0 1 .75.75V21a.75.75 0 0 1-1.5 0v-2.25A.75.75 0 0 1 12 18ZM7.758 17.303a.75.75 0 0 0-1.061-1.06l-1.591 1.59a.75.75 0 0 0 1.06 1.061l1.591-1.59ZM6 12a.75.75 0 0 1-.75.75H3a.75.75 0 0 1 0-1.5h2.25A.75.75 0 0 1 6 12ZM6.697 7.757a.75.75 0 0 0 1.06-1.06l-1.59-1.591a.75.75 0 0 0-1.061 1.06l1.59 1.591Z" />
+            </svg>
+          )}
+        </Button>
         {status === 'authenticated' ? (
           <Button
             onClick={() => signOut({ callbackUrl: '/' })}
diff --git a/poliloom-gui/src/contexts/UserPreferencesContext.test.tsx b/poliloom-gui/src/contexts/UserPreferencesContext.test.tsx
@@ -42,6 +42,21 @@ describe('UserPreferencesContext', () => {
       value: ['en-US', 'en'],
     })
 
+    // Mock window.matchMedia for theme detection
+    Object.defineProperty(window, 'matchMedia', {
+      writable: true,
+      value: vi.fn().mockImplementation((query: string) => ({
+        matches: false,
+        media: query,
+        onchange: null,
+        addListener: vi.fn(),
+        removeListener: vi.fn(),
+        addEventListener: vi.fn(),
+        removeEventListener: vi.fn(),
+        dispatchEvent: vi.fn(),
+      })),
+    })
+
     // Mock fetch
     fetchMock = vi.fn<typeof fetch>()
     global.fetch = fetchMock as typeof fetch
diff --git a/poliloom-gui/src/contexts/UserPreferencesContext.tsx b/poliloom-gui/src/contexts/UserPreferencesContext.tsx
@@ -16,6 +16,8 @@ import {
   WikidataEntity,
 } from '@/types'
 
+export type Theme = 'light' | 'dark' | undefined
+
 interface UserPreferencesContextType {
   filters: PreferenceResponse[]
   languages: LanguageResponse[]
@@ -26,6 +28,8 @@ interface UserPreferencesContextType {
   updateFilters: (type: PreferenceType, items: WikidataEntity[]) => void
   isAdvancedMode: boolean
   setAdvancedMode: (enabled: boolean) => void
+  theme: Theme
+  setTheme: (theme: 'light' | 'dark') => void
 }
 
 export const UserPreferencesContext = createContext<UserPreferencesContextType | undefined>(
@@ -34,6 +38,7 @@ export const UserPreferencesContext = createContext<UserPreferencesContextType |
 
 const FILTERS_STORAGE_KEY = 'poliloom_evaluation_filters'
 const ADVANCED_MODE_KEY = 'poliloom_advanced_mode'
+const THEME_COOKIE_NAME = 'poliloom_theme'
 
 // Advanced mode uses useSyncExternalStore for SSR safety
 function getAdvancedModeSnapshot(): boolean {
@@ -50,6 +55,33 @@ function subscribeToAdvancedMode(callback: () => void): () => void {
   return () => window.removeEventListener('storage', callback)
 }
 
+// Theme helpers
+function getThemeCookie(): Theme {
+  if (typeof document === 'undefined') return undefined
+  const match = document.cookie.match(new RegExp(`${THEME_COOKIE_NAME}=([^;]+)`))
+  const value = match?.[1]
+  if (value === 'light' || value === 'dark') return value
+  return undefined
+}
+
+function subscribeToTheme(callback: () => void): () => void {
+  window.addEventListener('storage', callback)
+  return () => window.removeEventListener('storage', callback)
+}
+
+function applyThemeToDocument(theme: 'light' | 'dark') {
+  if (typeof document === 'undefined') return
+  const root = document.documentElement
+  root.classList.remove('light', 'dark')
+  root.classList.add(theme)
+}
+
+function setThemeCookie(theme: 'light' | 'dark') {
+  if (typeof document === 'undefined') return
+  const maxAge = 365 * 24 * 60 * 60 // 1 year
+  document.cookie = `${THEME_COOKIE_NAME}=${theme}; path=/; max-age=${maxAge}; SameSite=Lax`
+}
+
 // Helper function to detect browser language and match with available languages
 const detectBrowserLanguage = (availableLanguages: LanguageResponse[]): WikidataEntity[] => {
   try {
@@ -109,6 +141,15 @@ export function UserPreferencesProvider({ children }: { children: React.ReactNod
     forceUpdate((n) => n + 1)
   }, [])
 
+  // Theme state
+  const theme = useSyncExternalStore(subscribeToTheme, getThemeCookie, () => undefined)
+
+  const setTheme = useCallback((newTheme: 'light' | 'dark') => {
+    setThemeCookie(newTheme)
+    applyThemeToDocument(newTheme)
+    forceUpdate((n) => n + 1)
+  }, [])
+
   // Fetch available languages
   useEffect(() => {
     const fetchLanguages = async () => {
@@ -218,6 +259,8 @@ export function UserPreferencesProvider({ children }: { children: React.ReactNod
     updateFilters,
     isAdvancedMode,
     setAdvancedMode,
+    theme,
+    setTheme,
   }
 
   return <UserPreferencesContext.Provider value={value}>{children}</UserPreferencesContext.Provider>
diff --git a/poliloom-gui/src/test/test-utils.tsx b/poliloom-gui/src/test/test-utils.tsx
@@ -63,6 +63,8 @@ const MockUserPreferencesProvider = ({ children }: { children: React.ReactNode }
       updateFilters: vi.fn(),
       isAdvancedMode: false,
       setAdvancedMode: vi.fn(),
+      theme: undefined,
+      setTheme: vi.fn(),
     }}
   >
     {children}

Original file line number	Diff line number	Diff line change
`@@ -63,6 +63,8 @@ const MockUserPreferencesProvider = ({ children }: { children: React.ReactNode }`
`63`	`63`	`updateFilters: vi.fn(),`
`64`	`64`	`isAdvancedMode: false,`
`65`	`65`	`setAdvancedMode: vi.fn(),`
	`66`	`+ theme: undefined,`
	`67`	`+ setTheme: vi.fn(),`
`66`	`68`	`}}`
`67`	`69`	`>`
`68`	`70`	`{children}`