Темы оформления

AIKraft Agents использует 6-цветную систему тем, которая позволяет настроить визуальное оформление. Вы можете переопределять отдельные цвета или устанавливать готовые темы с полным визуальным стилем.

Иерархия тем

Темы применяются в следующем порядке приоритета:

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

Workspace без собственной темы наследует тему по умолчанию приложения.

Темы для workspace

Каждый workspace может иметь собственную цветовую тему, которая переопределяет тему по умолчанию приложения. Это позволяет визуально различать разные проекты или контексты.

Настройка тем для workspace

1. Откройте Settings → Appearance
2. В секции Default Theme установите тему по умолчанию для всего приложения
3. В секции Workspace Themes выберите тему для каждого workspace:
   • Use Default — наследует тему по умолчанию приложения
   • Custom theme — выбрать конкретную готовую тему

Изменения тем применяются немедленно во всех окнах. Если у вас открыто несколько окон с одним и тем же workspace, они все обновляются в реальном времени.

Местоположение хранилища

Настройки тем для workspace хранятся в конфигурации workspace:

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

{
  "id": "ws_abc123",
  "name": "My Project",
  "defaults": {
    "colorTheme": "nord"
  }
}

Когда colorTheme опущен или не определён, workspace наследует тему по умолчанию приложения.

Это тема по умолчанию для конкретного workspace. Она переопределяет тему по умолчанию приложения для новых и существующих сессий в этом workspace.

6-цветная система

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

Создайте ~/.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": "A dark theme with vibrant colors",
  "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. Выберите тему в Settings → Appearance

Режим Scenic

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

Включение режима Scenic

{
  "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)"
}

Свойства режима Scenic

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

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

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

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

Поддерживаются любые допустимые CSS-форматы цвета:

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

Справочник OKLCH

Формат OKLCH: oklch(lightness chroma hue)

Распространённые оттенки:

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

Примеры

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

{
  "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, и интерфейс обновится автоматически.

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

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

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

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

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

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

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

Советы

Начните с простого акцента

Изменение только цвета акцента — самый быстрый способ персонализировать приложение.

Используйте OKLCH для предсказуемости

Цвета OKLCH ведут себя более предсказуемо в светлом и тёмном режимах по сравнению с hex или RGB.

Тестируйте в обоих режимах

Всегда проверяйте тему в светлом и тёмном режимах, чтобы обеспечить читаемость.

Соблюдайте доступный контраст

Обеспечьте достаточный контраст между цветами текста и фона.