Scope Theming

vel-src: tokens.css

Apply data-vel-theme to any element to cascade a complete color universe to its subtree. Multiple themes can live side-by-side on the same page.

Class	Properties
data-vel-theme="ocean"	--vel-dna-hue: 205 (blue-ocean)
data-vel-theme="forest"	--vel-dna-hue: 145 (green-forest)
data-vel-theme="rose"	--vel-dna-hue: 10 (pink-rose)
data-vel-theme="amber"	--vel-dna-hue: 65 (warm-amber)
data-vel-theme="violet"	--vel-dna-hue: 280 (purple-violet)
data-vel-theme="cyan"	--vel-dna-hue: 195 (cyan)
data-vel-theme="slate"	--vel-dna-hue: 220 (neutral-slate)
data-vel-theme="crimson"	--vel-dna-hue: 350 (red-crimson)

Examples

Four themes side by side — same components, different data-vel-theme

Ocean

Forest

Rose

Amber

example.html

<div class="vel-grid vel-gap-3" style="grid-template-columns:repeat(2,1fr)">
  <div data-vel-theme="ocean" class="vel-card vel-p-4">
    <div class="vel-text-xs vel-font-bold vel-text-primary vel-mb-2" style="text-transform:uppercase;letter-spacing:0.1em">Ocean</div>
    <button class="vel-btn vel-btn-primary vel-btn-sm">Primary</button>
  </div>
  <div data-vel-theme="forest" class="vel-card vel-p-4">
    <div class="vel-text-xs vel-font-bold vel-text-primary vel-mb-2" style="text-transform:uppercase;letter-spacing:0.1em">Forest</div>
    <button class="vel-btn vel-btn-primary vel-btn-sm">Primary</button>
  </div>
  <div data-vel-theme="rose" class="vel-card vel-p-4">
    <div class="vel-text-xs vel-font-bold vel-text-primary vel-mb-2" style="text-transform:uppercase;letter-spacing:0.1em">Rose</div>
    <button class="vel-btn vel-btn-primary vel-btn-sm">Primary</button>
  </div>
  <div data-vel-theme="amber" class="vel-card vel-p-4">
    <div class="vel-text-xs vel-font-bold vel-text-primary vel-mb-2" style="text-transform:uppercase;letter-spacing:0.1em">Amber</div>
    <button class="vel-btn vel-btn-primary vel-btn-sm">Primary</button>
  </div>
</div>

Nested scope — child overrides parent theme

Ocean theme (parent)

Amber theme (nested)

example.html

<div data-vel-theme="ocean" class="vel-card vel-p-5">
  <div class="vel-text-sm vel-font-bold vel-text-primary vel-mb-3">Ocean theme (parent)</div>
  <button class="vel-btn vel-btn-primary vel-btn-sm vel-mb-4">Ocean button</button>
  <div data-vel-theme="amber" class="vel-card vel-p-4" style="border:1px solid #1e2d45">
    <div class="vel-text-xs vel-font-bold vel-text-primary vel-mb-2">Amber theme (nested)</div>
    <button class="vel-btn vel-btn-primary vel-btn-sm">Amber button</button>
  </div>
</div>