Theming

<div class="demo">
  <div class="demo-seg" role="radiogroup" aria-label="Theme" id="themes">
    <button role="radio" aria-checked="true" data-theme="default">Devix</button>
    <button role="radio" aria-checked="false" data-theme="stripe">Stripe-like</button>
    <button role="radio" aria-checked="false" data-theme="bootstrap">Bootstrap</button>
    <button role="radio" aria-checked="false" data-theme="shadcn">shadcn/ui</button>
    <button role="radio" aria-checked="false" data-theme="square">Square</button>
  </div>
  <div id="inline"></div>
  <pre class="css" id="css"></pre>
</div>

import { createDateRangePicker, today, toIso } from 'https://devix.pk/cdn/oss/date-picker@1.2.0/index.js';

const THEMES = {
  default: '',
  stripe: `--dxd-accent: #635bff;\n--dxd-band: #efeeff;\n--dxd-panel-radius: 8px;\n--dxd-cell: 34px;`,
  bootstrap: `--dxd-accent: #0d6efd;\n--dxd-cell-radius: 6px;\n--dxd-panel-radius: 6px;\n--dxd-day-font-size: 14px;\n--dxd-band: rgb(13 110 253 / 0.12);`,
  shadcn: `--dxd-accent: #18181b;\n--dxd-band: #f4f4f5;\n--dxd-cell-radius: 6px;\n--dxd-panel-radius: 8px;\n--dxd-font-weight-strong: 500;`,
  square: `--dxd-accent: #f97316;\n--dxd-cell-radius: 0;\n--dxd-panel-radius: 0;\n--dxd-cell: 30px;\n--dxd-band: rgb(249 115 22 / 0.14);`,
};

const style = document.createElement('style');
document.head.append(style);
const t = today();
createDateRangePicker(null, { inline: document.getElementById('inline'), start: toIso(t + 2), end: toIso(t + 8), presets: false, months: 1, footer: false });

const apply = (name) => {
  const vars = THEMES[name];
  style.textContent = vars ? `.dxd-panel { ${vars} }` : '';
  const dark = document.documentElement.dataset.theme === 'dark';
  style.textContent += name === 'shadcn' && dark ? '.dxd-panel { --dxd-accent: #fafafa; --dxd-accent-text: #18181b; --dxd-band: #27272a; }' : '';
  document.getElementById('css').textContent = vars ? `.dxd-panel {\n  ${vars.replace(/\n/g, '\n  ')}\n}` : '/* the defaults */';
  document.querySelectorAll('[data-theme]').forEach((b) => b.setAttribute('aria-checked', String(b.dataset.theme === name)));
};
document.getElementById('themes').addEventListener('click', (e) => e.target.dataset.theme && apply(e.target.dataset.theme));
apply('default');

@import url('https://devix.pk/cdn/oss/date-picker@1.2.0/date-picker.min.css');
.demo-seg { flex-wrap: wrap; }
#inline .dxd-panel { width: 100%; justify-content: center; }
.css { margin: 0; padding: 10px 12px; border: 1px solid var(--demo-line); border-radius: 8px; background: var(--demo-code); font: 11.5px/1.6 var(--demo-mono); color: var(--demo-muted); white-space: pre-wrap; }