Dark Mode
The bundled stylesheet provides dark-mode defaults when a .dark class is present.
.dark {
--impr-surface-background-color: #0b0b0c;
--impr-surface-foreground-color: oklch(0.922 0 0);
--impr-surface-backdrop-color: rgba(0, 0, 0, 0.4);
--impr-surface-border-color: oklch(1 0 0 / 10%);
}If your application already toggles .dark on the root element, the surface will inherit those values.
For example:
<html class="dark">
...
</html>Custom dark theme
Override the same variables:
.dark {
--impr-surface-background-color: #101114;
--impr-surface-foreground-color: #f5f5f5;
--impr-surface-border-color: rgb(255 255 255 / 12%);
}