For theme users
Editable styles
The editor changes a complete visual system, not your page structure or arbitrary CSS.What you can edit
| Category | Effect and representative fields | What to expect |
|---|---|---|
| Color | Background, foreground, surfaces, primary/secondary/accent, interaction and feedback. | Most semantic colors can differ in Light and Dark. |
| Typography | Families, nine weights, sizes, line heights, tracking. | Standard shared fields update both modes. |
| Layout & shape | Base spacing unit, control-size multipliers, radius, borders, and focus ring. | Changes rhythm and silhouette. |
| Depth & material | Shadows, blur, saturation, structured gradients, background/surface patterns. | Inputs are constrained structured values. |
| Motion | Durations and easing curves. | Standard shared fields update both modes. |
Light and Dark are two work surfaces
The editor mode switch chooses the appearance scope you are editing. Colors and materials can vary by mode, while shared fields intentionally stay consistent.
What the editor does not do
It does not modify application information architecture, page content, component structure, or arbitrary CSS. To see changes, components in an app must consume OriaTheme CSS variables.
Understand base colors and semantic colors