Внесение изменений -- тёмная тема

Время строить

Блок 3 был чертежом. Блок 4 – строительная площадка.

Этот блок – то, ради чего Claude Code получил своё имя. Вы увидите, как ИИ-агент открывает файлы, находит точные строки, которые нужно изменить, заменяет их хирургически точно и не трогает всё остальное. Потом вы запустите dev-сервер, посмотрите результат, скажете «сделай сайдбар темнее» – и увидите, как он сделает это снова. За секунды.

Если вы когда-нибудь делали смену темы вручную – охотясь по CSS-файлам, подбирая hex-коды, обновляя браузер 400 раз – этот блок покажется путешествием во времени.

Что мы разберём

1. Edit tool – как Claude выполняет точечные замены строк в файлах (думайте sed, но с пониманием контекста)
2. Write tool – когда Claude создаёт или полностью перезаписывает файл
3. Итерация в реальном времени – настраиваем тему, разговаривая с Claude на обычном языке
4. Запуск тестов – убеждаемся, что смена темы ничего не сломала
5. Интеграция с Git – stage, commit и просмотр диффа – всё через Claude

Система тем в ai-coderrank

Прежде чем начать редактировать, полезно понять, как устроены компоненты:

Архитектура уже подготовлена для тематизации – CSS-переменные и ThemeProvider на месте. Нам нужно лишь определить тёмную палитру и подключить её.

Как выглядят изменения

Вот пример правки, которую Claude сделает. В вашем глобальном CSS может быть:

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

Claude добавит:

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

Он делает это через Edit tool – указывая точную строку для поиска и точную строку для замены. Никаких игр с регулярками. Никаких случайных правок в других файлах. Хирургическая точность.

Промежуточный результат

К концу блока: тёмная тема работает локально. Вы увидите её в браузере, тесты пройдут, коммит будет чистым. Это первое осязаемое изменение, которое вы внесли в кодовую базу с помощью Claude Code – и далеко не последнее.

Выберите формат

Выберите формат, который подходит для вашей работы с блоком: