Author
Patrick Bass Submitted
Jun 7, 2026 9:51am Reviewed
Jun 7, 2026 9:51am Summary
Added by audit doc-gap batch
## CSS Custom Properties Reference
+
If your plan includes the Custom CSS editor (**Admin → Branding → Custom CSS**), use these tokens to keep customizations theme-safe.
−
If your plan includes the Custom CSS editor (**Admin → Branding → Appearance → Custom CSS**), use these semantic tokens to keep customizations theme-safe. Each token re-resolves per theme, so the same rule looks right on every theme.
−
−
### Themes
−
−
Mobieus ships **6 selectable themes**. Your custom CSS should read tokens, never hardcoded hex, so it works across all of them:
−
−
| Theme label | Slug (`data-theme`) |
−
|---|---|
−
| Dark (default) | `stylish-black` |
−
| Green | `crt-green` |
−
| Amber | `crt-amber` |
−
| Blue | `c64` |
−
| Light | `light` |
−
| High Contrast | `vt100` |
### Color tokens
| Token | Purpose |
|---|---|
| `--color-primary` | Main accent (buttons, links) |
−
| `--color-primary-hover` | Accent hover state |
−
| `--color-accent` | Secondary accent |
| `--color-text-primary` | Main body text |
| `--color-text-secondary` | Secondary text |
−
| `--color-text-muted` | Muted / caption text |
−
| `--color-text-inverse` | Text on a colored fill |
−
| `--color-bg-body` | Page background |
| `--color-bg-card` | Card backgrounds |
−
| `--color-bg-elevated` | Raised surfaces (menus, popovers) |
| `--color-bg-input` | Form field backgrounds |
−
| `--color-bg-hover` | Row / item hover background |
| `--color-border` | Borders and dividers |
−
| `--color-border-focus` | Focused field border |
| `--color-success` | Success states |
| `--color-warning` | Warning states |
+
| `--color-danger` | Error/danger states |
−
| `--color-danger` | Error / danger states |
−
| `--color-info` | Informational states |
### Best practice
+
Always use semantic tokens instead of hardcoded hex values. Tokens automatically adapt to light and dark themes.
−
Always use semantic tokens instead of hardcoded hex values. Tokens automatically adapt across all 6 themes, so a single rule keeps its contrast on dark, light, and the retro terminal palettes alike. If you hardcode a color, it will look wrong on at least one theme.
−
CSS Custom Properties Reference
If your plan includes the Custom CSS editor (Admin → Branding → Custom CSS), use these tokens to keep customizations theme-safe.
Color tokens
| Token | Purpose |
|---|---|
--color-primary |
Main accent (buttons, links) |
--color-text-primary |
Main body text |
--color-text-secondary |
Secondary text |
--color-bg-card |
Card backgrounds |
--color-bg-input |
Form field backgrounds |
--color-border |
Borders and dividers |
--color-success |
Success states |
--color-warning |
Warning states |
--color-danger |
Error/danger states |
Best practice
Always use semantic tokens instead of hardcoded hex values. Tokens automatically adapt to light and dark themes.
## CSS Custom Properties Reference If your plan includes the Custom CSS editor (**Admin → Branding → Custom CSS**), use these tokens to keep customizations theme-safe. ### Color tokens | Token | Purpose | |---|---| | `--color-primary` | Main accent (buttons, links) | | `--color-text-primary` | Main body text | | `--color-text-secondary` | Secondary text | | `--color-bg-card` | Card backgrounds | | `--color-bg-input` | Form field backgrounds | | `--color-border` | Borders and dividers | | `--color-success` | Success states | | `--color-warning` | Warning states | | `--color-danger` | Error/danger states | ### Best practice Always use semantic tokens instead of hardcoded hex values. Tokens automatically adapt to light and dark themes.
