ziyarago/ui Backgrounds and gradients
Page backgrounds are built from OKLCH gradients that adapt to the theme: pastel in light, deep in dark. Cards come in eight gradient tones, soft and vivid, and keep readable text in both themes. Backgrounds animate slowly when animations and full effects are on (see Display settings in the header).
Page backgrounds
js
import { useUiTheme } from '@ziyarago/ui/theme'
useUiTheme().setBackground('aurora') // none | aurora | sunset | ocean | emerald | rose | meshdark
none
Card
on the background
aurora
Card
on the background
sunset
Card
on the background
ocean
Card
on the background
emerald
Card
on the background
rose
Card
on the background
mesh
Card
on the background
light
none
Card
on the background
aurora
Card
on the background
sunset
Card
on the background
ocean
Card
on the background
emerald
Card
on the background
rose
Card
on the background
mesh
Card
on the background
Use the same background on any element with class="zg-bg" and data-bg.
html
<div class="zg-bg" data-bg="ocean" data-theme="light">any content</div>
Gradient cards
vue
<UiCard variant="gradient" tone="sky" title="Soft" /> <UiCard variant="gradient" tone="rose" intensity="vivid" title="Vivid" />
dark · softSoft gradient tinted with the brand tone. Soft gradient tinted with the sky tone. Soft gradient tinted with the success tone. Soft gradient tinted with the warning tone. Soft gradient tinted with the danger tone. Soft gradient tinted with the violet tone. Soft gradient tinted with the rose tone. Soft gradient tinted with the neutral tone. dark · vividVivid gradient, readable text. Vivid gradient, readable text. Vivid gradient, readable text. Vivid gradient, readable text. Vivid gradient, readable text. Vivid gradient, readable text. Vivid gradient, readable text. Vivid gradient, readable text.
brand
sky
success
warning
danger
violet
rose
neutral
brand
sky
success
warning
danger
violet
rose
neutral
light · softSoft gradient tinted with the brand tone. Soft gradient tinted with the sky tone. Soft gradient tinted with the success tone. Soft gradient tinted with the warning tone. Soft gradient tinted with the danger tone. Soft gradient tinted with the violet tone. Soft gradient tinted with the rose tone. Soft gradient tinted with the neutral tone. light · vividVivid gradient, readable text. Vivid gradient, readable text. Vivid gradient, readable text. Vivid gradient, readable text. Vivid gradient, readable text. Vivid gradient, readable text. Vivid gradient, readable text. Vivid gradient, readable text.