@astryx-vue/themes

@astryx-vue/themes

CSS themes for astryx-vue, an unofficial Vue 3 port of Astryx. Not affiliated with Meta.

One package ships every theme. Structural styles stay in @astryx-vue/core. A theme sets color, type, radius, shadow, and motion through CSS variables and cascade layers. There is no StyleX build step.

Install

pnpm add @astryx-vue/core @astryx-vue/themes

A theme does not render components by itself. Install @astryx-vue/core with it. Peer dependency of core: vue ^3.5.0.

Use

import '@astryx-vue/themes/neutral.css'

<html data-astryx-theme="neutral">

Put data-astryx-theme on the element that should take the theme. On html, that is the whole app. On a smaller element, only that subtree. Neutral also writes the same variables on :root, so a single-theme app can import neutral.css without the attribute. The other themes do not touch :root.

Every theme loads Figtree and JetBrains Mono (400, 500, 600, 700, and 400 italic; Figtree also includes 600 italic). Butter, Chocolate, Gothic, Matcha, Stone, and Y2K also load their own text faces.

Entries

Related packages

Resources

• Themes
• CSS variables
• Repository

License

MIT. Astryx is copyright Meta Platforms, Inc. This package is an unofficial port and is not affiliated with or endorsed by Meta.