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

Get started with Claude Code

Pro

Claude Code is included in your Pro plan. Perfect for short coding sprints in small codebases.

$17

Per month with annual subscription discount ($200 billed up front). $20 if billed monthly.

Try Claude

Max 5x

Claude Code is included in your Max plan. Great value for everyday use in larger codebases.

$100

Per month

Try Claude

Max 20x

Even more Claude Code included in your Max plan. Great value for power users with the most access to Claude models.

$200

Per month

Try Claude