Module
Interactive preview
Try Module
Plugins are not applied in this preview, so it may differ slightly from your published site.
Theme settings
Overview
@riebeckite/theme-module provides the official Module theme. Its theme identity is module. A structured technical theme with calibrated grids and edge details.
Rendered example
Light
Dark
Installation
npm install @riebeckite/theme-moduleUsage
import { defineConfig } from "@riebeckite/core";
import { moduleTheme } from "@riebeckite/theme-module";
export default defineConfig({
theme: moduleTheme({
colorMode: "system",
settings: { typography: "system" },
}),
});Common options
| Property | Values | Description |
|---|---|---|
colorMode |
"light", "dark", "system" |
Chooses the color mode. "system" follows the browser preference. |
layout |
"article", "sidebar", "full-width" |
Chooses the page layout. |
preset |
reading |
Applies a named set of theme settings before explicit settings. |
settings |
object | Overrides the settings listed below. Unknown keys and invalid values are rejected. |
stylesheets |
string array | Loads site-owned stylesheets after the theme CSS. |
Resolution order is schema defaults, then the selected preset, then explicit settings.
Theme settings
| Property | Type | Default and allowed values | Effect |
|---|---|---|---|
typography |
select | "system" — system, serif, sans, mono |
Selects the article typeface. |
accentColor |
color | "#a94e08" |
Warm accent for controls and structural details. |
articleWidth |
slider | 50 — 40–68, step 1 |
Maximum article width in rem. |
fontSize |
slider | 1 — 0.9375–1.25, step 0.0625 |
Article text size in rem. |
lineHeight |
slider | 1.75 — 1.5–2.1, step 0.05 |
Article line height. |
blueprint |
boolean | true |
Show the calibrated grid behind the reading surface. |
glow |
boolean | true |
Illuminate the article frame with the accent color. |
flourish |
boolean | false |
Show a subtle SVG flourish in the article header. |
Presets
| Preset | Label | Applied settings |
|---|---|---|
reading |
Reading | { typography: "serif" } |
CSS and attributes
The root receives data-rb-theme="module", data-rb-mode for an explicit light or dark mode, and data-rb-layout. Every setting is reflected as data-rb-setting-<name>; color, number, and slider settings are also available as safe --rb-setting-<name> custom properties.
See also
Theme API and Writing a theme.