# MxTheme — Component Context

MxTheme manages design tokens (CSS custom properties) across all Matrix components.

## Current Capabilities
- **Color modes:** light, dark, system (auto-detects OS preference)
- **Token cascade:** Tokens set on MxTheme propagate to all child components via `$tokens` op
- **State persistence:** Theme preferences persist per principal via scoped state (scope: principal)
- **Preference integration:** `colorMode`, `fontSize`, `fontFamily` are user-tunable via system.preferences

## How to Use
- To change theme: `invoke system.theme theme.set { mode: "dark" }`
- To read current: `invoke system.theme theme.get`
- To list tokens: `invoke system.theme theme.list`
- To override a token: `invoke system.theme theme.set { tokens: { "--mx-primary": "#3b82f6" } }`

## Token Naming Convention
All tokens use `--mx-` prefix. Core tokens:
- `--mx-bg`, `--mx-fg` — background/foreground
- `--mx-primary`, `--mx-secondary` — accent colors
- `--mx-font-size`, `--mx-font-family` — typography
- `--mx-radius`, `--mx-spacing` — layout
