Stylus/CSS Customization
PluralSpace's UI is built on a small set of CSS variables. Every color, corner radius, spacing scale, and font in the app reads from these tokens, so overriding them with a use style like Stylus can re-theme the whole app without limitations.
I want to give a warning first - these are not stable names, and can change. I will try to keep this updated if that happens.
How to override the variables
We set these tokens via the active theme, set on the <html> element via a data-theme attribute. If you want to override the values, you should either set them to :root and mark each as !important.
:root {
--color-accent: #ff5fa2 !important;
--color-bg: #0a0a12 !important;
--radius-card: 1.5rem !important;
--font-sans: 'Comic Sans MS', cursive !important;
}Do you want it to only apply to one theme?
Scope to that theme instead of :root then it only kicks in when you have that theme selected:
html[data-theme="dark"] {
--color-accent: #ff5fa2 !important;
}Built-in themes you can scope to: light, dark, dim, paper, high-contrast, sepia, tron, cyberpunk, terminal, space, forest
Tokens
Default values shown are from the dark theme; every theme overrides them.
Surfaces & borders
| Variable | Controls | Dark default |
|---|---|---|
| Page background | |
| Sidebar / sunken surfaces | |
| Card / modal surface | |
| Raised surface / hover | |
| Active / pressed | |
| Subtle emphasis | |
| Muted foreground | |
| Placeholder tone | |
| Borders / dividers | |
Text
| Variable | Controls | Dark default |
|---|---|---|
| Headings, card titles | |
| Primary body text | |
| Names, secondary content | |
| Descriptions, meta | |
| Captions, disabled | |
Accent & brand
| Variable | Controls | Default |
|---|---|---|
| Primary accent (buttons, links, highlights) | |
| Text/icons on top of an accent fill | |
| Accent used as foreground (text/icon) | |
| Alias of --color-accent | |
Changing --color-accent alone re-tints buttons, links, focus rings, activenav, and most highlights at once.
Status
| Variable | Controls | Default |
|---|---|---|
--color-danger | Errors, destructive actions | #ef4444 |
--color-success | Success states | #10b981 |
--color-warning | Warnings | #f59e0b |
Corner radius
| Variable | Controls | Default |
|---|---|---|
--radius-card | Cards, modals, large panels | 1rem |
--radius-field | Inputs, selects, textareas | 0.625rem |
--radius-button | Buttons | 0.625rem |
Small UI bits (badges, chips, menu items, dropdowns) use the Tailwind radius scale, which you can also override:
--radius-xs, --radius-sm, --radius-md, --radius-lg, --radius-xl, --radius-2xl, --radius-3xl, --radius-4xl
Set any/all of these to 0 for fully square corners (this is exactly what thesharp themes like tron/terminal do).
Density & spacing
| Variable | Controls | Default |
|---|---|---|
--density | Master compactness knob — scales padding and icons | 1 |
--icon-scale | Icon size multiplier (normally 1.25 × --density) | 1 |
--padding-card | Card inner padding (calc(1rem × --density)) | derived |
--padding-field | Field inner padding (calc(0.625rem × --density)) | derived |
--density is the one knob most people want: 0.85 = compact, 1 = normal,1.15 = comfortable. It cascades into paddings and icon sizes automatically.
Fonts
| Variable | Controls | Default |
|---|---|---|
--font-sans | Body / UI text | 'Instrument Sans', …, emoji fallbacks |
--font-display | Headings, titles, brand surfaces | 'Silkscreen', 'Courier New', monospace, … |
Always keep the emoji-fallback fonts at the end of your stack('Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji')or emojis will render as missing-glyph boxes.