GUI elements read shared color and surface tokens from ef-theme.css. Per-element CSS custom properties stay on each element's docs page. Override the tokens below on :root or [data-ef-theme] to restyle the editor chrome.
Dark theme (:root and [data-ef-theme="dark"]):
10 of 10
| Token | Value |
|---|---|
--ef-color-bg | #111214 |
--ef-color-bg-panel | #17181b |
--ef-color-bg-elevated | #1f2024 |
--ef-color-bg-inset | #2a2a2a |
--ef-color-border | rgba(255, 255, 255, 0.16) |
--ef-color-border-subtle | rgba(255, 255, 255, 0.08) |
--ef-color-text | #f4f4f5 |
--ef-color-text-muted | rgba(244, 244, 245, 0.6) |
--ef-color-primary | #6ea8fe |
--ef-color-primary-subtle | rgba(110, 168, 254, 0.18) |
Light theme ([data-ef-theme="light"]):
10 of 10
| Token | Value |
|---|---|
--ef-color-bg | #f2f3f5 |
--ef-color-bg-panel | #ffffff |
--ef-color-bg-elevated | #e9eaed |
--ef-color-bg-inset | #e0e2e6 |
--ef-color-border | rgba(0, 0, 0, 0.16) |
--ef-color-border-subtle | rgba(0, 0, 0, 0.1) |
--ef-color-text | #1b1c1f |
--ef-color-text-muted | rgba(27, 28, 31, 0.6) |
--ef-color-primary | #2563eb |
--ef-color-primary-subtle | rgba(37, 99, 235, 0.14) |