Как сделать тему

Тема — это обычный CSS-файл. Интерфейс FgSNotes целиком собран из переменных, поэтому достаточно переопределить цвета в одном блоке :root. Селекторы компонентов переписывать не нужно.

Формат 2 работает в FgSNotes 2.0 и новее. Темы старого формата (с селекторами вроде .sidebar-toolbar) не подходят: интерфейс был переработан.

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

Положите файл my-theme.css в папку Документы/FgSNotes/themes. Папка создаётся при первом запуске приложения.
Откройте настройки → «Предпросмотр».
В пункте «Сторонняя тема» выберите файл. Тема применится сразу.

Чтобы отключить тему, выберите «Нет».

Цвета интерфейса

Все переменные необязательны, но лучше задать весь набор: так тема выглядит цельно. Образцы цветов взяты из темы Dracula.

Поверхности

Переменная	За что отвечает
`--window-bg`	Фон окна и боковой полосы. Виден по краям между панелями
`--card-bg`	Редактор и основные панели
`--header-bg`	Панель вкладок и плавающие панели
`--preview-bg`	Панель предпросмотра (обычно `var(--card-bg)`)
`--code-bg`	Блоки кода, цитаты, вставки

Текст

Переменная	За что отвечает
`--text-color`	Основной текст
`--text-muted`	Подписи, подсказки, неактивные элементы

Линии и состояния

Переменная	За что отвечает
`--border-color`	Тонкие линии и рамки
`--hover-color`	Наведение на кнопки и вкладки
`--active-bg`	Выбранная вкладка и режим
`--selection`	Выделение текста (с прозрачностью)

Акцент

Переменная	За что отвечает
`--accent-color`	Главные кнопки, переключатели, ползунки
`--accent-text`	Текст на акцентном цвете
`--link-color`	Ссылки в предпросмотре
`--success-color`	Значок «Черновик сохранён»

--shadow-color задаёт цвет теней у плавающих панелей. Если тема светлая, добавьте color-scheme: light, чтобы системные элементы (полосы прокрутки, поля) тоже стали светлыми.

Подсветка кода

Те же переменные раскрашивают блоки кода в предпросмотре и разметку в редакторе.

Переменная	За что отвечает
`--syn-keyword`	Ключевые слова: `const`, `def`
`--syn-string`	Строки
`--syn-number`	Числа
`--syn-comment`	Комментарии
`--syn-function`	Вызовы функций
`--syn-type`	Типы и классы
`--syn-field`	Поля и ключи JSON
`--syn-tag`	HTML-теги
`--syn-attr`	Атрибуты и флаги
`--syn-annotation`	Аннотации и язык в ограждении ```
`--syn-heading`	Заголовки Markdown в редакторе
`--syn-mark`	Служебные символы: `#`, `**`, `[]`

Шаблон темы

Скопируйте файл целиком и замените цвета. Блок работает и для светлой, и для тёмной темы приложения.

:root, [data-theme="dark"], [data-theme="light"] {
    color-scheme: dark;
    --window-bg: #242933;
    --bg-color: var(--window-bg);
    --card-bg: #2e3440;
    --header-bg: #3b4252;
    --preview-bg: var(--card-bg);
    --text-color: #d8dee9;
    --text-muted: #7b88a1;
    --border-color: #434c5e;
    --hover-color: #3a404c;
    --active-bg: #464c58;
    --accent-color: #88c0d0;
    --accent-text: #111111;
    --link-color: #81a1c1;
    --code-bg: #282e39;
    --selection: #88c0d059;
    --success-color: #5fb865;
    --shadow-color: #0009;
    --syn-keyword: #81a1c1;
    --syn-string: #a3be8c;
    --syn-number: #b48ead;
    --syn-comment: #616e88;
    --syn-function: #88c0d0;
    --syn-type: #8fbcbb;
    --syn-field: #88c0d0;
    --syn-tag: #81a1c1;
    --syn-attr: #8fbcbb;
    --syn-annotation: #d08770;
    --syn-heading: #88c0d0;
    --syn-mark: #7b88a1;
}

Свои правила

Кроме переменных можно добавить обычный CSS. Устойчивые точки опоры: .workspace, .sidebar-toolbar, .document-bar, .tab-item.active, .editor-column, .preview-column, .editor-tools, .status-bar, .preview-content.

Например, градиентный фон окна (сплошной цвет --window-bg всё равно задайте как запасной):

body, .workspace { background: linear-gradient(135deg, #12132b 0%, #2a1650 100%); }

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

Проверка и публикация

Откройте документ с заголовками, списком, цитатой, таблицей и блоками кода: так видны все цвета.
Проверьте контраст текста с фоном: не ниже 4.5:1 для основного текста и 3:1 для подписей.
Переключите режимы «Редактор», «Рядом», «Просмотр» и откройте настройки.
Сделайте скриншот и пришлите тему вместе с файлом через GitHub.