Themes

Themes control the entire look of Cobalt’s UI: module panels, buttons, text, toggles, and HUD elements.

Built-in themes

Theme	Mood
Steel Blue	Cool, professional
Forest Emerald	Natural greens
Midnight Violet	Dark purple
Sunset Horizon	Warm oranges
Crimson Noir	Dark red
Arctic Frost	Ice blue

Theme file format

Themes are JSON files stored in config/cobalt/themes/. Here’s the full structure:


{
  "name": "My Theme",
  "backgroundPrimary":   { "red": 10,  "green": 10,  "blue": 11,  "alpha": 255 },
  "backgroundSecondary": { "red": 15,  "green": 15,  "blue": 16,  "alpha": 255 },
  "border":              { "red": 34,  "green": 34,  "blue": 35,  "alpha": 255 },
  "accentPrimary":       { "red": 70,  "green": 130, "blue": 180, "alpha": 255 },
  "accentSecondary":     { "red": 96,  "green": 155, "blue": 205, "alpha": 255 },
  "textPrimary":         { "red": 230, "green": 230, "blue": 230, "alpha": 255 },
  "textSecondary":       { "red": 179, "green": 179, "blue": 179, "alpha": 255 },
  "textMuted":           { "red": 122, "green": 122, "blue": 122, "alpha": 255 },
  "textDisabled":        { "red": 95,  "green": 95,  "blue": 95,  "alpha": 255 },
  "success":             { "red": 63,  "green": 191, "blue": 127, "alpha": 255 },
  "warning":             { "red": 230, "green": 181, "blue": 102, "alpha": 255 },
  "error":               { "red": 224, "green": 90,  "blue": 90,  "alpha": 255 },
  "info":                { "red": 93,  "green": 169, "blue": 233, "alpha": 255 }
}

Each color field has red, green, blue, and alpha (0-255). All 14 fields are required.

Creating a custom theme

Copy one of the existing theme files from config/cobalt/themes/
Rename it
Edit the color values
The theme appears in the GUI automatically

Changing themes programmatically


val theme = ThemeManager.themes["My Theme"]
    ?: ThemeManager.themes.values.first()
 
ThemeManager.changeTheme(theme)

ThemeManager API


ThemeManager.activeTheme  // current Theme
ThemeManager.themes       // Map<String, Theme>
ThemeManager.reloadThemes()  // rescan from disk

Accessing theme colors

From any UIComponent or Setting, use the theme property:


SkiaRenderer.rect(x, y, w, h, theme.backgroundPrimary)
SkiaRenderer.text(font, "Hello", x, y, 16f, theme.textPrimary)

Available colors:

Property	Use
`backgroundPrimary`	Panel backgrounds
`backgroundSecondary`	Input fields, toggles
`border`	Outlines, dividers
`accentPrimary`	Active elements, toggled states
`accentSecondary`	Hover highlights
`textPrimary`	Main text
`textSecondary`	Secondary info
`textMuted`	Subtle text, timestamps
`textDisabled`	Disabled elements
`success`	Positive states
`warning`	Warning alerts
`error`	Error states
`info`	Information boxes