Color Variables
You can customize any CSS Color variable in Theme Styles.
Webframe colors look great in both Light and Dark modes because, by default, colors invert in Dark mode:
| Variable | Light mode | Dark mode | Description |
|---|---|---|---|
--...-dark | darker tones | lighter tones | luminance modifier |
--...-light | lighter tones | darker tones | luminance modifier |
--...-hard | more opaque | more opaque | opacity modifier |
--...-soft | less opaque | less opaque | opacity modifier |
--shade | darkens color | lightens color | for overlay effect |
--tint | lightens color | darkens color | for overlay effect |
Inverted colors result in similar level of contrast in both modes. Style in your favorite theme mode, meet the accessibility standards, and it will automagically work for the other modes.
This documentation is built using the same principle. Try it for yourself - toggle between Light and Dark modes.
Theme Colors
Example
Alert / Callout / Notification
Example
Shades, Tones & Tints
Example
Foreground Colors
Example
Other Colors
Example