[← Back to Home](Home)

# CSS Variables Reference

All CSS variables are defined in the theme palette files (`light.standard.css` / `dark.standard.css`) under `:root[data-bs-theme="light"]` or `:root[data-bs-theme="dark"]`. Override any of these in your [custom theme](Custom-Themes) files.

---

## Brand and Theme Colors

| Variable | Light Default | Dark Default | Description |
|----------|--------------|-------------|-------------|
| `--color-primary` | `#112855` | `#112855` | Primary brand colour |
| `--accent-color-primary` | `#3f8ff0` | `#3f8ff0` | Primary accent colour |
| `--accent-color-secondary` | `#6fb3ff` | `#6fb3ff` | Secondary accent colour |

## Typography and Body

| Variable | Light Default | Dark Default | Description |
|----------|--------------|-------------|-------------|
| `--body-font-family` | System sans-serif stack | System sans-serif stack | Base font family |
| `--body-font-size` | `1rem` | `1rem` | Base font size |
| `--body-font-weight` | `400` | `400` | Base font weight |
| `--body-line-height` | `1.5` | `1.5` | Base line height |
| `--body-color` | `#22262a` | `#e6ebf1` | Body text colour |
| `--body-bg` | `#fff` | `#0e1318` | Body background colour |
| `--heading-color` | `inherit` | `#f1f5f9` | Heading text colour |
| `--emphasis-color` | `#000` | `#fff` | Emphasis text colour |
| `--secondary-color` | `#22262abf` | `#e6ebf1bf` | Secondary text colour |
| `--tertiary-color` | `#22262a80` | `#e6ebf180` | Tertiary text colour |
| `--muted-color` | `#6d757e` | `#6d757e` | Muted text colour |
| `--highlight-color` | `#22262a` | `#111` | Highlight text colour |
| `--highlight-bg` | `#fbeea8` | `#ffe28a1a` | Highlight background |

## Standard Colors

| Variable | Light Default | Dark Default |
|----------|--------------|-------------|
| `--blue` | `#010156` | `#91a4ff` |
| `--indigo` | `#6812f3` | `#b19cff` |
| `--purple` | `#6f42c2` | `#c0a5ff` |
| `--pink` | `#e93f8e` | `#ff8fc0` |
| `--red` | `#a51f18` | `#ff7a73` |
| `--orange` | `#fd7e17` | `#ff9c4d` |
| `--yellow` | `#ad6200` | `#ffd166` |
| `--green` | `#448344` | `#78d694` |
| `--teal` | `#5abfdd` | `#76e3ff` |
| `--cyan` | `#30638d` | `#6fb7ff` |

## Gray Scale

| Variable | Light Default | Dark Default |
|----------|--------------|-------------|
| `--gray-100` | `#f9fafb` | `#161a20` |
| `--gray-200` | `#eaedf0` | `#1b2027` |
| `--gray-300` | `#dfe3e7` | `#222831` |
| `--gray-400` | `#ced4da` | `#2b323b` |
| `--gray-500` | `#adb5bd` | `#36404a` |
| `--gray-600` | `#6d757e` | `#48525d` |
| `--gray-700` | `#484f56` | `#5b6672` |
| `--gray-800` | `#353b41` | `#cfd6de` |
| `--gray-900` | `#22262a` | `#e6ebf1` |

## Links

| Variable | Light Default | Dark Default | Description |
|----------|--------------|-------------|-------------|
| `--color-link` | `#224FAA` | `white` | Navigation link colour |
| `--color-hover` | `var(--accent-color-primary)` | `gray` | Navigation hover colour |
| `--link-color` | `#224faa` | `#8ab4f8` | Content link colour |
| `--link-hover-color` | `#424077` | `#c3d6ff` | Content link hover colour |
| `--link-decoration` | `underline` | `underline` | Link text decoration |

## Navigation

| Variable | Light Default | Dark Default | Description |
|----------|--------------|-------------|-------------|
| `--mainmenu-nav-link-color` | `white` | `#fff` | Main menu active link colour |
| `--nav-text-color` | `white` | `gray` | Navigation text colour |
| `--nav-bg-color` | `var(--color-link)` | `var(--color-primary)` | Navigation background colour |

## Layout and Spacing

| Variable | Light Default | Dark Default | Description |
|----------|--------------|-------------|-------------|
| `--padding-x` | `0.15rem` | `0.15rem` | Horizontal padding |
| `--padding-y` | `0.15rem` | `0.15rem` | Vertical padding |
| `--secondary-bg` | `#eaedf0` | `#151b22` | Secondary background |
| `--tertiary-bg` | `#f9fafb` | `#10151b` | Tertiary background |
| `--nav-toggle-size` | `3rem` | `3rem` | Mobile nav toggle size |

## Breakpoints

| Variable | Value | Description |
|----------|-------|-------------|
| `--bp-xs` | `0` | Extra small |
| `--bp-sm` | `576px` | Small |
| `--bp-md` | `768px` | Medium |
| `--bp-lg` | `992px` | Large |
| `--bp-xl` | `1200px` | Extra large |

## Borders

| Variable | Light Default | Dark Default |
|----------|--------------|-------------|
| `--border-width` | `1px` | `1px` |
| `--border-style` | `solid` | `solid` |
| `--border-color` | `#dfe3e7` | `#2b323b` |
| `--border-radius` | `.25rem` | `.25rem` |
| `--border-radius-sm` | `.2rem` | `.2rem` |
| `--border-radius-lg` | `.3rem` | `.3rem` |
| `--border-radius-pill` | `50rem` | `50rem` |

## Shadows

| Variable | Light Default | Dark Default |
|----------|--------------|-------------|
| `--box-shadow` | `0 .5rem 1rem #00000026` | `0 .5rem 1rem #00000066` |
| `--box-shadow-sm` | `0 .125rem .25rem #00000013` | `0 .125rem .25rem #00000040` |
| `--box-shadow-lg` | `0 1rem 3rem #0000002d` | `0 1rem 3rem #00000080` |

## Header Background

| Variable | Light Default | Dark Default | Description |
|----------|--------------|-------------|-------------|
| `--header-background-color` | `#adadad` | `#1a1f2b` | Header fallback colour |
| `--header-background-image` | `url(.../bg.svg)` | `url(.../bg.svg)` | Header background image |
| `--header-background-attachment` | `fixed` | `fixed` | CSS attachment |
| `--header-background-repeat` | `repeat` | `repeat` | CSS repeat |

## Container Backgrounds

Each container position (below-topbar, top-a, top-b, sidebar, bottom-a, bottom-b) has these variables:

| Variable Pattern | Description |
|-----------------|-------------|
| `--container-{position}-bg-image` | Background image (default: `none`) |
| `--container-{position}-bg-color` | Background colour (default: `transparent`) |
| `--container-{position}-bg-position` | Background position |
| `--container-{position}-bg-attachment` | Background attachment |
| `--container-{position}-bg-repeat` | Background repeat |
| `--container-{position}-bg-size` | Background size |
| `--container-{position}-border` | Border style |
| `--container-{position}-border-radius` | Border radius |

## Forms

| Variable | Light Default | Dark Default |
|----------|--------------|-------------|
| `--input-color` | `hsl(210, 11%, 15%)` | `#e6ebf1` |
| `--input-bg` | `hsl(210, 20%, 98%)` | `#1a2332` |
| `--input-border-color` | `hsl(210, 14%, 83%)` | `#3a4250` |
| `--input-focus-border-color` | `#8894aa` | `#5472ff` |
| `--form-valid-color` | `#448344` | `#78d694` |
| `--form-invalid-color` | `#a51f18` | `#ff8e86` |

## Bootstrap Palette

| Variable | Light Default | Dark Default |
|----------|--------------|-------------|
| `--primary` | `#010156` | `#010156` |
| `--secondary` | `#6d757e` | `#48525d` |
| `--success` | `#448344` | `#4aa664` |
| `--info` | `#30638d` | `#4f7aa0` |
| `--warning` | `#ad6200` | `#c77a00` |
| `--danger` | `#a51f18` | `#c23a31` |
| `--light` | `#f9fafb` | `#1b2027` |
| `--dark` | `#353b41` | `#0f1318` |

Each palette colour also has `-rgb`, `-text-emphasis`, `-bg-subtle`, and `-border-subtle` variants.

## Hero / Banner

| Variable | Description |
|----------|-------------|
| `--hero-height` | Banner height (default: `60vh`) |
| `--hero-color` | Banner text colour |
| `--hero-bg-repeat` | Background repeat |
| `--hero-bg-attachment` | Background attachment |
| `--hero-bg-position` | Background position |
| `--hero-bg-size` | Background size |
| `--hero-overlay-bg` | Overlay background colour |
| `--hero-primary-bg-color` | Primary variant background |
| `--hero-primary-overlay` | Primary variant overlay gradient |
| `--hero-secondary-bg-color` | Secondary variant background |
| `--hero-secondary-overlay` | Secondary variant overlay gradient |
| `--hero-card-*` | Hero card styling (bg, color, overlay, border-radius, padding, max-width) |
| `--hero-alt-card-*` | Alternative hero card styling |

## Block Colors

Used for top-a, top-b, bottom-a, bottom-b section backgrounds:

| Variable | Description |
|----------|-------------|
| `--block-color-1` through `--block-color-4` | Background colours |
| `--block-text-1` through `--block-text-4` | Text colours |
| `--block-highlight-bg` / `--block-highlight-text` | Highlight block |
| `--block-cta-bg` / `--block-cta-text` | Call-to-action block |
| `--block-alert-bg` / `--block-alert-text` | Alert block |

## Footer

| Variable | Default | Description |
|----------|---------|-------------|
| `--footer-padding-top` | `1rem` | Top padding |
| `--footer-padding-bottom` | `80px` | Bottom padding (accounts for FAB) |
| `--footer-grid-padding-y` | `2.5rem` | Grid vertical padding |
| `--footer-grid-padding-x` | `0.5em` | Grid horizontal padding |

## Theme FAB

| Variable | Light Default | Dark Default | Description |
|----------|--------------|-------------|-------------|
| `--theme-fab-bg` | `var(--color-primary)` | `#e6ebf1` | FAB background |
| `--theme-fab-color` | `#fff` | `#0e1318` | FAB icon colour |
| `--theme-fab-btn-bg` | `rgba(255,255,255,.15)` | `transparent` | FAB button background |
| `--theme-fab-border` | `rgba(255,255,255,0.3)` | `rgba(0,0,0,0.15)` | FAB border colour |

## Component-Specific Variables

Additional variables are defined for: VirtueMart (`--vm-*`), Gable (`--gab-*`), accordion, alert, badge, breadcrumb, cards, dropdown, list group, modal, nav tabs/pills, offcanvas, pagination, popover, progress, spinner, table, toast, and tooltip components. See the theme palette files for the complete list.

---

*Built with [moko-platform](https://git.mokoconsulting.tech/MokoConsulting/moko-platform) -- Moko Consulting*

---

*Repo: [MokoOnyx](https://git.mokoconsulting.tech/MokoConsulting/MokoOnyx) · [moko-platform](https://git.mokoconsulting.tech/MokoConsulting/moko-platform/wiki/Home)*

| Revision | Date | Author | Description |
|---|---|---|---|
| 1.0 | 2026-05-09 | Moko Consulting | Initial version |