App Colors
Extraction UI provides colors for the application background, text, and panel surfaces.
These colors are generated from the corresponding theme options and automatically stay in sync with your configuration.
The body and foreground colors are intended for the application’s main layout and represent the default page background and foreground text colors.
The panel color is used by components that render elevated surfaces, such as Accordion, Alerts, Cards, Dialogs, Dropdowns, Menus, Popover, Select, and Toast.
| Semantic Color | Light | Dark |
|---|---|---|
body | --ex-options-body-color | --ex-options-body-color-dark |
foreground | --ex-options-foreground-color | --ex-options-foreground-color-dark |
panel | --ex-options-panel-body-color | --ex-options-panel-body-color-dark |
Because these colors are defined inside @theme, Tailwind automatically generates the corresponding color utilities.
For example, you can use bg-body, bg-panel, border-panel, text-foreground, stroke-body, ring-panel, and any other color utility supported by Tailwind without any additional configuration.