Astryx

§Astryx

§Install using a package manager

Install the theme and its Astryx peer dependency:

bun add astryx-dracula @astryxdesign/core

You can use the equivalent command for npm, pnpm, or Yarn.

§Install using Git

If you are a Git user, you can install the theme and keep it up to date by cloning the repository:

git clone https://github.com/dracula/astryx.git

§Install manually

Download the GitHub .zip archive and extract it.

For an Astryx app, copy these files into your project:

• astryx-dracula.js
• astryx-dracula.d.ts
• astryx-dracula.variants.d.ts
• theme.css
• tokens.css
• icons.tsx
• fonts/

Keep the files together so their relative imports continue to resolve.

§Activating the theme

Import the Astryx base styles before the Dracula styles, then wrap your application in the theme provider:

import "@astryxdesign/core/reset.css";
import "@astryxdesign/core/astryx.css";
import "astryx-dracula/tokens.css";
import "astryx-dracula/theme.css";
import { Theme } from "@astryxdesign/core/theme";
import { astryxDraculaTheme } from "astryx-dracula";

<Theme theme={astryxDraculaTheme} mode="dark">
  <App />
</Theme>;

Copy the package's fonts/ directory into your app's served public/fonts/ directory. Without those files, the theme falls back to the system monospace font.

§Using plain CSS

Projects that do not use Astryx components can import the token layer directly:

@import "astryx-dracula/tokens.css";

Use the semantic custom properties in your styles:

.example {
  color: var(--color-text-primary);
  background: var(--color-background);
  border-color: var(--color-border);
}

See the usage guide for integration details and troubleshooting.