Skip to content
Sisyphos UI

Core

Design tokens, `applyTheme`, theme mode helpers, and the CSS variable foundation that every package builds on.

Foundation·Available inReactVueAngular·View as Markdown

Preview

Installation

Sisyphos UI ships unified packages for React, Vue, and Angular. Pick the one that matches your stack — every framework exports the same component classes, ARIA semantics, and CSS tokens.

$ pnpm add @sisyphos-ui/react

Then import the bundled stylesheet once at app entry: import "@sisyphos-ui/react/styles.css";

Usage

Idiomatic usage in each supported framework
import { applyTheme } from "@sisyphos-ui/core";

applyTheme({
  colors: { primary: "#7c3aed" },
});

API

PropTypeDefaultDescription
applyTheme(config)(config: ThemeConfig) => void—Writes the theme's CSS variables to `:root`; the config is fully partial, so pass only what you override.
setThemeMode(mode)(mode: "light" | "dark") => void—Sets the active mode by toggling the `sisyphos-theme-*` class on `<html>`.
getThemeMode()() => "light" | "dark"—Reads the current mode from the `<html>` element.
toggleThemeMode()() => void—Flips between light and dark mode.
themesRecord<"default" | "blue" | "purple" | "green", ThemeConfig>—Built-in preset palettes ready to pass to `applyTheme`.
createTheme(config)<T extends ThemeConfig>(config: T) => T—Identity helper that preserves the literal type of a theme config.
mergeThemes(...configs)(...configs: ThemeConfig[]) => ThemeConfig—Deep-merges theme configs; later configs override earlier ones.
generateThemeCSS(config)(config: ThemeConfig) => string—Generates a `:root { … }` CSS string from a config, useful for SSR or static injection.
"@sisyphos-ui/core/styles.css"stylesheet—Compiled base stylesheet with the design-token CSS variables and default theme; import once at the app root.

The full API including refs, ARIA attributes, and HTML passthroughs lives in the package README on npm.

Accessibility

  • setThemeMode swaps the sisyphos-theme-light / sisyphos-theme-dark class on <html>, so a mode change applies instantly to every mounted component — including portal-mounted overlays.
  • Dark mode only remaps neutral and border variables; semantic colors (primary, success, error, warning, info) keep their values, so state colors read consistently in both modes.
  • applyTheme writes CSS variables to :root, so brand overrides propagate to all packages and portals without re-rendering.
  • generateThemeCSS emits a static :root { … } block for SSR injection, preventing a flash of the default theme before hydration.
Need more?View on npm →
Was this page helpful?