Theming
All colors are driven by 10 CSS custom properties. Override them in themes.css.
Surface tokens
| Token | Role |
|---|---|
--fap-color-primary | Primary brand color |
--fap-color-bg | Page background |
--fap-color-text | Default text color |
--fap-color-muted | Subdued text, captions |
--fap-color-border | Borders, dividers |
Semantic tokens
| Token | Role |
|---|---|
--fap-color-success | Positive actions |
--fap-color-warning | Caution indicators |
--fap-color-danger | Destructive actions, errors |
--fap-color-secondary | Secondary accents |
--fap-color-primary-inverse | Inverse of primary |
Tokens in context
Highlight
Inserted
Deleted
Usage
<link rel="stylesheet" href="fap.min.css">
<link rel="stylesheet" href="fap.themes.css">
:root {
--fap-hue: 260;
--fap-color-primary: hsl(260 65% 50%);
--fap-color-success: hsl(150 50% 40%);
--fap-color-danger: hsl(0 65% 50%);
}Theme toggle
<button data-theme-toggle data-outline>
<span class="fabcons-moon" aria-hidden="true"></span>
<span class="fabcons-sun" aria-hidden="true"></span>
Toggle theme
</button>