mobieusKnow
CSS Custom Properties Reference
CSS Custom Properties Reference
2 min read
·
203 words
·
3 revisions
·
2 views
·
Updated Jun 14, 2026
CSS Custom Properties Reference
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-info |
Informational states |
Best practice
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.
2 views
Last edited by system
· KB drift-audit reconciliation 2026-06-14: corrected to match dev (report deliverables).
Was this article helpful?
Discussion
Sign in to start the discussion.