Theming
Imperative Surface uses CSS custom properties for its core colors and shape.
The default variables are defined under :root:
:root {
--impr-surface-background-color: oklch(1 0 0);
--impr-surface-foreground-color: oklch(0.145 0 0);
--impr-surface-backdrop-color: rgba(0, 0, 0, 0.4);
--impr-surface-border-color: oklch(0.922 0 0);
--impr-surface-border-radius: 1.5rem;
}Override only the values you want to change:
:root {
--impr-surface-background-color: #111827;
--impr-surface-foreground-color: #f9fafb;
}Because these are normal CSS variables, your application's existing theme system can control them.