Overview
The platform has no dark mode. Many developers and late-night workers who use coworking spaces prefer dark mode for eye comfort. Without it, the platform feels less polished than competitors and ignores the OS-level preference set by a large share of users.
Context
frontend/app/globals.css — where CSS custom properties are defined; dark mode tokens go herefrontend/app/layout.tsx — where data-theme attribute is applied to <html>- The design uses Tailwind CSS — use
dark: variant classes and/or CSS variable overrides
Tasks
Files to Modify / Create
- New:
frontend/lib/store/themeStore.ts
- New:
frontend/components/ui/ThemeToggle.tsx
frontend/app/globals.cssfrontend/app/layout.tsx- Various component files (audit needed)
Overview
The platform has no dark mode. Many developers and late-night workers who use coworking spaces prefer dark mode for eye comfort. Without it, the platform feels less polished than competitors and ignores the OS-level preference set by a large share of users.
Context
frontend/app/globals.css— where CSS custom properties are defined; dark mode tokens go herefrontend/app/layout.tsx— wheredata-themeattribute is applied to<html>dark:variant classes and/or CSS variable overridesTasks
frontend/lib/store/themeStore.tsZustand store withtheme: 'light' | 'dark' | 'system'andsetTheme(theme)actionfrontend/app/layout.tsx: on mount, readthemeStore.themeand applydocument.documentElement.setAttribute('data-theme', resolvedTheme)whereresolvedThemeis'dark'if system preference is dark andtheme === 'system'globals.cssusing[data-theme="dark"] { ... }selector:frontend/components/ui/ThemeToggle.tsx— a three-way toggle button: Sun (Light) / Monitor (System) / Moon (Dark); callsthemeStore.setTheme()ThemeToggleto the user avatar dropdown menu in the navbarbg-white,text-gray-900without dark variants) and replace with CSS variable-based classes or adddark:equivalentslocalStorageso it survives page refreshFiles to Modify / Create
frontend/lib/store/themeStore.tsfrontend/components/ui/ThemeToggle.tsxfrontend/app/globals.cssfrontend/app/layout.tsx