ORTSZEIT · DOCS · CUSTOM CSS

Custom CSS

Pro lets your blog carry its own CSS. It is added after the theme’s stylesheet on every page of the blog, so a few lines can change the colours or the type without starting from nothing.

Where it goes

1. Open your blog’s Settings in the editor at studio.ortszeit.app.
2. Paste the CSS into Custom CSS and choose Save settings.
3. Reload your blog.

To go back to the plain theme, empty the field and save. On the Free plan the field is not shown; CSS you saved earlier is kept, but not used, and it comes back if you subscribe again. It is also in your export, as custom_css in blog.yaml.

What Ortszeit removes

Your CSS goes into the page inside a <style> element. Before it does, Ortszeit removes whatever could load something from another site, cover the page or break out of that element. The filter cuts the construct out and does not try to repair the rule around it:

• comments (/* … */) — write them freely, readers never get them
• backslashes, so there are no CSS escapes: type “ rather than "\201C"
• every < (which also rules out media queries written as ranges with <; use max-width:)
• @import, @charset, @namespace, and whole @font-face blocks — the blog uses system fonts and loads no fonts from anywhere
• url(…), image-set(…) and src(…): no background images, no tracking pixels, not even data: addresses; gradients work
• expression(…), behavior: and -moz-binding:
• position: fixed, so nothing can sit on top of the page

Behind the filter, the blog’s Content-Security-Policy stops the browser from fetching anything from another site even if a construct got through. CSS that needs none of the above arrives exactly as you wrote it.

What to target

These classes and custom properties are a stable interface: we keep them as they are, so your CSS keeps working. If one ever has to change, we announce it in advance and note it in the changelog below. Anything in the theme that is not listed here may change without notice — target only what is listed.

The colours and fonts are custom properties on :root, and setting them is often all a new look needs. The theme sets them a second time inside @media (prefers-color-scheme: dark), so set yours there too — or decide on one scheme with color-scheme: dark.

The classes to target:

Colour scheme and data-theme

Under Colour scheme in the settings you choose how the blog handles light and dark: follow the reader’s device (the default), always light, always dark, or follow the device with a switch in the header that readers can use. A forced scheme, or a reader’s choice with the switch, is set as data-theme="light" or data-theme="dark" on the <html> element; when the device decides, the attribute is absent. The theme sets its dark colours for :root[data-theme="dark"] as well, and its @media (prefers-color-scheme: dark) block applies only to :root:not([data-theme="light"]). If your blog does not simply follow the device, give your own dark colours the same two selectors:

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) { --paper: #0E161C; }
}
:root[data-theme="dark"] { --paper: #0E161C; }

The switch is the only script the theme adds for this. It keeps the reader’s choice in their browser’s local storage, sets no cookie and loads nothing; readers without JavaScript don’t see the switch.

An example

A darker paper and a sans-serif text, in light and dark:

:root {
  --paper: #F4F1EA;
  --font-body: system-ui, sans-serif;
}
@media (prefers-color-scheme: dark) {
  :root { --paper: #0E161C; }
}
.post h2 { font-size: 1.5rem; }

Four complete stylesheets — a newspaper, plain monospace, a night theme and a postcard — with screenshots and a way to preview them on a sample blog are in ortszeit/examples on GitHub.

Changelog

Changes to the classes and custom properties listed above.

• 2026-11-10 — The listed classes and custom properties are declared a stable interface.
• 2026-11-10 — Added: the data-theme attribute on <html> (light, dark, or absent) for the blog’s colour scheme. Nothing listed changed; CSS written for prefers-color-scheme keeps working on blogs that follow the device.