February 15, 2026

Customizing Your Theme

Theme customization in Rspress is straightforward and flexible.

Levels of Customization

1. CSS Variables

Modify the look with CSS variables:

:root {
  --rp-c-brand: #3451b2;
}

2. Component Override

Override any built-in component via ESM re-export:

theme/index.tsx
import { Layout as BasicLayout } from '@rspress/core/theme-original';

const Layout = () => <BasicLayout beforeNavTitle={<div>My Brand</div>} />;

export { Layout };
export * from '@rspress/core/theme-original';

3. Component Eject

Use the eject command to copy component source code:

rspress eject DocFooter

Back to blog list!