Theming

<div class="demo demo--wide">
  <div class="demo-seg" id="themes">
    <button type="button" data-theme="default" class="is-active">Default</button>
    <button type="button" data-theme="rich">Rich colours</button>
    <button type="button" data-theme="compact">Compact</button>
    <button type="button" data-theme="square">Square &amp; bold</button>
  </div>
  <div class="demo-row">
    <button class="demo-btn" data-toast="success">Success</button>
    <button class="demo-btn" data-toast="error">Error</button>
    <button class="demo-btn" data-toast="info">Info</button>
  </div>
  <pre class="demo-out" id="css"></pre>
</div>

import { toast, configure } from 'https://devix.pk/cdn/oss/toast@1.0.0/index.js';

configure({ position: 'bottom-center' });

const SNIPPETS = {
  default: '/* the defaults */',
  rich: ".dxt .dxt-toast[data-type='success'] {\n  background: #f0fdf4;\n  border-color: #bbf7d0;\n  color: #14532d;\n}",
  compact: '.dxt {\n  --dxt-width: 280px;\n  --dxt-padding: 8px 10px;\n  --dxt-font-size: 12.5px;\n}',
  square: '.dxt {\n  --dxt-radius: 0;\n  --dxt-title-weight: 700;\n  --dxt-shadow: 6px 6px 0 rgb(17 17 28 / .18);\n}',
};

const css = document.getElementById('css');
let look = 'default';

const show = (type) => {
  const messages = { success: 'Invoice sent', error: 'Could not send', info: 'A new version is available' };
  toast[type](messages[type], { description: 'One widget, four looks.' });
  // The region is made on the first toast, so tag it once it exists.
  requestAnimationFrame(() => document.querySelector('.dxt')?.setAttribute('data-look', look));
};

document.getElementById('themes').addEventListener('click', (event) => {
  const button = event.target.closest('button[data-theme]');
  if (!button) return;
  for (const other of document.querySelectorAll('#themes button')) other.classList.toggle('is-active', other === button);
  look = button.dataset.theme;
  css.textContent = SNIPPETS[look];
  document.querySelector('.dxt')?.setAttribute('data-look', look);
  show('success');
});

document.querySelectorAll('[data-toast]').forEach((button) => button.addEventListener('click', () => show(button.dataset.toast)));
css.textContent = SNIPPETS.default;

@import url('https://devix.pk/cdn/oss/toast@1.0.0/toast.min.css');

/* Each look is a handful of variables on the region. */
.dxt[data-look='rich'] .dxt-toast[data-type='success'] { background: #f0fdf4; border-color: #bbf7d0; color: #14532d; }
.dxt[data-look='rich'] .dxt-toast[data-type='error'] { background: #fef2f2; border-color: #fecaca; color: #7f1d1d; }
.dxt[data-look='rich'] .dxt-toast[data-type='info'] { background: #eff6ff; border-color: #bfdbfe; color: #1e3a8a; }
.dxt[data-look='compact'] { --dxt-width: 280px; --dxt-padding: 8px 10px; --dxt-font-size: 12.5px; --dxt-radius: 7px; --dxt-collapse: 10px; }
.dxt[data-look='square'] { --dxt-radius: 0; --dxt-title-weight: 700; --dxt-shadow: 6px 6px 0 rgb(17 17 28 / .18); --dxt-border: #18181b; }