// OPENBOX DOCS

Creating Custom Themes

Author custom CSS themes using OpenBox's design system tokens.

OpenBox features a strict, token-driven CSS architecture. Every color, surface, font, and border is driven by standard CSS variables defined in :root.

Interactive Theme Studio & CSS Generator

Preview stock themes and generate custom CSS token files

1. Select Base Preset

2. Customize Design Tokens

--background

#0b0e16

--surface-card

#141926

--brand

#ff7a00

--focus / --accent

#00f0ff

--text-main

#f0f4fc

--border

#232a3d

3. Live OpenBox UI Mockup Preview

OPENBOXv1.5.0

Chrono Trigger

Super Nintendo · 1995

SNES

Super Mario Odyssey

Nintendo Switch · 2017

Switch

Generated Theme CSS (theme.css)Drop into ~/.local/share/openbox-game-launcher/themes/

/* OpenBox Custom Theme: Default Dark (Orange/Cyan) */
:root {
  --background: #0b0e16;
  --surface-card: #141926;
  --brand: #ff7a00;
  --focus: #00f0ff;
  --accent: #00f0ff;
  --text-main: #f0f4fc;
  --border: #232a3d;
  --border-muted: #232a3d;
  --brand-rgb: 255, 122, 0;
}

Design System Tokens

When creating a custom theme, you only need to override :root variables. No component CSS rules are modified.

Token	Purpose	Example
`--background`	Main window and background surface	`#0b0e16`
`--surface-card`	Cards, dialogs, drawers, and panels	`#141926`
`--brand`	Primary brand color, play buttons, active highlights	`#ff7a00`
`--focus`	Focus rings, active keyboard / gamepad focus	`#00f0ff`
`--accent`	Secondary interactive accents and badges	`#00f0ff`
`--text-main`	Primary readable text color	`#f0f4fc`
`--text-muted`	Secondary labels, platform tags, metadata	`#8d9bb0`
`--border`	Card and modal borders	`#232a3d`
`--font-sans`	Primary UI typeface	`Space Grotesk, sans-serif`
`--font-mono`	Monospace typeface for paths, tokens, versions	`JetBrains Mono, monospace`

Installing a Custom Theme

Create a CSS file named theme-mytheme.css in your themes directory:

mkdir -p ~/.local/share/openbox-game-launcher/themes/
nano ~/.local/share/openbox-game-launcher/themes/theme-mytheme.css

Paste your :root definition:

:root {
  --background: #0f141c;
  --surface-card: #192230;
  --brand: #e06c75;
  --focus: #61afef;
  --accent: #98c379;
  --text-main: #abb2bf;
  --border: #2c384c;
}

Open OpenBox, navigate to Settings -> Appearance, and select Mytheme from the theme dropdown.