Theme System

Install a theme package, wrap your app in <Theme>, and pick light or dark mode. For the full guide — available themes, integration themes, dark mode, nested themes, and production builds — see astryx docs use-a-theme.

tsx
import {Theme} from '@astryxdesign/core';
import {neutralTheme} from '@astryxdesign/theme-neutral';
​
function App() {
  return (
    <Theme theme={neutralTheme}>
      <YourApp />
    </Theme>
  );
}

Use defineTheme with token overrides, scale configs, and component style overrides. For the full guide — palette generation, extending themes, adaptations, custom variants, and production builds — see astryx docs author-a-theme.

bash
astryx theme template    # annotated starter file
astryx theme add stone   # copy an existing theme
astryx theme build ./src/themes/my-theme.ts

Use [light, dark] tuples in token values for automatic mode switching. Use mode='system' (default) on Theme to follow OS preference. Full guide: astryx docs use-a-theme.

tsx
'--color-accent': ['#0064E0', '#2694FE'],
//                   ^light     ^dark

Install an integration and Astryx discovers its themes automatically. Copy one into your project with astryx theme add <name> --package <integration>. For the full walkthrough, see astryx docs use-a-theme.