Claude Code

Claude Code is an agent that reads your codebase, edits files, and runs commands across your terminal, IDE, desktop app, and browser. Build, debug, and ship with natural language.

Available for macOS, Linux, and Windows. Read the documentation

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'))
14 
15+ useEffect(() => {
16+ localStorage.setItem('theme', mode)
17+ }, [mode])
18 
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 (opens in new tab)

Max 5x

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

Max 20x

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

Usage limits apply. Prices shown don't include applicable tax. Price and plans are subject to change at Anthropic's discretion.

What could you do with Claude Code?

I'm new to this codebase. Can you explain it to me?

⏺ I'll analyze the Excalidraw codebase structure and provide a high-level overview.

⏺ Analyze(what: "Excalidraw codebase structure and provide a high-level overview of what it is, its main components, and how they're organized. Focus on understanding the project's purpose, architecture, and key features.")

Excalidraw is an open-source virtual whiteboard application with a hand-drawn style. It's designed for creating diagrams, wireframes, and collaborative drawings.

## Purpose
- Web-based drawing tool with infinite canvas
- Hand-drawn aesthetic with support for shapes, arrows, text
- End-to-end encrypted collaboration
- Works offline as a PWA (Progressive Web App)

## Architecture
The project is organized as a monorepo with these main components:

1. Core Package (packages/excalidraw)
- React component library for embedding Excalidraw in any application
- Handles drawing, rendering, and core functionality
- Uses roughjs for the hand-drawn style
- Includes export capabilities (PNG, SVG)

2. Web Application (excalidraw-app/)
- Full-featured web app at excalidraw.com
- Built on top of the core package
- Adds collaboration features, local storage, sharing

3. Support Packages
- common - Shared utilities and constants
- element - Element manipulation and type definitions
- math - Mathematical functions for drawing
- utils - General utility functions

4. Examples
- Integration examples (Next.js, browser script)
- Shows how to embed Excalidraw in different environments

5. Documentation (dev-docs/)
- API documentation
- Integration guides
- Component documentation

## Key Features
- Real-time collaboration with end-to-end encryption
- Export to various formats (PNG, SVG, JSON)
- Customizable drawing tools (rectangle, circle, arrows, freehand)
- Dark mode support
- Localization
- Library of shapes and components
- Arrow bindings and labels
- Image support

## Technology Stack
- React for UI
- TypeScript for type safety
- Firebase for collaboration backend
- Jotai for state management
- Vite for development and building
- IndexedDB/LocalStorage for offline storage

The architecture allows for both using Excalidraw as a component in other applications and as a standalone web application with additional features.
  • Code onboarding

    Claude Code maps and explains entire codebases in a few seconds. It uses agentic search to understand project structure and dependencies without you having to manually select context files.

  • Turn issues into PRs

    Stop bouncing between tools. Claude Code integrates with GitHub, GitLab, and your command line tools to handle the entire workflow—reading issues, writing code, running tests, and submitting PRs—all from your terminal.

  • Make powerful edits

    Claude Code's understanding of your codebase and dependencies enables it to make powerful, multi-file edits that work.

Meets you where you code

Claude Code running in a terminal

Start in your terminal

Super powerful terminal integration. Works with all your CLI tools alongside any IDE.

Or read the documentation

Claude Code extension in VS Code

Integrate with your editor

Native extensions for VS Code (+ Cursor, Devin Desktop) and JetBrains IDEs.

Claude Code on the web

Access anywhere

Quick access from browser, mobile app, or Claude on desktop. Great for parallel work or on-the-go coding.

Kick off coding tasks in Slack

What developers are saying

  • Claude Code has dramatically accelerated our team's coding efficiency. I can now write EDA code in a notebook—pulling data, training a model, and evaluating it with basic metrics—and then ask Claude to convert that into a Metaflow pipeline. This process saves 1-2 days of routine (and often boring!) work per model.

    Anton Biryukov, Staff Software Engineer

    Read story
  • With Claude, we're not just automating customer service—we're elevating it to truly human quality. This lets support teams think more strategically about customer experience and what makes interactions genuinely valuable.

    Fergal Reid, VP of AI

    Read story
  • Claude Code is moving our team up a level: we decide what needs to happen, and smooth the process so it can build and verify end-to-end. A big part of my job now is to keep as many instances of Claude Code busy as possible.

    Simon Last, Co-founder

    Read story

Connects with your favorite command line tools

Your terminal is where real work happens. Claude Code connects with the tools that power development—deployment, databases, monitoring, version control. Rather than adding another interface to juggle, it enhances your existing stack.

FAQ