3. Extending Themes

Custom themes are placed in src/themes/my-name.css and discovered automatically.

Example: Creating a Custom Theme

Create the file:

1 src/themes/oled.css

Contents:

1 /* src/themes/oled.css — no @import needed, the bundle already includes everything */
2 html[data-theme="oled"] {
3     --xpulse-bg: #000000;
4     --xpulse-surface: #0a0a0a;
5     --xpulse-surface-strong: #111111;
6     --xpulse-text: #eeeeee;
7     --xpulse-accent: #00ffaa;
8 }

Then in xpulse.json:

1 {
2   "theme": {
3     "default": "dark",
4     "allow": ["dark", "light", "oled"]
5   }
6 }

Naming Guidelines

Lowercase only
Hyphens instead of spaces (high-contrast, blue-dark)
Short and descriptive
dark and light are reserved

1	/* src/themes/oled.css — no @import needed, the bundle already includes everything */
2	html[data-theme="oled"] {
3	--xpulse-bg: #000000;
4	--xpulse-surface: #0a0a0a;
5	--xpulse-surface-strong: #111111;
6	--xpulse-text: #eeeeee;
7	--xpulse-accent: #00ffaa;
8	}

1	{
2	"theme": {
3	"default": "dark",
4	"allow": ["dark", "light", "oled"]
5	}
6	}