Riebeckite
Menu
Color mode

Themes

Themes change how a Riebeckite site looks: colors, typography, spacing, layout, and article presentation. They do not add Markdown syntax, search, diagrams, or other features; use a Plugin for those.

Install a theme

Most generated sites already include a theme. minimal uses @riebeckite/theme-minimal; starter and showcase use @riebeckite/theme-default.

To add another theme, install its package:

sh
npm install @riebeckite/theme-minimal

Configure the theme

Import the theme factory and assign it to theme in riebeckite.config.ts:

ts
import { defineConfig } from "@riebeckite/core";
import { minimalTheme } from "@riebeckite/theme-minimal";
 
export default defineConfig({
  theme: minimalTheme(),
});

Some themes accept options. For example:

ts
import { defaultTheme } from "@riebeckite/theme-default";
 
export default defineConfig({
  theme: defaultTheme({
    colorMode: "system",
    typography: "system",
    articleLayout: "article",
    userCss: ["/extensions/custom.css"],
  }),
});

userCss is useful for small site-specific tweaks. If you want a reusable visual language, create a theme instead.

Official themes

Theme Package Factory Best for
Default @riebeckite/theme-default defaultTheme() The normal starting point: readable, configurable, and compatible with color mode
Minimal @riebeckite/theme-minimal minimalTheme() A small baseline when you want little visual opinion
Gruvbox @riebeckite/theme-gruvbox gruvboxTheme() A warm, high-contrast Gruvbox-inspired look
Rerurate @riebeckite/theme-rerurate rerurateTheme() Rerurate's visual grammar
Sakura @riebeckite/theme-sakura sakuraTheme() A sakura-inspired palette
Tokyo Night @riebeckite/theme-tokyonight tokyonightTheme() A Tokyo Night-inspired dark/editor-like look

The package README is the source of truth for each theme's exported factory name and options.

Create or extend a theme

Start with Writing a theme. Exact contracts live in Theme API, and the deeper design is described in Framework / Theme system.

Next

History

1 changesCollapseExpand
1 + ---
2 + title: Themes
3 + sidebar:
4 + label: Themes
5 + order: 50
6 + collapsed: true
7 + ---
8 + # Themes
9 +
10 + Themes change how a Riebeckite site looks: colors, typography, spacing, layout, and article presentation. They do not add Markdown syntax, search, diagrams, or other features; use a [Plugin](../plugins/README.en.md) for those.
11 +
12 + ## Install a theme
13 +
14 + Most generated sites already include a theme. `minimal` uses `@riebeckite/theme-minimal`; `starter` and `showcase` use `@riebeckite/theme-default`.
15 +
16 + To add another theme, install its package:
17 +
18 + ```sh
19 + npm install @riebeckite/theme-minimal
20 + ```
21 +
22 + ## Configure the theme
23 +
24 + Import the theme factory and assign it to `theme` in `riebeckite.config.ts`:
25 +
26 + ```ts
27 + import { defineConfig } from "@riebeckite/core";
28 + import { minimalTheme } from "@riebeckite/theme-minimal";
29 +
30 + export default defineConfig({
31 + theme: minimalTheme(),
32 + });
33 + ```
34 +
35 + Some themes accept options. For example:
36 +
37 + ```ts
38 + import { defaultTheme } from "@riebeckite/theme-default";
39 +
40 + export default defineConfig({
41 + theme: defaultTheme({
42 + colorMode: "system",
43 + typography: "system",
44 + articleLayout: "article",
45 + userCss: ["/extensions/custom.css"],
46 + }),
47 + });
48 + ```
49 +
50 + `userCss` is useful for small site-specific tweaks. If you want a reusable visual language, create a theme instead.
51 +
52 + ## Official themes
53 +
54 + | Theme | Package | Factory | Best for |
55 + | --- | --- | --- | --- |
56 + | [Default](./default.en.md) | `@riebeckite/theme-default` | `defaultTheme()` | The normal starting point: readable, configurable, and compatible with color mode |
57 + | [Minimal](./minimal.en.md) | `@riebeckite/theme-minimal` | `minimalTheme()` | A small baseline when you want little visual opinion |
58 + | [Gruvbox](./gruvbox.en.md) | `@riebeckite/theme-gruvbox` | `gruvboxTheme()` | A warm, high-contrast Gruvbox-inspired look |
59 + | [Rerurate](./rerurate.en.md) | `@riebeckite/theme-rerurate` | `rerurateTheme()` | Rerurate's visual grammar |
60 + | [Sakura](./sakura.en.md) | `@riebeckite/theme-sakura` | `sakuraTheme()` | A sakura-inspired palette |
61 + | [Tokyo Night](./tokyonight.en.md) | `@riebeckite/theme-tokyonight` | `tokyonightTheme()` | A Tokyo Night-inspired dark/editor-like look |
62 +
63 + The package README is the source of truth for each theme's exported factory name and options.
64 +
65 + ## Create or extend a theme
66 +
67 + Start with [Writing a theme](./writing-a-theme.en.md). Exact contracts live in [Theme API](../reference/theme-api.en.md), and the deeper design is described in [Framework / Theme system](../framework/theme-system.en.md).
68 +
69 + ## Next
70 +
71 + - [Writing a theme](./writing-a-theme.en.md)
72 + - [Theme API](../reference/theme-api.en.md)
73 +
74 +