Riebeckite
Menu
Color mode

Change Your Theme

Themes control how your Riebeckite site looks — colors, typography, spacing, and layout. This guide walks through switching to the minimal theme, a clean, content-first design.

Want to add features instead? See Add Your First Plugin.

1. Install

In your generated site directory:

sh
npm install @riebeckite/theme-minimal

2. Import

Open riebeckite.config.ts and add the import at the top:

ts
import { minimalTheme } from "@riebeckite/theme-minimal";

3. Change the Theme

Find the theme line in your config and replace defaultTheme() with minimalTheme():

ts
theme: minimalTheme(),

4. Start Riebeckite

Restart the dev server to see the new theme:

sh
npm exec riebeckite dev

Open your site — the appearance has changed to the minimal theme.

5. Next Steps

  • Browse other themes in the Themes reference
  • Try @riebeckite/theme-tokyonight for a dark, colorful theme
  • Try @riebeckite/theme-sakura for a light, elegant theme
  • Learn to write your own theme

History

1 changesCollapseExpand
1 + # Change Your Theme
2 +
3 + Themes control how your Riebeckite site looks — colors, typography, spacing, and layout. This guide walks through switching to the **minimal** theme, a clean, content-first design.
4 +
5 + > Want to add features instead? See [Add Your First Plugin](./first-plugin.en.md).
6 +
7 + ---
8 +
9 + ## 1. Install
10 +
11 + In your generated site directory:
12 +
13 + ```sh
14 + npm install @riebeckite/theme-minimal
15 + ```
16 +
17 + ---
18 +
19 + ## 2. Import
20 +
21 + Open `riebeckite.config.ts` and add the import at the top:
22 +
23 + ```ts
24 + import { minimalTheme } from "@riebeckite/theme-minimal";
25 + ```
26 +
27 + ---
28 +
29 + ## 3. Change the Theme
30 +
31 + Find the `theme` line in your config and replace `defaultTheme()` with `minimalTheme()`:
32 +
33 + ```ts
34 + theme: minimalTheme(),
35 + ```
36 +
37 + ---
38 +
39 + ## 4. Start Riebeckite
40 +
41 + Restart the dev server to see the new theme:
42 +
43 + ```sh
44 + npm exec riebeckite dev
45 + ```
46 +
47 + Open your site — the appearance has changed to the minimal theme.
48 +
49 + ---
50 +
51 + ## 5. Next Steps
52 +
53 + - Browse other themes in the [Themes reference](../themes/README.en.md)
54 + - Try `@riebeckite/theme-tokyonight` for a dark, colorful theme
55 + - Try `@riebeckite/theme-sakura` for a light, elegant theme
56 + - Learn to [write your own theme](../themes/writing-a-theme.en.md)