CSS variables

🚧 Work in progress

Rspress exposes commonly used CSS variables. Overriding variables is simpler and more maintainable than replacing the built-in React components.

You can edit and preview in real time on this page, then copy the result to theme/index.css to override styles. Here is a simple example of style overriding:

theme/index.tsx

theme/index.css

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

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

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

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: var(--rp-shadow-1);
}

/* 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: var(--rp-shadow-1);
}

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

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.2);
  --rp-c-divider-light: rgba(0, 0, 0, 0.1);

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