Theme

The default theme is called The Pass, after the counter in a restaurant kitchen where every plate is checked before it leaves. It is built for long reading and quick scanning:

• Paper and ink. A warm white page (#FAFAF8), or a near-black one in dark mode (#111016), with text at three fixed strengths.
• One color for state. Violet marks what is active, focused, linked or fresh, and nothing else, so a reader can find everything that is live by color alone. Your accent takes violet's place everywhere it means state.
• Mono for what machines made. Labels, paths, timestamps and code are set in JetBrains Mono. Prose is set in Inter, and Arabic in Thmanyah Sans.
• The ticket. A small card with a perforated header and a bitten bottom edge is the system's signature shape. LaRecipe's own mark is drawn from it.

Light and dark are both first-class, and right-to-left pages are the same design mirrored, not a variant. The fonts ship with LaRecipe's UI build, so a site looks right with no setup at all.

LaRecipe writes only the tokens you set, as CSS variables in a <style> tag in the page head. Each value is checked first, because it comes from a content file: a value that could close the tag or inject a rule is dropped. The dark-mode accent is derived from yours in OKLCH (lighter, a little less saturated). fonts.arabic sits right after the sans font in the stack, so Latin words, numbers and code inside Arabic text keep the sans face.

These CSS variables hold the design system. They switch values in dark mode, so CSS that reads them follows the reader's mode with no extra rules.

.status-pill {
  border: 1px solid var(--lr-hairline);
  border-radius: var(--lr-radius-sm);
  color: var(--lr-ink-muted);
}

.status-pill[data-live] {
  color: var(--lr-accent-current);
}

A stylesheet listed under assets.css is served by the docs asset route with its content hash in the URL (?v=...), so browsers and CDNs keep it for a year and a changed file gets a new URL.

For CSS that lives outside the docs, or a stylesheet only some sets get, register it in a service provider with LaRecipe::head(), which prints whatever you return into the <head> of every docs page:

use LaRecipe\Facades\LaRecipe;

public function boot(): void
{
    LaRecipe::head(fn () => '<link rel="stylesheet" href="/css/docs.css">');
}

The callback receives the doc set, so one app can style its sets differently (fn ($set) => $set->key === 'handbook' ? '...' : ''). It may return HTML, a view or anything Htmlable. It is also a place for font stylesheets from a font service.

• Dark mode. The page's <html> element carries data-theme="light" or data-theme="dark". When a rule needs a different value in dark mode and no theme variable fits, scope it with :root[data-theme='dark'].
• Right to left. A locale with "dir": "rtl" sets dir="rtl" on the page, and LaRecipe's own CSS mirrors through logical properties. Write yours the same way (margin-inline-start, padding-inline, inset-inline-end) and it mirrors too. Code blocks, commands and version numbers stay left to right. See Languages.

A reader's own choice of light or dark wins over mode. They make it with the theme button at the end of the header, which switches between light and dark in one click, and it is stored in their browser under larecipe:theme. The color mode is set before the first paint, so pages never flash the wrong theme.

The switch next to the logo hides the navigation on wide screens and shows it again, the way LaRecipe 2's did. With the navigation hidden, the article widens for easier reading. That choice is stored under larecipe:sidebar and applied before the first paint too. On phones the navigation opens as a sheet from the menu button instead.