Theme and tokens
Looma controls the colors and typography. Markupress controls the documentation layout. Start with a stylesheet, then adjust the parts you need.
Start with a stylesheet
Add your site's styles to MarkupKit's configuration:
// markupkit.config.ts
import { defineConfig } from '@threadlabs/markupkit';
export default defineConfig({ css: ['app/site.css'] });Then choose a font and sidebar width:
/* app/site.css */
:root {
--ui-font-sans: "Inter", system-ui, sans-serif;
--markupress-sidebar-width: 17rem;
}A font stack chooses a font; it does not download one. Load Inter in your site, or use system-ui, sans-serif to use the reader's system font.
Build a coordinated palette
The default palette is an exported Looma theme. To replace it with your own identity, use the Looma customizer. It creates light and dark palettes together, including readable text, selected rows, focus rings and status colors.
- Choose a starting theme, then adjust its palette and typography.
- Check both light and dark previews.
- Export the CSS and keep the editable recipe alongside it.
- Load the exported CSS before your site's layout adjustments.
Theme the shared Looma properties instead of styling the internals of individual controls. Navigation, search, buttons and documentation then use the same visual language.
Colors and typography
| Looma property | Use |
|---|---|
--ui-font-sans | Body text and interface controls. |
--ui-font-display | Headings; falls back to the body font when unset. |
--ui-font-mono | Code. |
--ui-surface, --ui-surface-raised, --ui-surface-sunken | The page, raised content and recessed regions. |
--ui-text, --ui-text-secondary, --ui-text-muted | Body text and supporting information. |
--ui-accent | Primary action fill. |
--ui-link-color | Link text, when supplied by your theme; otherwise the accent is used. |
--ui-selection-* | Selected navigation and choices. |
--ui-focus-ring | Keyboard focus. |
--ui-border, --ui-radius-sm, --ui-radius-md | Rules, edges and corners. |
See Looma's token reference for the full set.
Layout widths
| Markupress property | Default | Use |
|---|---|---|
--markupress-page-width | 90rem | Maximum width of the header, columns and footer. |
--markupress-content-width | 54rem | Maximum width of the content column, including its padding. |
--markupress-sidebar-width | 18rem | Sidebar width on wide screens. |
--markupress-outline-width | 13rem | Width of the “On this page” outline. |
--markupress-home-width | 75rem | Maximum width of a home page. |
--markupress-background | var(--ui-surface) | Documentation shell background; accepts a color, texture or gradient. |
Light and dark modes
The appearance button cycles through Automatic, Light and Dark. Automatic follows the operating system. An explicit choice is remembered and applied before the page paints.
If your application supplies its own switch, set data-theme="light" or data-theme="dark" on the document root. Remove the attribute to follow the system. A nested theme boundary affects only its descendants.
How styles reach the page
Looma's tokens, light/dark themes and Markupress's document defaults are page-wide styles, delivered through MarkupKit's css option.
Each Markdown page imports styles/prose.css. Those rules stop at embedded component boundaries. The shell styles its own header, sidebar and columns; page-wide rules cover MarkupKit's breadcrumbs and pager.
With the standalone Markdown plugin, markdown({ styles: [file] }) imports the given stylesheets into every Markdown page component.
The reading area uses Looma’s --ui-surface-content; the header and footer use --ui-surface-chrome. Both follow the applied theme’s canvas, with the reading area lighter than the surrounding chrome. You can override these public surface roles in your theme.