Кастомизация

Custom CSS

Переопределяйте CSS-переменные для тонкой настройки цветов, отступов и отдельных поверхностей.

purplemux построен на системе CSS-переменных. Вы можете изменить почти всё визуальное, не трогая исходники, — вставьте правила во вкладку Внешний вид, нажмите Применить, и они мгновенно подействуют на всех подключённых клиентах.

Куда вставлять

Откройте Настройки (⌘,) и выберите Внешний вид. Вы увидите одну textarea с подписью Custom CSS.

  1. Напишите правила.
  2. Нажмите Применить. CSS внедряется в <style> на каждой странице.
  3. Нажмите Сбросить, чтобы убрать все переопределения.

CSS хранится на сервере в ~/.purplemux/config.json (customCSS), поэтому применяется на каждом подключающемся устройстве.

На уровне сервера, а не устройства
Custom CSS живёт в конфиге сервера и следует за вами в каждый браузер. Если хочется, чтобы одно устройство выглядело иначе другого, сейчас это не поддерживается.

Как это работает

Большинство цветов, поверхностей и акцентов в purplemux выставлены как CSS-переменные под :root (light) и .dark. Переопределение переменной каскадно меняет всё, где эта переменная используется, — боковую панель, диалоги, графики, бейджи статуса.

Изменить одну переменную почти всегда лучше, чем переопределять селекторы компонентов напрямую. Классы компонентов — не стабильное API; переменные — стабильное.

Минимальный пример

Чуть теплее тонировать боковую панель в светлом режиме и затемнить тёмную поверхность:

:root {
  --sidebar: oklch(0.96 0.012 80);
}

.dark {
  --background: oklch(0.05 0 0);
}

Или перекрасить бренд, не трогая остальное:

:root {
  --primary: oklch(0.55 0.16 280);
}

.dark {
  --primary: oklch(0.78 0.14 280);
}

Группы переменных

Панель Внешний вид показывает полный список под Доступные переменные. Основные категории:

  • Surface — --background, --card, --popover, --muted, --secondary, --accent, --sidebar
  • Text — --foreground и соответствующие варианты *-foreground
  • Interactive — --primary, --primary-foreground, --destructive
  • Border — --border, --input, --ring
  • Palette — --ui-blue, --ui-teal, --ui-coral, --ui-amber, --ui-purple, --ui-pink, --ui-green, --ui-gray, --ui-red
  • Semantic — --positive, --negative, --accent-color, --brand, --focus-indicator, --claude-active

Полный список токенов с дефолтными OKLCH-значениями и обоснованием дизайна — в docs/STYLE.md репозитория. Этот документ — источник истины.

Точечно по одному режиму

Оборачивайте правила в :root для светлого и .dark для тёмного. Класс ставится на <html> через next-themes.

:root {
  --muted: oklch(0.95 0.01 287);
}

.dark {
  --muted: oklch(0.18 0 0);
}

Если нужно изменить только один режим, второй можно не трогать.

А что насчёт терминала?

Терминал xterm.js использует свою палитру, выбираемую из подобранного списка, — она не управляется этими CSS-переменными. Переключайте на вкладке Терминал. См. Темы терминала.

Что дальше