# Built-in Themes Available in Astryx: Neutral, Butter, Chocolate, and 4 Others

> Discover the seven built-in Astryx themes including Neutral, Butter, and Chocolate. Customize your UI with these pre-defined design token sets for easy theming.

- Repository: [Meta/astryx](https://github.com/facebook/astryx)
- Tags: getting-started
- Published: 2026-07-15

---

**Astryx ships with seven pre-defined design token sets—Neutral, Butter, Chocolate, Stone, Matcha, Gothic, and Y2K—each maintained as individual packages under `packages/themes/<name>` that export theme definitions compatible with the `ThemeProvider`.**

The facebook/astryx repository includes a curated collection of built-in themes available in Astryx to accelerate UI development. These themes provide complete design systems with color palettes, typography, and component styles that can be dropped into any Astryx application via npm packages.

## Complete List of Built-in Astryx Themes

Each theme resides in its own directory under `packages/themes/` and exports a theme definition object. The repository currently contains the following seven built-in themes:

### Neutral

Located at [`packages/themes/neutral/theme.css.d.ts`](https://github.com/facebook/astryx/blob/main/packages/themes/neutral/theme.css.d.ts), **Neutral** provides a balanced, low-contrast palette intended as the default baseline for applications requiring subtle, unobtrusive styling.

### Butter

Found in [`packages/themes/butter/theme.css.d.ts`](https://github.com/facebook/astryx/blob/main/packages/themes/butter/theme.css.d.ts), **Butter** offers a soft, warm palette featuring buttery yellows and gentle neutrals suitable for friendly, approachable interfaces.

### Chocolate

Defined in [`packages/themes/chocolate/src/chocolateTheme.ts`](https://github.com/facebook/astryx/blob/main/packages/themes/chocolate/src/chocolateTheme.ts), **Chocolate** delivers a warm, cozy aesthetic inspired by rich chocolate and caramel tones. This file contains the full theme implementation including tokens, typography definitions, shadow values, and component-specific styles.

### Stone

The **Stone** theme, exported from [`packages/themes/stone/theme.css.d.ts`](https://github.com/facebook/astryx/blob/main/packages/themes/stone/theme.css.d.ts), presents a muted, earthy palette reminiscent of natural stone textures.

### Matcha

Available at [`packages/themes/matcha/theme.css.d.ts`](https://github.com/facebook/astryx/blob/main/packages/themes/matcha/theme.css.d.ts), **Matcha** provides a fresh, green-centric palette evoking the visual characteristics of Japanese matcha.

### Gothic

Located in [`packages/themes/gothic/theme.css.d.ts`](https://github.com/facebook/astryx/blob/main/packages/themes/gothic/theme.css.d.ts), **Gothic** is a dark-mode-first theme featuring deep shadows and high-contrast accents for dramatic, modern interfaces.

### Y2K

Found at [`packages/themes/y2k/theme.css.d.ts`](https://github.com/facebook/astryx/blob/main/packages/themes/y2k/theme.css.d.ts), **Y2K** implements a retro-future palette that references early-2000s web aesthetics.

## Installing and Applying Themes

Themes are distributed as individual npm packages following the pattern `@astryxdesign/theme-<name>`. Import the theme object and pass it to the `ThemeProvider` from `@astryxdesign/core/theme`.

```tsx
import { ThemeProvider } from '@astryxdesign/core/theme';
import { chocolateTheme } from '@astryxdesign/theme-chocolate';

export default function App() {
  return (
    <ThemeProvider theme={chocolateTheme}>
      <YourComponentTree />
    </ThemeProvider>
  );
}

```

## Runtime Theme Switching

You can dynamically swap between built-in themes by managing the theme object in state and updating the `theme` prop on `ThemeProvider`.

```tsx
import { useState } from 'react';
import { ThemeProvider } from '@astryxdesign/core/theme';
import { chocolateTheme } from '@astryxdesign/theme-chocolate';
import { butterTheme } from '@astryxdesign/theme-butter';
import { neutralTheme } from '@astryxdesign/theme-neutral';

export function ThemeSwitcher() {
  const [theme, setTheme] = useState(neutralTheme);
  
  return (
    <>
      <select
        onChange={e => setTheme(
          e.target.value === 'chocolate' ? chocolateTheme :
          e.target.value === 'butter' ? butterTheme :
          neutralTheme
        )}
      >
        <option value="neutral">Neutral</option>
        <option value="butter">Butter</option>
        <option value="chocolate">Chocolate</option>
      </select>

      <ThemeProvider theme={theme}>
        <YourComponentTree />
      </ThemeProvider>
    </>
  );
}

```

## Theme Source Structure

The source files for each theme contain the complete token definitions required by Astryx's theming system:

- [`packages/themes/chocolate/src/chocolateTheme.ts`](https://github.com/facebook/astryx/blob/main/packages/themes/chocolate/src/chocolateTheme.ts) - Full TypeScript implementation of the Chocolate theme including design tokens and component style mappings
- [`packages/themes/butter/theme.css.d.ts`](https://github.com/facebook/astryx/blob/main/packages/themes/butter/theme.css.d.ts) - Export stub for the Butter theme package
- [`packages/themes/neutral/theme.css.d.ts`](https://github.com/facebook/astryx/blob/main/packages/themes/neutral/theme.css.d.ts) - Export stub for the Neutral theme package  
- [`packages/themes/stone/theme.css.d.ts`](https://github.com/facebook/astryx/blob/main/packages/themes/stone/theme.css.d.ts) - Export stub for the Stone theme package
- [`packages/themes/matcha/theme.css.d.ts`](https://github.com/facebook/astryx/blob/main/packages/themes/matcha/theme.css.d.ts) - Export stub for the Matcha theme package
- [`packages/themes/gothic/theme.css.d.ts`](https://github.com/facebook/astryx/blob/main/packages/themes/gothic/theme.css.d.ts) - Export stub for the Gothic theme package
- [`packages/themes/y2k/theme.css.d.ts`](https://github.com/facebook/astryx/blob/main/packages/themes/y2k/theme.css.d.ts) - Export stub for the Y2K theme package

## Summary

- Astryx provides seven built-in themes: **Neutral**, **Butter**, **Chocolate**, **Stone**, **Matcha**, **Gothic**, and **Y2K**
- Each theme is maintained as a separate package under `packages/themes/<name>` in the source repository
- Themes export definition objects (such as `chocolateTheme`) that are compatible with Astryx's `ThemeProvider`
- Individual npm packages follow the naming convention `@astryxdesign/theme-<name>`
- Source implementations include both full TypeScript definitions (e.g., [`chocolateTheme.ts`](https://github.com/facebook/astryx/blob/main/chocolateTheme.ts)) and CSS declaration stubs ([`theme.css.d.ts`](https://github.com/facebook/astryx/blob/main/theme.css.d.ts))

## Frequently Asked Questions

### How many built-in themes does Astryx provide?

Astryx provides seven built-in themes: Neutral, Butter, Chocolate, Stone, Matcha, Gothic, and Y2K. Each theme is located in its own directory under `packages/themes/` in the facebook/astryx repository and distributed as a separate npm package.

### Where are the theme definitions stored in the source code?

Theme definitions reside in `packages/themes/<theme-name>/`. The Chocolate theme is fully implemented in [`packages/themes/chocolate/src/chocolateTheme.ts`](https://github.com/facebook/astryx/blob/main/packages/themes/chocolate/src/chocolateTheme.ts), while other themes like Butter, Neutral, Stone, Matcha, Gothic, and Y2K use export stubs located in [`theme.css.d.ts`](https://github.com/facebook/astryx/blob/main/theme.css.d.ts) files within their respective directories.

### Can I use multiple themes in the same Astryx application?

Yes. You can import multiple theme objects (such as `chocolateTheme`, `butterTheme`, and `neutralTheme`) into the same application and switch between them at runtime by updating the `theme` prop passed to `ThemeProvider`. This allows for dynamic theme switching based on user preferences or application state.

### Are Astryx themes available as separate npm packages?

Yes. According to the source code structure, each theme is published as an individual npm package following the pattern `@astryxdesign/theme-<name>`. For example, the Chocolate theme is available as `@astryxdesign/theme-chocolate`, while the Neutral theme is available as `@astryxdesign/theme-neutral`.