Темы редактора

Bulka поддерживает 40 встроенных цветовых тем для редактора кода. Вы можете переключать темы прямо из музыкального кода или через настройки.

Переключение темы из кода

Используйте функцию theme() для динамического переключения темы:

Автоматическое переключение тем

Можно переключать темы по очереди в такт музыке:

Все 40 тем в одном паттерне

Список всех тем

Тёмные темы (30)

Тема	Описание
`strudelTheme`	Стандартная тёмная тема (по умолчанию)
`algoboy`	Ретро-стиль Game Boy
`archBtw`	Arch Linux стиль
`androidstudio`	Android Studio
`atomone`	Atom One Dark
`aura`	Фиолетовая Aura
`bbedit`	BBEdit
`blackscreen`	Чёрный экран
`bluescreen`	Синий экран (BSOD стиль)
`CutiePi`	Милая розовая тема
`darcula`	JetBrains Darcula
`dracula`	Популярная Dracula
`duotoneDark`	Двухтоновая тёмная
`eclipse`	Eclipse Dark
`fruitDaw`	Fruit DAW стиль
`githubDark`	GitHub Dark
`greenText`	Зелёный текст на чёрном
`gruvboxDark`	Gruvbox Dark
`sonicPink`	Sonic Pink
`materialDark`	Material Dark
`monokai`	Классическая Monokai
`noctisLilac`	Noctis Lilac
`nord`	Nord (скандинавский стиль)
`redText`	Красный текст на чёрном
`solarizedDark`	Solarized Dark
`sublime`	Sublime Text
`teletext`	Телетекст ретро
`tokyoNight`	Tokyo Night
`tokyoNightStorm`	Tokyo Night Storm
`vscodeDark`	VS Code Dark

Светлые темы (10)

Тема	Описание
`bluescreenlight`	Светлый синий
`githubLight`	GitHub Light
`gruvboxLight`	Gruvbox Light
`materialLight`	Material Light
`solarizedLight`	Solarized Light
`tokyoNightDay`	Tokyo Night Day
`vscodeLight`	VS Code Light
`whitescreen`	Белый экран
`xcodeLight`	Xcode Light

Переключение через настройки

Откройте панель настроек (иконка шестерёнки)
Найдите раздел “Theme”
Выберите тему из выпадающего списка

Выбранная тема сохраняется в localStorage и восстанавливается при следующем посещении.

Создание кастомных тем

Каждая тема определяется в отдельном .mjs файле в папке packages/codemirror/themes/.

Структура темы

import { tags as t } from '@lezer/highlight';
import { createTheme } from './theme-helper.mjs';

// Основные настройки цветов
export const settings = {
  background: '#222',           // Фон редактора
  lineBackground: '#22222299',  // Фон строки кода
  foreground: '#fff',           // Цвет текста
  caret: '#ffcc00',             // Цвет курсора
  selection: 'rgba(128, 203, 196, 0.5)', // Цвет выделения
  selectionMatch: '#036dd626',  // Цвет совпадений при поиске
  lineHighlight: '#00000050',   // Подсветка активной строки
  gutterBackground: 'transparent', // Фон панели номеров строк
  gutterForeground: '#8a919966',   // Цвет номеров строк
  light: false,                 // true для светлых тем
};

// Создание темы с подсветкой синтаксиса
export default createTheme({
  theme: 'dark', // или 'light'
  settings,
  styles: [
    { tag: t.keyword, color: '#c792ea' },      // Ключевые слова
    { tag: t.string, color: '#c3e88d' },       // Строки
    { tag: t.number, color: '#c3e88d' },       // Числа
    { tag: t.comment, color: '#7d8799' },      // Комментарии
    { tag: t.variableName, color: '#c792ea' }, // Переменные
    { tag: t.operator, color: '#89ddff' },     // Операторы
    { tag: t.bracket, color: '#525154' },      // Скобки
  ],
});

Доступные теги для подсветки синтаксиса

t.keyword — ключевые слова (if, else, function)
t.string — строки в кавычках
t.number — числа
t.comment — комментарии
t.variableName — имена переменных
t.operator — операторы (+, -, *, /)
t.bracket — скобки
t.propertyName — свойства объектов
t.className — имена классов
t.tagName — теги
t.meta — метаданные
t.atom — атомарные значения
t.bool — булевы значения

Добавление новой темы

Создайте файл packages/codemirror/themes/my-theme.mjs
Экспортируйте settings и тему по умолчанию
Импортируйте тему в packages/codemirror/themes.mjs
Добавьте в объекты themes и settings

После этого тема будет доступна через theme("myTheme") и в настройках.

Ссылки

Исходный код тем