# Core > Design tokens, `applyTheme`, theme mode helpers, and the CSS variable foundation that every package builds on. - Available in: `@sisyphos-ui/react`, `@sisyphos-ui/vue`, `@sisyphos-ui/angular` - Docs: https://www.sisyphosui.com/docs/components/core ## Installation Pick the framework binding that matches your stack: ```bash pnpm add @sisyphos-ui/react # React 18+ pnpm add @sisyphos-ui/vue # Vue 3+ pnpm add @sisyphos-ui/angular # Angular 17+ ``` ## Import ```tsx import "@sisyphos-ui/react/styles.css"; import { Core } from "@sisyphos-ui/react"; ``` ## Framework usage ### React 18+ ```tsx import { applyTheme } from "@sisyphos-ui/core"; applyTheme({ colors: { primary: "#7c3aed" }, }); ``` ### Vue 3+ ```ts import { applyTheme } from "@sisyphos-ui/core"; applyTheme({ colors: { primary: "#7c3aed" }, }); ``` ### Angular 17+ ```ts import { applyTheme } from "@sisyphos-ui/core"; applyTheme({ colors: { primary: "#7c3aed" }, }); ``` ## Props | Prop | Type | Default | Description | | --- | --- | --- | --- | | 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 ``. | | getThemeMode() | `() => "light" \| "dark"` | — | Reads the current mode from the `` element. | | toggleThemeMode() | `() => void` | — | Flips between light and dark mode. | | themes | `Record<"default" \| "blue" \| "purple" \| "green", ThemeConfig>` | — | Built-in preset palettes ready to pass to `applyTheme`. | | createTheme(config) | `(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. | ## Accessibility notes - `setThemeMode` swaps the `sisyphos-theme-light` / `sisyphos-theme-dark` class on ``, 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.