Theme · astryx-svelte

Theme @astryx-svelte/core v0.3.0 · theme

Usage

Wraps a subtree with a specific Astryx theme. For static production themes, use astryx theme build and import the generated CSS plus built theme object for first-paint and SSR performance. Use runtime defineTheme() when themes are dynamic or for prototyping. defineTheme accepts a tokens object whose keys are CSS custom property names (always prefixed with --). Common token names include --color-accent, --color-background-surface, --color-background-body, --color-text-primary, --color-text-secondary, --radius-container, --spacing-1 through --spacing-6. Values can be a string (same for light/dark) or a [light, dark] tuple. Example: ``

ts
import {defineTheme} from '@astryx-svelte/core/theme';
const myTheme = defineTheme({
  name: 'ocean',
  tokens: {
    '--color-accent': ['#0077B6', '#48CAE4'],
    '--color-background-surface': ['#F0F8FF', '#0A1628'],
    '--color-text-primary': ['#0A1317', '#FFFFFF'],
    '--radius-container': '16px',
  },
});

ts
 
import { theme } from '@astryx-svelte/core';

Best practices

Guidance	Practices
Do	Build app themes that are known ahead of time with `astryx theme build`, then import the generated CSS and built theme object.
Do	Use runtime themes when the theme is created or edited in the browser, such as theme editors, user branding, or prototypes.
Do	Token names always start with `--` (e.g. `--color-accent`, `--color-background-surface`). Do not omit the prefix.
Don't	Default to runtime themes in SSR production apps. Component overrides inject after hydration instead of shipping as static CSS.

Examples

Common configurations, variations, and states.

Theme — Apply Theme

Wrap a subtree in Theme to apply a theme to every child component in that region.

Theme — Nested Theme

Nested Theme providers let a local region use a different theme without affecting the rest of the page.

Theme — Switch Themes

Use state to switch the theme object passed to Theme and preview a different visual treatment.