Tool: Astryx theming
What it does
- Makes Astryx look like your site instead of Meta's default.
- A theme is a set of CSS variable overrides. You don't fork or wrap components.
When to reach for it
- You build on Astryx and need it to match your DESIGN.md.
- You need light and dark modes, or a different look in one section.
How to use it
- Start from one of seven themes: neutral, butter, chocolate, matcha, stone, gothic, y2k.
- Wrap the app in
<Theme theme={...}>. mode is 'system' by default, or 'light' or 'dark'.
- The main variables:
--color-background-{body,surface,card,popover,muted}--color-text-{primary,secondary,accent,disabled}--color-border, --color-border-emphasized, --color-accent- type:
--font-family-{body,heading,code} and --text-…-{size,weight,leading}
- corners:
--radius-{inner,element,container,page,none,full}
- shadows:
--shadow-{low,med,high}
- The default accent is #0064E0 in light and #2694FE in dark.
- Give any value as a
[light, dark] pair.
defineTheme builds a theme from:
- value overrides;
- scale settings that generate values from a few inputs: type (base, ratio), corners (base, multiplier), motion (fast, medium, ratio);
- component overrides by name (
base, variant:value), not CSS selectors. A new value adds a new variant.
extends builds on another theme. Give only what changes.theme palette generate turns seed colours into 21 shades each for light and dark.adaptations change values by screen width, pointer, contrast or motion setting.- Nest themes: wrap a section in its own
<Theme>.
theme add wires in an installed theme. theme eject copies its source for you to own.- With server rendering, use built themes. Runtime themes flash on load.
- With Tailwind,
tailwind-theme.css maps the values to classes such as bg-surface and text-primary.
- A theme names its font but doesn't load it. Add the font link yourself.
- On a no-build page, set
data-astryx-theme on <html>.
What happened when we used it
- Our build tried Astryx. It's themed through CSS variables.
- It reads clean and systematic, so it needs a lot of theming to feel warm.
Source