Editor Themes 🌀 Bulka

Editor Themes

Bulka has 39 built-in color themes for the code editor. You can switch themes right from your music code or in the settings.

Switching the theme from code

Use the theme() function to switch the theme dynamically:

Switching themes automatically

You can cycle through themes in time with the music:

All 39 themes in one pattern

All themes

Dark themes (30)

ThemeDescription
strudelThemeThe standard dark theme (default)
algoboyRetro Game Boy style
archBtwArch Linux style
androidstudioAndroid Studio
atomoneAtom One Dark
auraPurple Aura
bbeditBBEdit
blackscreenBlack screen
bluescreenBlue screen (BSOD style)
CutiePiA cute pink theme
darculaJetBrains Darcula
draculaThe popular Dracula
duotoneDarkTwo-tone dark
eclipseEclipse Dark
fruitDawFruit DAW style
githubDarkGitHub Dark
greenTextGreen text on black
gruvboxDarkGruvbox Dark
sonicPinkSonic Pink
materialDarkMaterial Dark
monokaiThe classic Monokai
noctisLilacNoctis Lilac
nordNord (Scandinavian style)
redTextRed text on black
solarizedDarkSolarized Dark
sublimeSublime Text
teletextRetro teletext
tokyoNightTokyo Night
tokyoNightStormTokyo Night Storm
vscodeDarkVS Code Dark

Light themes (9)

ThemeDescription
bluescreenlightLight blue
githubLightGitHub Light
gruvboxLightGruvbox Light
materialLightMaterial Light
solarizedLightSolarized Light
tokyoNightDayTokyo Night Day
vscodeLightVS Code Light
whitescreenWhite screen
xcodeLightXcode Light

Switching in the settings

  1. Open the settings panel (gear icon)
  2. Find the “Theme” section
  3. Pick a theme from the dropdown

The chosen theme is saved in localStorage and restored on your next visit.

Making a custom theme

Each theme is defined in its own .mjs file in packages/codemirror/themes/.

Theme structure

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

// Main color settings
export const settings = {
  background: '#222',           // Editor background
  lineBackground: '#22222299',  // Code line background
  foreground: '#fff',           // Text color
  caret: '#ffcc00',             // Caret color
  selection: 'rgba(128, 203, 196, 0.5)', // Selection color
  selectionMatch: '#036dd626',  // Search match color
  lineHighlight: '#00000050',   // Active line highlight
  gutterBackground: 'transparent', // Line number gutter background
  gutterForeground: '#8a919966',   // Line number color
  light: false,                 // true for light themes
};

// Create the theme with syntax highlighting
export default createTheme({
  theme: 'dark', // or 'light'
  settings,
  styles: [
    { tag: t.keyword, color: '#c792ea' },      // Keywords
    { tag: t.string, color: '#c3e88d' },       // Strings
    { tag: t.number, color: '#c3e88d' },       // Numbers
    { tag: t.comment, color: '#7d8799' },      // Comments
    { tag: t.variableName, color: '#c792ea' }, // Variables
    { tag: t.operator, color: '#89ddff' },     // Operators
    { tag: t.bracket, color: '#525154' },      // Brackets
  ],
});

Available syntax highlighting tags

  • t.keyword — keywords (if, else, function)
  • t.string — quoted strings
  • t.number — numbers
  • t.comment — comments
  • t.variableName — variable names
  • t.operator — operators (+, -, *, /)
  • t.bracket — brackets
  • t.propertyName — object properties
  • t.className — class names
  • t.tagName — tags
  • t.meta — metadata
  • t.atom — atomic values
  • t.bool — booleans

Adding a new theme

  1. Create the file packages/codemirror/themes/my-theme.mjs
  2. Export settings and the theme as the default export
  3. Import the theme in packages/codemirror/themes.mjs
  4. Add it to the themes and settings objects

After that the theme is available via theme("myTheme") and in the settings.