#CSS variables

Rspress exposes some commonly used CSS variables. Compared to overriding Rspress's built-in React components, overriding CSS variables for customization is simpler and more maintainable.

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

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

/* Copy CSS variable code here to override styles */

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

#Brand colors

#Codeblock - shiki theme

#Codeblock - outer title and container

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

#Default homepage

#Base variables