Platform

Themes

A SemText theme is a token file, not a stylesheet fork: every --sem-* custom property a component or a handler reads, defined once per theme and switched by one attribute — data-sem-theme="<slug>". Structural rules live in the vocabulary base; a theme only sets the values.

How theming works

• data-sem-theme goes on <html> for a document — one theme per document — or on any subtree, which is how the examples on this site theme themselves inside an unthemed page.
• The vocabulary base gives every sem-* element its box before any theme is defined; a theme file only carries the --sem-* values.
• Light and dark come from one definition: a [data-color-mode="dark"] block, plus a prefers-color-scheme fallback the attribute can force either way.
• Shadow components read tokens through fallback indirection, so switching a theme needs no script — theming is zero-JS, like everything else that carries meaning.
• Themes are compiled from TRP-format YAML into semtext/themes/semtext-theme-<slug>.css ; the conventions are §6 of the spec .

What ships here

This site serves the vocabulary base and minimal-tech-light, the default theme, from /semtext/themes/ — every rendered example on /reference/ and /showcase/ uses it. The spec names three further ports ( nocturne-console, organic-warm, editorial-settings); they are not built here yet.

Create a theme

Pick a name, background, text and accent; the generator emits a complete theme file with light and dark variants and the prefers-color-scheme fallback. Drop it in your document's themes/ folder (the distribution folder form), link it after semtext.css, and set the data-sem-theme attribute to your name.