تم‌ها: روشن، تیره، سیستم و ۶ پالت

<html data-theme="light | dark | system"
      data-palette="lajvard | firuzeh | zomorrod | pesteh | zaferan | narenji | anar | sadaf | banafsh | morakkab"
      data-density="compact | comfortable | touch">

<div ui="grid" style="--bana-grid-min:14rem">
  <section data-theme="light" data-palette="firuzeh" ui="card"><header><h4>روشن · فیروزه</h4></header><p>کارت داخل ناحیه روشن</p><footer><button ui="primary">اقدام</button></footer></section>
  <section data-theme="dark" data-palette="zaferan" ui="card"><header><h4>تیره · زعفران</h4></header><p>کارت داخل ناحیه تیره</p><footer><button ui="primary">اقدام</button></footer></section>
  <section data-theme="dark" data-palette="pesteh" ui="card"><header><h4>تیره · پسته</h4></header><p>هر ناحیه تم خودش را دارد</p><footer><button ui="primary">اقدام</button></footer></section>
</div>

Bana.theme.setMode("dark");          // light | dark | system
Bana.theme.setPalette("firuzeh");
Bana.theme.setDensity("compact");
Bana.theme.get();                    // { mode, palette, density, resolved }

document.addEventListener("bana:theme-change", (e) => console.log(e.detail));

[data-palette="mint"] {
  --bana-brand-50:  oklch(0.975 0.015 170);
  --bana-brand-100: oklch(0.945 0.03 170);
  --bana-brand-200: oklch(0.895 0.06 170);
  --bana-brand-300: oklch(0.815 0.1 170);
  --bana-brand-400: oklch(0.715 0.13 170);
  --bana-brand-500: oklch(0.615 0.14 170);
  --bana-brand-600: oklch(0.52 0.13 170);   /* accent در حالت روشن */
  --bana-brand-700: oklch(0.43 0.11 170);
  --bana-brand-800: oklch(0.33 0.09 170);
  --bana-brand-900: oklch(0.24 0.06 170);
  --bana-brand-950: oklch(0.17 0.04 170);
}