CSS variables

Rspress exposes commonly used CSS variables, the simplest and most maintainable approach in custom themes. You can edit and preview in real time on this page, then copy the result to your project for style overriding.

Tip

You can use the "Copy Markdown" feature on this page to let your AI Agent help you modify CSS variables.

Here is a simple example of style overriding:

docs

index.mdx

theme

index.tsx

index.css<-- Copy CSS variable code here for style overriding

rspress.config.ts

theme/index.tsx

import './index.css';
export * from '@rspress/core/theme-original';

Another approach is to use the globalStyles config in rspress.config.ts:

rspress.config.ts

import { defineConfig } from '@rspress/core';
import path from 'path';

export default defineConfig({
  globalStyles: path.join(__dirname, 'styles/index.css'), // Points to your CSS file
});

Below are some CSS variables provided by Rspress and their default values:

Brand colors

/* Default Rspress brand colors */
:where(:root) {
  --rp-c-brand: #0095ff;
  --rp-c-brand-light: #33adff;
  --rp-c-brand-lighter: #c6e0fd;
  --rp-c-brand-dark: #0077ff;
  --rp-c-brand-darker: #005fcc;
  --rp-c-brand-tint: rgba(127, 163, 255, 0.16);
}

/* Default Rspress brand colors */
:where(:root) {
  --rp-c-brand: #0095ff;
  --rp-c-brand-light: #33adff;
  --rp-c-brand-lighter: #c6e0fd;
  --rp-c-brand-dark: #0077ff;
  --rp-c-brand-darker: #005fcc;
  --rp-c-brand-tint: rgba(127, 163, 255, 0.16);
}

Codeblock - shiki theme

/* Light Mode */
:where(html:not(.rp-dark)) {
  --shiki-foreground: inherit; /* Priority higher than var(--rp-code-block-color); */
  --shiki-background: transparent; /* Priority higher than var(--rp-code-block-bg); */

  --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;

  /* diff language */
  --shiki-token-deleted: #d32828;
  --shiki-token-inserted: #22863a;
}

/* Dark Mode */
:where(html.rp-dark) {
  --shiki-foreground: inherit; /* Priority higher than var(--rp-code-block-color); */
  --shiki-background: transparent; /* Priority higher than var(--rp-code-block-bg); */

  --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;

  /* diff language */
  --shiki-token-deleted: #ee6d7a;
  --shiki-token-inserted: #36c47f;
}

/* Light Mode */
:where(html:not(.rp-dark)) {
  --shiki-foreground: inherit; /* Priority higher than var(--rp-code-block-color); */
  --shiki-background: transparent; /* Priority higher than var(--rp-code-block-bg); */

  --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;

  /* diff language */
  --shiki-token-deleted: #d32828;
  --shiki-token-inserted: #22863a;
}

/* Dark Mode */
:where(html.rp-dark) {
  --shiki-foreground: inherit; /* Priority higher than var(--rp-code-block-color); */
  --shiki-background: transparent; /* Priority higher than var(--rp-code-block-bg); */

  --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;

  /* diff language */
  --shiki-token-deleted: #ee6d7a;
  --shiki-token-inserted: #36c47f;
}

Codeblock - outer title and container

/* Light Mode */
:where(html:not(.rp-dark)) {
  --rp-code-font-size: 0.875rem;
  --rp-code-title-bg: #f8f8f9;

  --rp-code-block-color: rgb(46, 52, 64);
  --rp-code-block-bg: var(--rp-c-bg);

  --rp-code-block-border: 1px solid var(--rp-c-divider-light);
  --rp-code-block-shadow: none;
}

/* Dark Mode */
:where(html.rp-dark) {
  --rp-code-font-size: 0.875rem;
  --rp-code-title-bg: #191919;

  --rp-code-block-color: rgb(229, 231, 235);
  --rp-code-block-bg: var(--rp-c-bg);

  --rp-code-block-border: 1px solid var(--rp-c-divider-light);
  --rp-code-block-shadow: none;
}

/* Light Mode */
:where(html:not(.rp-dark)) {
  --rp-code-font-size: 0.875rem;
  --rp-code-title-bg: #f8f8f9;

  --rp-code-block-color: rgb(46, 52, 64);
  --rp-code-block-bg: var(--rp-c-bg);

  --rp-code-block-border: 1px solid var(--rp-c-divider-light);
  --rp-code-block-shadow: none;
}

/* Dark Mode */
:where(html.rp-dark) {
  --rp-code-font-size: 0.875rem;
  --rp-code-title-bg: #191919;

  --rp-code-block-color: rgb(229, 231, 235);
  --rp-code-block-bg: var(--rp-c-bg);

  --rp-code-block-border: 1px solid var(--rp-c-divider-light);
  --rp-code-block-shadow: none;
}

foo.ts

console.log('This is a code block');

Default homepage

/* This is some variables used in HomeLayout. */
/* Light Mode */
:where(html:not(.rp-dark)) {
  --rp-home-hero-secondary-color: #a673ff;

  /* HomeHero */
  --rp-home-hero-title-color: transparent;
  --rp-home-hero-title-bg: linear-gradient(
    90deg,
    var(--rp-c-brand-dark) 0%,
    var(--rp-c-brand-dark) 30%,
    var(--rp-home-hero-secondary-color) 100%
  );

  /* HomeBackground */
  --rp-home-background-bg:
    radial-gradient(
      42.12% 56.13% at 100% 0%,
      rgba(83, 125, 255, 0.1) 0%,
      rgba(255, 255, 255, 0) 100%
    ),
    radial-gradient(
      42.01% 79.63% at 52.86% 0%,
      rgba(83, 125, 255, 0.2) 0%,
      rgba(255, 255, 255, 0) 100%
    ),
    radial-gradient(
      79.67% 58.09% at 0% 0%,
      rgba(126, 105, 255, 0.2) 0%,
      rgba(255, 255, 255, 0) 100%
    ),
    #fff;

  /* HomeFeature */
  --rp-home-feature-bg: linear-gradient(135deg, #fff, #f9f9f980);
}

/* Dark Mode */
:where(html.rp-dark) {
  --rp-home-hero-secondary-color: #a673ff;

  /* HomeHero */
  --rp-home-hero-title-color: transparent;
  --rp-home-hero-title-bg: linear-gradient(
    90deg,
    var(--rp-c-brand-dark) 0%,
    var(--rp-c-brand-dark) 30%,
    var(--rp-home-hero-secondary-color) 100%
  );

  /* HomeBackground */
  --rp-home-background-bg:
    radial-gradient(
      42.12% 56.13% at 100% 0%,
      #0c1d48 0%,
      rgba(18, 18, 18, 0) 100%
    ),
    radial-gradient(
      55.81% 87.78% at 48.37% 0%,
      #000000 0%,
      rgba(18, 18, 18, 0) 89.55%
    ),
    radial-gradient(
      122.65% 88.24% at 0% 0%,
      #34268a 0%,
      rgba(18, 18, 18, 0) 100%
    ),
    #121212;

  /* HomeFeature */
  --rp-home-feature-bg: linear-gradient(135deg, #ffffff00, #ffffff08);
}

/* This is some variables used in HomeLayout. */
/* Light Mode */
:where(html:not(.rp-dark)) {
  --rp-home-hero-secondary-color: #a673ff;

  /* HomeHero */
  --rp-home-hero-title-color: transparent;
  --rp-home-hero-title-bg: linear-gradient(
    90deg,
    var(--rp-c-brand-dark) 0%,
    var(--rp-c-brand-dark) 30%,
    var(--rp-home-hero-secondary-color) 100%
  );

  /* HomeBackground */
  --rp-home-background-bg:
    radial-gradient(
      42.12% 56.13% at 100% 0%,
      rgba(83, 125, 255, 0.1) 0%,
      rgba(255, 255, 255, 0) 100%
    ),
    radial-gradient(
      42.01% 79.63% at 52.86% 0%,
      rgba(83, 125, 255, 0.2) 0%,
      rgba(255, 255, 255, 0) 100%
    ),
    radial-gradient(
      79.67% 58.09% at 0% 0%,
      rgba(126, 105, 255, 0.2) 0%,
      rgba(255, 255, 255, 0) 100%
    ),
    #fff;

  /* HomeFeature */
  --rp-home-feature-bg: linear-gradient(135deg, #fff, #f9f9f980);
}

/* Dark Mode */
:where(html.rp-dark) {
  --rp-home-hero-secondary-color: #a673ff;

  /* HomeHero */
  --rp-home-hero-title-color: transparent;
  --rp-home-hero-title-bg: linear-gradient(
    90deg,
    var(--rp-c-brand-dark) 0%,
    var(--rp-c-brand-dark) 30%,
    var(--rp-home-hero-secondary-color) 100%
  );

  /* HomeBackground */
  --rp-home-background-bg:
    radial-gradient(
      42.12% 56.13% at 100% 0%,
      #0c1d48 0%,
      rgba(18, 18, 18, 0) 100%
    ),
    radial-gradient(
      55.81% 87.78% at 48.37% 0%,
      #000000 0%,
      rgba(18, 18, 18, 0) 89.55%
    ),
    radial-gradient(
      122.65% 88.24% at 0% 0%,
      #34268a 0%,
      rgba(18, 18, 18, 0) 100%
    ),
    #121212;

  /* HomeFeature */
  --rp-home-feature-bg: linear-gradient(135deg, #ffffff00, #ffffff08);
}

Base variables

/* Light Mode */
:where(html:not(.rp-dark)) {
  --rp-c-bg: #ffffff;
  --rp-c-bg-soft: #f8f8f9;
  --rp-c-bg-mute: #f1f1f1;
  --rp-c-bg-alt: #fff;

  --rp-c-divider: rgba(0, 0, 0, 0.25);
  --rp-c-divider-light: rgba(0, 0, 0, 0.12);

  --rp-c-text-0: #000000;
  --rp-c-text-1: #242424;
  --rp-c-text-2: rgba(0, 0, 0, 0.7);
  --rp-c-text-3: rgba(60, 60, 60, 0.33);
  --rp-c-text-4: rgba(60, 60, 60, 0.18);

  --rp-c-text-code: #476582; /* inline code */
  --rp-c-text-code-bg: rgba(153, 161, 179, 0.08); /* inline code bg */
  --rp-c-text-code-border: rgba(0, 0, 0, 0.05); /* inline code border */

  --rp-c-link: var(--rp-c-brand-dark);
}

/* Dark Mode */
:where(html.rp-dark) {
  --rp-c-bg: #121212;
  --rp-c-bg-soft: #292e37;
  --rp-c-bg-mute: #343a46;
  --rp-c-bg-alt: #000;

  --rp-c-divider: rgba(84, 84, 84, 0.65);
  --rp-c-divider-light: rgba(84, 84, 84, 0.48);

  --rp-c-text-0: #ffffff;
  --rp-c-text-1: rgba(255, 255, 245, 0.93);
  --rp-c-text-2: rgba(255, 255, 245, 0.65);
  --rp-c-text-3: rgba(235, 235, 235, 0.38);
  --rp-c-text-4: rgba(235, 235, 235, 0.18);

  --rp-c-text-code: #c9def1; /* inline code */
  --rp-c-text-code-bg: rgba(255, 255, 255, 0.08); /* inline code bg */
  --rp-c-text-code-border: rgba(255, 255, 255, 0.05); /* inline code border */

  --rp-c-link: var(--rp-c-brand-light);
}

:where(:root) {
  --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;

  --rp-shadow-1: 0 1px 2px rgba(0, 0, 0, 0.02), 0 1px 0 rgba(0, 0, 0, 0.06);
  --rp-shadow-2: 0 3px 12px rgba(0, 0, 0, 0.06), 0 1px 4px rgba(0, 0, 0, 0.07);
  --rp-shadow-3: 0 12px 32px rgba(0, 0, 0, 0.1), 0 2px 6px rgba(0, 0, 0, 0.08);
  --rp-shadow-4: 0 14px 44px rgba(0, 0, 0, 0.12), 0 3px 9px rgba(0, 0, 0, 0.12);
  --rp-shadow-5:
    0 18px 56px rgba(0, 0, 0, 0.16), 0 4px 12px rgba(0, 0, 0, 0.16);

  --rp-radius: 1rem;
  --rp-radius-small: 0.5rem;
  --rp-radius-large: 1.5rem;
}

/* Light Mode */
:where(html:not(.rp-dark)) {
  --rp-c-bg: #ffffff;
  --rp-c-bg-soft: #f8f8f9;
  --rp-c-bg-mute: #f1f1f1;
  --rp-c-bg-alt: #fff;

  --rp-c-divider: rgba(0, 0, 0, 0.25);
  --rp-c-divider-light: rgba(0, 0, 0, 0.12);

  --rp-c-text-0: #000000;
  --rp-c-text-1: #242424;
  --rp-c-text-2: rgba(0, 0, 0, 0.7);
  --rp-c-text-3: rgba(60, 60, 60, 0.33);
  --rp-c-text-4: rgba(60, 60, 60, 0.18);

  --rp-c-text-code: #476582; /* inline code */
  --rp-c-text-code-bg: rgba(153, 161, 179, 0.08); /* inline code bg */
  --rp-c-text-code-border: rgba(0, 0, 0, 0.05); /* inline code border */

  --rp-c-link: var(--rp-c-brand-dark);
}

/* Dark Mode */
:where(html.rp-dark) {
  --rp-c-bg: #121212;
  --rp-c-bg-soft: #292e37;
  --rp-c-bg-mute: #343a46;
  --rp-c-bg-alt: #000;

  --rp-c-divider: rgba(84, 84, 84, 0.65);
  --rp-c-divider-light: rgba(84, 84, 84, 0.48);

  --rp-c-text-0: #ffffff;
  --rp-c-text-1: rgba(255, 255, 245, 0.93);
  --rp-c-text-2: rgba(255, 255, 245, 0.65);
  --rp-c-text-3: rgba(235, 235, 235, 0.38);
  --rp-c-text-4: rgba(235, 235, 235, 0.18);

  --rp-c-text-code: #c9def1; /* inline code */
  --rp-c-text-code-bg: rgba(255, 255, 255, 0.08); /* inline code bg */
  --rp-c-text-code-border: rgba(255, 255, 255, 0.05); /* inline code border */

  --rp-c-link: var(--rp-c-brand-light);
}

:where(:root) {
  --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;

  --rp-shadow-1: 0 1px 2px rgba(0, 0, 0, 0.02), 0 1px 0 rgba(0, 0, 0, 0.06);
  --rp-shadow-2: 0 3px 12px rgba(0, 0, 0, 0.06), 0 1px 4px rgba(0, 0, 0, 0.07);
  --rp-shadow-3: 0 12px 32px rgba(0, 0, 0, 0.1), 0 2px 6px rgba(0, 0, 0, 0.08);
  --rp-shadow-4: 0 14px 44px rgba(0, 0, 0, 0.12), 0 3px 9px rgba(0, 0, 0, 0.12);
  --rp-shadow-5:
    0 18px 56px rgba(0, 0, 0, 0.16), 0 4px 12px rgba(0, 0, 0, 0.16);

  --rp-radius: 1rem;
  --rp-radius-small: 0.5rem;
  --rp-radius-large: 1.5rem;
}

#CSS variables

#Brand colors

#Codeblock - shiki theme

#Codeblock - outer title and container

#Default homepage