Theming
Use colorMode, CSS variables, unstyled, and slot class names on current components.
Theme contract
Package CSS supplies defaults. Hosts can set colorMode, override CSS variables, or use unstyled and classNames for full control.
tsx
import "@aigentive/wire-react/styles.css";
import { WireWorkspace } from "@aigentive/wire-react";
export function ThemedWorkspace({ diagram, onChange, optionCatalog }) {
return (
<WireWorkspace
diagram={diagram}
onChange={onChange}
optionCatalog={optionCatalog}
colorMode="system"
classNames={{ root: "product-wire-workspace" }}
style={{
"--wire-border-focus": "#0f766e",
"--wire-ring-focus": "0 0 0 2px rgba(15,118,110,0.26)"
}}
/>
);
}