Claude Code

Work with Claude directly in your codebase. Build, debug, and ship from your terminal, IDE, Slack, web, and more.

Available for macOS, Linux, and Windows.

Other ways to use Claude Code:

acme-dashboard/Add a dark mode toggle to settings

Add a dark mode toggle to the settings page. Should remember the choice and follow the system default until they pick one.

There's already a ThemeProvider wrapping the app but it's hard-wired to light. I'll lift the mode into context, persist it to localStorage, and add a Light / Dark segmented control under Settings → Appearance.

just now

src/theme/ThemeProvider.tsx

10export function ThemeProvider({children}: {children: ReactNode}) {

11+ const prefersDark = useMediaQuery('(prefers-color-scheme: dark)')

12 const stored = localStorage.getItem('theme')

13+ const [mode, setMode] = useState(stored ?? (prefersDark ? 'dark' : 'light'))

15+ useEffect(() => {

16+ localStorage.setItem('theme', mode)

17+ }, [mode])

19 return (

20 <ThemeContext.Provider value={{mode, setMode}}>

21 {children}

Done — the Appearance section now has the toggle. Preview's on the right; flip it and the whole app should follow. Reduce-motion and density rows are stubbed so the page doesn't look bare.

just now

#112acme-dashboardclaude/settings-dark-mode-Xk4fq CI

Extra high