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

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, 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, 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, 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, presents a muted, earthy palette reminiscent of natural stone textures.

Matcha

Available at 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, 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, 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.

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.

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 - Full TypeScript implementation of the Chocolate theme including design tokens and component style mappings
• packages/themes/butter/theme.css.d.ts - Export stub for the Butter theme package
• packages/themes/neutral/theme.css.d.ts - Export stub for the Neutral theme package
• packages/themes/stone/theme.css.d.ts - Export stub for the Stone theme package
• packages/themes/matcha/theme.css.d.ts - Export stub for the Matcha theme package
• packages/themes/gothic/theme.css.d.ts - Export stub for the Gothic theme package
• 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) and CSS declaration stubs (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, while other themes like Butter, Neutral, Stone, Matcha, Gothic, and Y2K use export stubs located in 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.

{
  "mcpServers": {
    "instagit": {
      "command": "npx",
      "args": ["-y", "instagit@latest"]
    }
  }
}