breadcrumb-the-shire/web/js/components/app-contrast-toggle.js

import { requireEl } from '../core/app-dom.js';

const STORAGE_KEY = 'app-contrast';

const setContrast = (contrast) => {
  const root = document.documentElement;
  root.dataset.contrast = contrast === 'high' ? 'high' : 'normal';
};

const setIcon = (button, contrast) => {
  const icon = button.querySelector('i');
  if (!icon) {return;}
  icon.classList.remove('bi-circle-half', 'bi-highlights');
  icon.classList.add(contrast === 'high' ? 'bi-highlights' : 'bi-circle-half');
};

const setPressedState = (button, contrast) => {
  button.setAttribute('aria-pressed', contrast === 'high' ? 'true' : 'false');
};

const initContrastToggle = () => {
  const button = requireEl('[data-contrast-toggle]', { module: 'contrast-toggle' });
  if (!button) {return;}
  const root = document.documentElement;
  const getCurrent = () => (root.dataset.contrast === 'high' ? 'high' : 'normal');
  const current = getCurrent();
  setIcon(button, current);
  setPressedState(button, current);

  button.addEventListener('click', () => {
    const next = getCurrent() === 'high' ? 'normal' : 'high';
    setContrast(next);
    setIcon(button, next);
    setPressedState(button, next);
    try {
      window.localStorage.setItem(STORAGE_KEY, next);
    } catch (e) {
      // ignore storage errors
    }
  });
};

if (document.readyState === 'loading') {
  document.addEventListener('DOMContentLoaded', initContrastToggle);
} else {
  initContrastToggle();
}