@zvk/themes

Preset theme configurations for ZVK UI, composite, chart, and graph packages.

import "@zvk/ui/styles.css";
import "@zvk/themes/styles.css";
import "@zvk/composite/styles.css";
import "@zvk/charts/styles.css";
import "@zvk/graphs/styles.css";

@zvk/themes has no runtime dependencies and no React entry point. The root package exports typed preset metadata, attribute names, mode names, and the CSS variable contract. @zvk/themes/styles.css provides preset CSS variables for existing ZVK styles.

Presets

The package includes eleven preset IDs:

• slate
• teal
• indigo
• rose
• amber
• sky
• emerald
• violet
• copper
• graphite
• glass

Each preset supports the existing UI mode axis through data-zvk-ui-theme="light" and data-zvk-ui-theme="dark". Apply the preset and mode attributes to the same root scope:

<div className="zvk-ui-root" data-zvk-ui-preset="sky" data-zvk-ui-theme="dark">
  {/* app */}
</div>

Styling

Load @zvk/themes/styles.css after @zvk/ui/styles.css and before composite, chart, and graph package styles. The preset stylesheet overrides the --zvk-ui-* color and control variables that those packages already consume.

@zvk/themes is intentionally scoped to color and control semantics only. Typography, spacing, density, radius, motion, and stack variables remain owned by @zvk/ui.

When theme attributes are scoped to a subtree (for example a page section), downstream package CSS should read --zvk-ui-* from that local scope so package components and aliases resolve correctly.

The preset axis is separate from light and dark modes:

• data-zvk-ui-preset chooses the color scheme family.
• data-zvk-ui-theme chooses light or dark mode for that family.

The glass preset is a material-heavy preset for translucent controls, navigation, floating overlays, and focused app surfaces. It uses progressive enhancement through generic @zvk/ui material tokens, so unsupported or reduced-transparency environments fall back to more opaque surfaces.

Server Safety

The root metadata entry point does not read browser globals, React, or sibling ZVK packages at module initialization.

Repo Skill

Use .codex/skills/use-zvk-themes/SKILL.md when maintaining this package.