webawesome/docs/assets/scripts/preset-theme-picker.js

import { domChange, nextFrame, ThemeAspect } from './theme-picker.js';

const presetTheme = new ThemeAspect({
  defaultValue: 'default',
  key: 'presetTheme',
  picker: 'wa-select.preset-theme-selector',

  applyChange() {
    const oldStylesheets = [...document.querySelectorAll('#theme-stylesheet')];
    const oldStylesheet = oldStylesheets.pop();

    if (oldStylesheets.length > 0) {
      // Remove all but the last one
      for (let stylesheet of oldStylesheets) {
        stylesheet.remove();
      }
    }

    const href = `/dist/styles/themes/${this.value}.css`;

    if (!oldStylesheet || oldStylesheet.getAttribute('href') !== href) {
      const newStylesheet = document.createElement('link');
      Object.assign(newStylesheet, { href, id: 'theme-stylesheet', rel: 'preload', as: 'style' });
      oldStylesheet.after(newStylesheet);

      newStylesheet.addEventListener(
        'load',
        e => {
          domChange(
            async instant => {
              // Swap stylesheets
              newStylesheet.rel = 'stylesheet';

              if (instant) {
                // If no VT, delay by 1 frame to make it smoother
                await nextFrame();
              }

              oldStylesheet.remove();
            },
            { behavior: 'smooth' },
          );
        },
        { once: true },
      );
    }
  },
});

/**
 * Without this, there's a flash of the incorrect preset theme.
 */
function updateSelectionBeforeTurboLoad(e) {
  const newElement = e.detail.newBody || e.detail.newFrame || e.detail.newStream;
  if (newElement) {
    presetTheme.syncUI(newElement);
  }
}

['turbo:before-render', 'turbo:before-stream-render', 'turbo:before-frame-render'].forEach(eventName => {
  document.addEventListener(eventName, updateSelectionBeforeTurboLoad);
});

window.presetTheme = presetTheme;