Themes & tokens

Every visual decision in Vizzele is a CSS custom property. Themes are just different values for the same variables, so creating your own is a matter of overriding them.

Switching themes

<html data-theme="dark">   <!-- deep space (default) -->
<html data-theme="light">  <!-- pearl paper -->
<html data-theme="auto">   <!-- follows the OS -->

Make your own

[data-theme='ember'] {
  --vz-bg: #0d0806;
  --vz-text: #fff3ea;
  --vz-accent: #ff7a2f;
  /* the iridescent spectrum */
  --vz-cyan: #ffb238;
  --vz-magenta: #ff3d6e;
  --vz-amber: #ffd84d;
  --vz-acid: #ff9a5a;
  --vz-radius-lg: 12px;
}

Token reference

• Spectrum: --vz-cyan, --vz-magenta, --vz-amber, --vz-acid and the gradients built from them: --vz-iridescent (conic, rotates with --vz-angle), --vz-iridescent-linear, --vz-iridescent-film.
• Surfaces: --vz-bg, --vz-bg-elevated, --vz-bg-sunken, --vz-surface(-hover|-strong), --vz-border(-strong), --vz-glass-tint.
• Text: --vz-text, --vz-text-muted, --vz-text-dim, --vz-accent-text.
• Light: --vz-shadow, --vz-glow, --vz-ambient.
• Motion: --vz-spring-<preset> and --vz-spring-<preset>-duration (CSS linear() easings generated from the real spring physics), --vz-duration-*.
• Shape & depth: --vz-radius-*, --vz-blur-*, --vz-z-*, --vz-grain-opacity.

Springs from CSS

.drawer {
  transition: transform var(--vz-spring-jelly-duration) var(--vz-spring-jelly);
}