#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. See CSS variables for how to override these styles.
Tip
You can use the "Copy Markdown" feature on this page to let your AI Agent help you modify CSS variables.
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: 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);
}
#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;
}