Theming
NoPressure public pages use theme files stored in the runtime root under themes/.
A theme file has the .theme extension and contains one variable per line:
color-background-primary-light #fdf2f2
font-body-size 16px
The first whitespace separates the variable name from the value. Empty lines and lines
starting with # are ignored. Values are emitted directly into CSS variables, so use
valid CSS values for the expected property type.
Theme Selection
| Option | Default | Range | Notes |
|---|---|---|---|
| Theme file location | <runtime-root>/themes/default.theme | Files ending in .theme under <runtime-root>/themes/ | Hidden files and non-.theme files are not listed in the admin theme library. |
| Page theme value | Empty / not set | Theme file name without .theme | Empty or missing values select default.theme. |
| New theme name | None | 1-128 characters: lowercase ASCII letters, numbers, -, _; no dots | The .theme extension is added automatically. |
| Theme variable key | None | ASCII letters, numbers, -, _ | Invalid keys and lines without values are ignored when rendering. |
| Theme variable value | None | Any valid CSS value for the variable's expected property | Values are not type-validated by NoPressure. Invalid CSS is ignored by the browser for affected declarations. |
| Missing requested theme | default.theme | Any valid page theme value | If the selected file cannot be loaded, the renderer falls back to default.theme. |
| Missing default theme | Inline fallback | Built in | The inline fallback only covers a minimal body, page background, content, and navbar style. |
New runtime roots create themes/default.theme from the embedded red theme. The
repository also ships palette files under assets/themes/: blue, default,
green, grey, orange, pink, purple, red, teal, and yellow.
Base Palette
These variables control the main light and dark colour scheme. Defaults are the values used by the embedded red theme that bootstraps new runtime roots.
| Variable | Default | Range | Used for |
|---|---|---|---|
color-background-primary-light | #fdf2f2 | Valid CSS color | Light body background and gradient start. |
color-background-secondary-light | #f8b4b4 | Valid CSS color | Light page gradient end and search result hover background. |
color-content-background-light | #ffffff | Valid CSS color | Light search panel, search results, copy button, close button backgrounds. |
color-text-primary-light | #7f1d1d | Valid CSS color | Light body text, headings, strong text, navbar brand, code text, table headings. |
color-text-secondary-light | #991b1b | Valid CSS color | Light paragraph/list/table body text, subtitles, secondary controls. |
color-navbar-background-light | rgba(255, 255, 255, 0.95) | Valid CSS color | Reserved palette entry; defined in themes but not consumed by the preset stylesheet. |
color-footer-background-light | rgba(255, 255, 255, 0.95) | Valid CSS color | Reserved palette entry; defined in themes but not consumed by the preset stylesheet. |
color-border-light | rgba(220, 38, 38, 0.2) | Valid CSS color | Light borders for code blocks, search UI, copy buttons, and result rows. |
color-shadow-light | rgba(220, 38, 38, 0.1) | Valid CSS color | Light search panel shadow colour. |
color-code-background-light | #fee2e2 | Valid CSS color | Light inline code and code block background. |
color-blockquote-background-light | #fee2e2 | Valid CSS color | Light blockquote background. |
color-table-border-light | #fca5a5 | Valid CSS color | Light content table borders. |
color-table-header-background-light | #fee2e2 | Valid CSS color | Light content table header background. |
color-background-primary-dark | #450a0a | Valid CSS color | Dark body background and gradient start. |
color-background-secondary-dark | #7f1d1d | Valid CSS color | Dark page gradient end, search input background, search result hover background. |
color-content-background-dark | #7f1d1d | Valid CSS color | Dark search panel, search results, copy button, close button backgrounds. |
color-text-primary-dark | #fecaca | Valid CSS color | Dark body text, headings, strong text, navbar brand, code text, table headings. |
color-text-secondary-dark | #f87171 | Valid CSS color | Dark paragraph/list/table body text, subtitles, secondary controls, navbar links. |
color-navbar-background-dark | rgba(127, 29, 29, 0.95) | Valid CSS color | Reserved palette entry; defined in themes but not consumed by the preset stylesheet. |
color-footer-background-dark | rgba(127, 29, 29, 0.95) | Valid CSS color | Reserved palette entry; defined in themes but not consumed by the preset stylesheet. |
color-border-dark | rgba(248, 113, 113, 0.3) | Valid CSS color | Dark borders for code blocks, search UI, copy buttons, and result rows. |
color-shadow-dark | rgba(0, 0, 0, 0.4) | Valid CSS color | Dark search panel shadow colour. |
color-code-background-dark | #991b1b | Valid CSS color | Dark inline code and code block background. |
color-blockquote-background-dark | #991b1b | Valid CSS color | Dark blockquote background. |
color-table-border-dark | #dc2626 | Valid CSS color | Dark content table borders. |
color-table-header-background-dark | #991b1b | Valid CSS color | Dark content table header background. |
Accent And Navigation
| Variable | Default | Range | Used for |
|---|---|---|---|
color-content-link-light | #dc2626 | Valid CSS color | Light content links and focus outlines. |
color-content-link-dark | #f87171 | Valid CSS color | Dark content links and focus outlines. |
color-breadcrumb-link-dark | #f87171 | Valid CSS color | Dark breadcrumb links. |
color-content-blockquote-border-light | #dc2626 | Valid CSS color | Light blockquote left border. |
color-navbar-dropdown-arrow-light | #b91c1c | Valid CSS color | Light nested dropdown arrow hover colour. |
color-navbar-dropdown-border-top-light | rgba(220, 38, 38, 0.2) | Valid CSS color | Light mobile dropdown top border. |
color-navbar-dropdown-item-hover-background-light | #fee2e2 | Valid CSS color | Light dropdown item hover background. |
color-navbar-dropdown-background-dark | #450a0a | Valid CSS color | Dark navbar dropdown background. |
color-navbar-dropdown-border-dark | rgba(248, 113, 113, 0.3) | Valid CSS color | Dark navbar dropdown border. |
color-navbar-dropdown-shadow-dark | rgba(0, 0, 0, 0.4) | Valid CSS color | Dark navbar dropdown shadow colour. |
color-navbar-dropdown-item-hover-background-dark | #991b1b | Valid CSS color | Dark dropdown item hover background. |
color-navbar-link-hover-background-dark | #991b1b | Valid CSS color | Dark navbar link hover background. |
color-navbar-dropdown-link-hover-background-dark | #991b1b | Valid CSS color | Dark nested dropdown link hover background. |
color-notification-warning-background-dark | #dc2626 | Valid CSS color | Dark warning notification background. |
color-notification-warning-text-dark | #fef2f2 | Valid CSS color | Dark warning notification text. |
Typography
| Variable | Default | Range | Used for |
|---|---|---|---|
font-body-family | 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif | Valid CSS font-family list | Body text, controls, search UI, and hero fallback fonts. |
font-heading-family | 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif | Valid CSS font-family list | Markdown headings. |
font-mono-family | monospace | Valid CSS font-family list | Inline code and code blocks. |
font-body-size | 16px | Valid CSS font-size value | Body font size. |
font-body-line-height | normal | Valid CSS line-height value: number, length, percentage, or normal | Body line height. |
Hero Image Shortcode
The hero-img shortcode has additional theme variables. Unlike the main palette,
these variables have CSS fallbacks in the preset stylesheet, so they do not need to
be present in a theme file unless you want to override them.
| Variable | Default | Range | Used for |
|---|---|---|---|
sc-hero-img-size-height | 45vh | Valid CSS length or viewport-based size | Hero wrapper height. |
sc-hero-img-font-title-family | var(--font-body-family) | Valid CSS font-family list | Hero title font family. |
sc-hero-img-font-title-size | 3rem | Valid CSS font-size value | Hero title font size. |
sc-hero-img-font-subtitle-family | var(--font-body-family) | Valid CSS font-family list | Hero subtitle font family. |
sc-hero-img-font-subtitle-size | 1.25rem | Valid CSS font-size value | Hero subtitle font size. |
sc-hero-img-color-text-light | var(--color-text-primary-light) | Valid CSS color | Hero title and subtitle colour in light mode. |
sc-hero-img-color-text-dark | var(--color-text-primary-dark) | Valid CSS color | Hero title and subtitle colour in dark mode. |
sc-hero-img-filter-lightify | brightness(1.15) | Valid CSS filter value | Image filter when the shortcode has lightify, in light mode. |
sc-hero-img-filter-darkify | brightness(0.7) | Valid CSS filter value | Image filter when the shortcode has darkify, in dark mode. |
sc-hero-img-shadow-light | 0 0 12px rgba(255, 255, 255, 0.6) | Valid CSS text-shadow value | Text halo when the shortcode has light-shadow, in light mode. |
sc-hero-img-shadow-dark | 0 0 12px rgba(0, 0, 0, 0.6) | Valid CSS text-shadow value | Text halo when the shortcode has dark-shadow, in dark mode. |
Example
# Runtime default is created as themes/default.theme
color-background-primary-light #fdf2f2
color-background-secondary-light #f8b4b4
color-text-primary-light #7f1d1d
color-content-link-light #dc2626
font-body-family 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif
font-body-size 16px
font-body-line-height normal
sc-hero-img-size-height 45vh