Theme contract

Dark, light, auto, and custom themes

Theme files override public tokens only. Component markup and component rules stay identical.

Official entry points

Choose one theme strategy per document
Asset	Behavior	HTML attribute
`framebase.css`	Canonical dark theme	None
`framebase-light.css`	Fixed light theme	None
`framebase-themes.css`	Dark, light, or system preference	`data-theme`

One HTML contract

index.htmlHTML

<html lang="en" data-theme="auto">
  <link rel="stylesheet" href="framebase-themes.css">
</html>

Use dark, light, or auto. A consumer may change that attribute with its own preference control; FrameBaseCSS does not store preferences or ship runtime JavaScript.

Scoped preview

Dark scope

Light scope

Custom theme

Copy framebase-theme-template.css, keep its base import first, delete tokens that should inherit, and validate contrast in every semantic state. Do not copy component rules into a theme.