Настройка темы

Обзор

Craft Agent использует систему тем из 6 цветов с поддержкой значений по умолчанию на уровне приложения и переопределений для каждого рабочего пространства.

Иерархия тем

1. Тема по умолчанию приложения: выбирается в Настройки → Внешний вид → Тема по умолчанию
2. Переопределение рабочего пространства: тема для конкретного рабочего пространства в Настройки → Внешний вид → Темы рабочих пространств
3. Готовые темы: ~/.craft-agent/themes/{name}.json — полные пакеты тем
4. Переопределения темы: ~/.craft-agent/theme.json — переопределение отдельных цветов (на уровне приложения)

Рабочие пространства без собственной темы наследуют тему по умолчанию приложения. Все настройки необязательны — в приложении есть разумные встроенные значения по умолчанию.

Темы рабочих пространств

Для каждого рабочего пространства можно задать собственную цветовую тему, которая переопределяет тему по умолчанию приложения. Настройка в Настройки → Внешний вид:

• Тема по умолчанию: задает значение по умолчанию для всего приложения (используется всеми рабочими пространствами без переопределения)
• Темы рабочих пространств: переопределения для каждого рабочего пространства; выберите «Использовать по умолчанию» или конкретную тему

Место хранения

Настройки темы рабочего пространства хранятся в конфигурации рабочего пространства:

~/.craft-agent/workspaces/{id}/config.json

{
  "id": "ws_abc123",
  "name": "Мой проект",
  "defaults": {
    "colorTheme": "nord"
  }
}

Если colorTheme опущен или не определён, рабочее пространство наследует тему по умолчанию приложения.

Система из 6 цветов

Форматы цветов

Поддерживается любой корректный формат цвета CSS:

• Шестнадцатеричный: #8b5cf6, #8b5cf6cc (с альфа-каналом)
• RGB: rgb(139, 92, 246), rgba(139, 92, 246, 0.8)
• HSL: hsl(262, 83%, 58%)
• OKLCH: oklch(0.58 0.22 293) (рекомендуется)
• Именованные: purple, rebeccapurple

Рекомендация: используйте OKLCH для цветов с равномерным восприятием яркости, которые выглядят согласованно в светлом и тёмном режимах.

Файл переопределения темы

Создайте ~/.craft-agent/theme.json, чтобы переопределить отдельные цвета:

{
  "accent": "oklch(0.58 0.22 293)",
  "dark": {
    "accent": "oklch(0.65 0.22 293)"
  }
}

Все поля необязательны. Указывайте только цвета, которые нужно переопределить.

Тёмный режим

Объект dark содержит необязательные переопределения для тёмного режима. Когда система пользователя находится в тёмном режиме:

1. Базовые цвета (на верхнем уровне) используются как значения по умолчанию
2. Любые цвета, определённые в dark, переопределяют базовые цвета

Это позволяет частично настроить тёмный режим — переопределяйте только то, что должно отличаться.

Готовые темы

Готовые темы — это полные пакеты тем, хранящиеся в ~/.craft-agent/themes/. Каждая готовая тема — это файл JSON с цветами темы и метаданными.

Схема готовой темы

{
  "name": "Dracula",
  "description": "Тёмная тема с яркими цветами",
  "author": "Zeno Rocha",
  "license": "MIT",
  "source": "https://draculatheme.com",
  "supportedModes": ["dark"],

  "background": "oklch(0.22 0.02 280)",
  "foreground": "oklch(0.95 0.01 270)",
  "accent": "oklch(0.70 0.20 320)",
  "info": "oklch(0.78 0.14 70)",
  "success": "oklch(0.72 0.18 145)",
  "destructive": "oklch(0.65 0.22 28)",

  "shikiTheme": {
    "light": "github-light",
    "dark": "dracula"
  }
}

Поля метаданных готовой темы

Установка готовых тем

1. Скачайте или создайте файл JSON темы
2. Сохраните его в ~/.craft-agent/themes/{name}.json
3. Выберите тему в Настройки → Внешний вид

Пейзажный режим

Пейзажный режим отображает полноэкранное фоновое изображение с панелями в стиле стекла. Это создаёт визуально погружающий опыт.

Включение пейзажного режима

{
  "mode": "scenic",
  "backgroundImage": "mountains.jpg",

  "background": "oklch(0.15 0.02 270 / 0.8)",
  "paper": "oklch(0.18 0.02 270 / 0.6)",
  "navigator": "oklch(0.12 0.02 270 / 0.7)",
  "popoverSolid": "oklch(0.18 0.02 270)"
}

Свойства пейзажного режима

Цвета поверхностей для стеклянных панелей

Пейзажный режим выигрывает от полупрозрачных цветов поверхностей:

Примечание: пейзажные темы автоматически принудительно включают тёмный режим для лучшего контраста с фоновыми изображениями.

Тема по умолчанию

Встроенная тема по умолчанию использует цвета OKLCH, оптимизированные для доступности:

Светлый режим:

• Фон: oklch(0.98 0.003 265) — очень светлый серый с лёгким фиолетовым оттенком
• Текст: oklch(0.185 0.01 270) — почти чёрный для высокой контрастности
• Акцент: oklch(0.58 0.22 293) — яркий фиолетовый
• Информация: oklch(0.75 0.16 70) — тёплый янтарный
• Успех: oklch(0.55 0.17 145) — чёткий зелёный
• Ошибки: oklch(0.58 0.24 28) — красный для оповещений

Тёмный режим:

• Фон: oklch(0.145 0.015 270) — глубокий тёмный с фиолетовым оттенком
• Текст: oklch(0.95 0.01 270) — почти белый
• Акцент/информация/успех/ошибки: слегка более яркие версии для лучшей видимости

Примеры

Минимальный: изменить только цвет акцента

{
  "accent": "#3b82f6"
}

Собственные фирменные цвета

{
  "accent": "oklch(0.55 0.25 250)",
  "info": "oklch(0.70 0.15 200)",
  "dark": {
    "accent": "oklch(0.65 0.25 250)",
    "info": "oklch(0.75 0.12 200)"
  }
}

Тема с высокой контрастностью

{
  "background": "#ffffff",
  "foreground": "#000000",
  "dark": {
    "background": "#000000",
    "foreground": "#ffffff"
  }
}

Обновления в реальном времени

Изменения темы применяются сразу — перезапуск не требуется. Отредактируйте theme.json, и интерфейс обновится автоматически.

Создание темы

1. Создайте ~/.craft-agent/theme.json для переопределений или ~/.craft-agent/themes/{name}.json для готовой темы
2. Добавьте только те цвета, которые хотите настроить
3. При необходимости добавьте переопределения dark для тёмного режима

Советы:

• Начните только с accent, чтобы быстро персонализировать тему
• Используйте OKLCH для предсказуемого поведения цветов
• Проверяйте в светлом и тёмном режимах
• Сохраняйте доступные соотношения контраста (текст на фоне)

Устранение неполадок

Тема не применяется:

• Проверьте, что синтаксис JSON корректен
• Убедитесь, что файл находится в правильном месте (~/.craft-agent/theme.json для переопределений, ~/.craft-agent/themes/ для готовых тем)
• Проверьте, что значения цветов являются корректными цветами CSS

Цвета выглядят неправильно в тёмном режиме:

• Добавьте явные переопределения dark
• Цвета OKLCH могут потребовать более высоких значений яркости для тёмного режима
• Проверьте, не исключает ли готовая тема текущий режим в поле supportedModes

Фоновое изображение не отображается:

• Убедитесь, что mode установлен в значение «scenic»
• Проверьте, что путь к изображению указан относительно файла темы или является корректным URL
• Убедитесь, что файл изображения существует и доступен для чтения

Справочник по цветам OKLCH

Формат OKLCH: oklch(яркость хроматичность оттенок)

• Яркость: 0–1 (0 = чёрный, 1 = белый)
• Хроматичность: 0–0.4 (0 = серый, выше = более насыщенный)
• Оттенок: 0–360 (угол цветового круга)

Частые оттенки:

• Красный: ~25
• Оранжевый: ~70
• Жёлтый: ~100
• Зелёный: ~145
• Голубой: ~195
• Синий: ~250
• Фиолетовый: ~293
• Розовый: ~330