Making Changes — The Dark Theme

Time to Build

Block 3 was the blueprint. Block 4 is the construction site.

This is the block where Claude Code earns its name. You’re going to watch an AI agent open files, find the exact lines that need to change, replace them surgically, and leave everything else untouched. Then you’ll run the dev server, look at the result, say “make the sidebar darker,” and watch it do it again. In seconds.

If you’ve ever done a theme change by hand — hunting through CSS files, tweaking hex codes, refreshing the browser 400 times — this block will feel like time travel.

What We’ll Cover

1. The Edit tool — how Claude performs targeted string replacements in files (think sed but it understands context)
2. The Write tool — when Claude creates or completely rewrites a file
3. Live iteration — tweaking the theme by talking to Claude in plain English
4. Running tests — making sure the theme change didn’t break anything
5. Git integration — staging, committing, and reviewing the diff, all through Claude

The Theme System in ai-coderrank

Before we start editing, it helps to know how the pieces fit together:

The architecture is already set up for theming — CSS variables and a ThemeProvider are in place. We just need to define the dark palette and wire it up.

What Changes Look Like

Here’s a preview of the kind of edit Claude will make. In your global CSS, you might have:

:root {
  --background: #ffffff;
  --foreground: #1a1a1a;
}

Claude will add:

[data-theme="dark"] {
  --background: #0a0a0a;
  --foreground: #e5e5e5;
}

It does this using the Edit tool — specifying the exact string to find and the exact string to replace it with. No regex guessing games. No accidental changes to other files. Surgical.

Milestone

By the end of this block: dark theme working locally. You’ll see it in the browser, the tests will pass, and the commit will be clean. This is the first tangible change you’ve made to the codebase with Claude Code — and it won’t be the last.

Choose Your Format

Pick the format that matches how you are using the block: