# The theme file `gui/themes/.xml`. Inherit `aurora.xml`, the reference token theme: it maps the components to their token looks. ```xml 6px #1d4ed8 #ffffff ``` - `tokens="true"` on every theme with ``, the dark one too: without it the contract check fails. - ``: the element name is the token, `` sets `--xios-radius-md`: names from `tokens.css`, or the knobs listed in `tools/check-token-contract.mjs` (INTENTIONAL). No `;{}` in a value. - ``: `` sets `--xios-color-x`. Seeds: `primary`, `secondary`, `tertiary`, each with `on-`; `background`, `surface`, `on-surface`; `error`, `on-error`, `warning`, `success`. Also `red`, `yellow` (some CSS falls back to them: same as error, warning) and `lightText`/`darkText`, `lightIcon`/`darkIcon` (picked by background darkness). - A child merges with its parent: colors, tokens, fonts by name, `` per tag and attribute, `icon`. List only changes. - Fonts: `` and `'Inter', sans-serif` in ``. - `` maps a tag to its look (``), the one place look names are used; aurora's mapping is inherited. Theme-wide `--xc-*`: ``. ## Dark variant A theme that inherits the light one: dark `background`, `surface`, `on-surface`, a lighter `primary` with a dark `on-primary`, brighter state colors (and `red`, `yellow`), `darkIcon` as `primary`, and `dark` (dark date pickers). Check its contrast again. ## Register and preview - In xios-core: `` in `config/system.xml` ``. Theme Studio saves to the Themes storage folder, registered by `name`. - Preview: `npx http-server . -p 5459 -c-1` (root first), open `/tools/tester/visual-boot.html?app=/ui/Input/tests/specimen.xml&theme=harbor`, then other `ui//tests/specimen.xml`s. An unknown theme falls back silently: check `--xios-color-primary` resolves.