# CSS Variables Reference

Complete list of CSS variables exposed by Rspress for theme customization. Override these in `theme/index.css` or via `globalStyles` in `rspress.config.ts`.

For dark mode overrides, wrap variables in `.dark { ... }`.

Official reference: <https://rspress.rs/ui/vars>

---

## Brand Colors

| Variable               | Light Default               | Dark Default |
| ---------------------- | --------------------------- | ------------ |
| `--rp-c-brand`         | `#0095ff`                   | (same)       |
| `--rp-c-brand-light`   | `#33adff`                   | (same)       |
| `--rp-c-brand-lighter` | `#c6e0fd`                   | (same)       |
| `--rp-c-brand-dark`    | `#0077ff`                   | (same)       |
| `--rp-c-brand-darker`  | `#005fcc`                   | (same)       |
| `--rp-c-brand-tint`    | `rgba(127, 163, 255, 0.16)` | (same)       |

## Background

| Variable         | Light Default | Dark Default |
| ---------------- | ------------- | ------------ |
| `--rp-c-bg`      | `#ffffff`     | `#121212`    |
| `--rp-c-bg-soft` | `#f8f8f9`     | `#292e37`    |
| `--rp-c-bg-mute` | `#f1f1f1`     | `#343a46`    |
| `--rp-c-bg-alt`  | `#fff`        | `#000`       |

## Text

| Variable                  | Light Default               | Dark Default                |
| ------------------------- | --------------------------- | --------------------------- |
| `--rp-c-text-0`           | `#000000`                   | `#ffffff`                   |
| `--rp-c-text-1`           | `#242424`                   | `rgba(255, 255, 245, 0.93)` |
| `--rp-c-text-2`           | `rgba(0, 0, 0, 0.7)`        | `rgba(255, 255, 245, 0.65)` |
| `--rp-c-text-3`           | `rgba(60, 60, 60, 0.33)`    | `rgba(235, 235, 235, 0.38)` |
| `--rp-c-text-4`           | `rgba(60, 60, 60, 0.18)`    | `rgba(235, 235, 235, 0.18)` |
| `--rp-c-text-code`        | `#476582`                   | `#c9def1`                   |
| `--rp-c-text-code-bg`     | `rgba(153, 161, 179, 0.08)` | `rgba(255, 255, 255, 0.08)` |
| `--rp-c-text-code-border` | `rgba(0, 0, 0, 0.05)`       | `rgba(255, 255, 255, 0.05)` |
| `--rp-c-link`             | `var(--rp-c-brand-dark)`    | `var(--rp-c-brand-light)`   |

## Dividers

| Variable               | Light Default         | Dark Default             |
| ---------------------- | --------------------- | ------------------------ |
| `--rp-c-divider`       | `rgba(0, 0, 0, 0.25)` | `rgba(84, 84, 84, 0.65)` |
| `--rp-c-divider-light` | `rgba(0, 0, 0, 0.12)` | `rgba(84, 84, 84, 0.48)` |

## Gray Scale

| Variable              | Default   |
| --------------------- | --------- |
| `--rp-c-gray`         | `#8e8e8e` |
| `--rp-c-gray-light-1` | `#aeaeae` |
| `--rp-c-gray-light-2` | `#c7c7c7` |
| `--rp-c-gray-light-3` | `#d1d1d1` |
| `--rp-c-gray-light-4` | `#e5e5e5` |
| `--rp-c-gray-light-5` | `#f2f2f2` |

## Layout (Radius & Shadows)

| Variable                                | Default                |
| --------------------------------------- | ---------------------- |
| `--rp-radius`                           | `1rem`                 |
| `--rp-radius-small`                     | `0.5rem`               |
| `--rp-radius-large`                     | `1.5rem`               |
| `--rp-shadow-1` through `--rp-shadow-5` | 5 levels of box-shadow |

## Code Block

| Variable                 | Light Default                         | Dark Default         |
| ------------------------ | ------------------------------------- | -------------------- |
| `--rp-code-font-size`    | `0.875rem`                            | (same)               |
| `--rp-code-title-bg`     | `#f8f8f9`                             | `#191919`            |
| `--rp-code-block-color`  | `rgb(46, 52, 64)`                     | `rgb(229, 231, 235)` |
| `--rp-code-block-bg`     | `var(--rp-c-bg)`                      | (same)               |
| `--rp-code-block-border` | `1px solid var(--rp-c-divider-light)` | (same)               |
| `--rp-code-block-shadow` | `none`                                | (same)               |

## Shiki Syntax Highlighting

### Light Mode

| Variable                          | Default              |
| --------------------------------- | -------------------- |
| `--shiki-foreground`              | `inherit`            |
| `--shiki-background`              | `transparent`        |
| `--shiki-token-constant`          | `#1976d2`            |
| `--shiki-token-string`            | `#31a94d`            |
| `--shiki-token-comment`           | `rgb(182, 180, 180)` |
| `--shiki-token-keyword`           | `#cf2727`            |
| `--shiki-token-parameter`         | `#f59403`            |
| `--shiki-token-function`          | `#7041c8`            |
| `--shiki-token-string-expression` | `#218438`            |
| `--shiki-token-punctuation`       | `#242323`            |
| `--shiki-token-link`              | `#22863a`            |
| `--shiki-token-deleted`           | `#d32828`            |
| `--shiki-token-inserted`          | `#22863a`            |

### Dark Mode

| Variable                          | Default   |
| --------------------------------- | --------- |
| `--shiki-token-constant`          | `#6fb0fa` |
| `--shiki-token-string`            | `#f9a86e` |
| `--shiki-token-comment`           | `#6a727b` |
| `--shiki-token-keyword`           | `#f47481` |
| `--shiki-token-parameter`         | `#ff9800` |
| `--shiki-token-function`          | `#ae8eeb` |
| `--shiki-token-string-expression` | `#4fb74d` |
| `--shiki-token-punctuation`       | `#bbbbbb` |
| `--shiki-token-link`              | `#f9a76d` |
| `--shiki-token-deleted`           | `#ee6d7a` |
| `--shiki-token-inserted`          | `#36c47f` |

## Home Page

| Variable                         | Light Default                              | Dark Default                                    |
| -------------------------------- | ------------------------------------------ | ----------------------------------------------- |
| `--rp-home-hero-secondary-color` | `#a673ff`                                  | (same)                                          |
| `--rp-home-hero-title-color`     | `transparent`                              | (same)                                          |
| `--rp-home-hero-title-bg`        | gradient (90deg)                           | (same)                                          |
| `--rp-home-background-bg`        | radial gradients                           | dark radial gradients                           |
| `--rp-home-feature-bg`           | `linear-gradient(135deg, #fff, #f9f9f980)` | `linear-gradient(135deg, #ffffff00, #ffffff08)` |

## Quick Start Example

```css
/* theme/index.css */
:root {
  --rp-c-brand: #7c3aed;
  --rp-c-brand-light: #8b5cf6;
  --rp-c-brand-dark: #6d28d9;
}
.dark {
  --rp-c-brand: #a78bfa;
  --rp-c-brand-light: #c4b5fd;
  --rp-c-brand-dark: #8b5cf6;
}
```