Color Scheme
Set preferred color scheme
Syntax
visual="color-scheme:[value]"Values
| Value | CSS Output | Description |
|---|---|---|
light | color-scheme: light | Light mode |
dark | color-scheme: dark | Dark mode |
normal | color-scheme: normal | System default |
Examples
html
<html visual="color-scheme:dark">Dark mode</html>Preview
Color Scheme
visual="color-scheme:dark" - Set preferred color mode
light
dark
View Code
html
<div layout="flex" space="g:medium p:medium" visual="bg:neutral-100 dark:bg:neutral-900 rounded:medium">
<div space="p:small" visual="bg:primary text:white rounded:small">light</div>
<div space="p:small" visual="bg:primary text:white rounded:small">dark</div>
</div>