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="soft">Soft</button>
  </div>
  <div class="demo-field" id="stage">
    <label class="demo-label" for="phone">Phone number</label>
    <input id="phone">
  </div>
  <pre class="css" id="css"></pre>
</div>

import { createPhoneInput } from 'https://devix.pk/cdn/oss/phone-input@1.2.0/index.js';

const THEMES = {
  default: '',
  stripe: `--dxp-accent: #635bff;\n--dxp-radius: 6px;\n--dxp-height: 36px;\n--dxp-border: #d5dbe1;\n--dxp-option-selected: #f0efff;`,
  bootstrap: `--dxp-accent: #0d6efd;\n--dxp-radius: 6px;\n--dxp-height: 38px;\n--dxp-font-size: 16px;\n--dxp-border: #dee2e6;\n--dxp-ring: rgb(13 110 253 / 0.25);`,
  shadcn: `--dxp-accent: #18181b;\n--dxp-radius: 6px;\n--dxp-height: 36px;\n--dxp-border: #e4e4e7;\n--dxp-ring: rgb(24 24 27 / 0.12);\n--dxp-option-selected: #f4f4f5;`,
  soft: `--dxp-accent: #10b981;\n--dxp-radius: 999px;\n--dxp-height: 40px;\n--dxp-panel-radius: 16px;\n--dxp-border: transparent;\n--dxp-bg: color-mix(in srgb, #10b981 8%, transparent);`,
};

const style = document.createElement('style');
document.head.append(style);
createPhoneInput(document.getElementById('phone'), { initialCountry: 'ae' });

const apply = (name) => {
  const vars = THEMES[name];
  style.textContent = vars ? `.dxp, .dxp-panel { ${vars} }` : '';
  document.getElementById('css').textContent = vars ? `.dxp, .dxp-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/phone-input@1.2.0/phone-input.min.css');
.demo-seg { flex-wrap: wrap; }
.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; }