3. Eigenes Theme erweitern

Eigene Themes werden in src/themes/mein-name.css angelegt und automatisch erkannt.

Beispiel: Eigenes Theme erstellen

Erstelle die Datei:

1 src/themes/oled.css

Inhalt:

1 /* src/themes/oled.css — kein @import nötig, das Bundle enthält bereits alles */
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 }

Dann in xpulse.json:

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

Naming-Richtlinien

Nur Kleinbuchstaben
Bindestriche statt Leerzeichen (high-contrast, blue-dark)
Kurz und sprechend
dark und light sind reserviert

1	/* src/themes/oled.css — kein @import nötig, das Bundle enthält bereits alles */
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	}