Thema Switcher Icoon

Deze helperfunctie voor de Theme Switcher verandert het Theme Switcher-pictogram in de navigatiebalk in het pictogram waarop is geklikt in het vervolgkeuzemenu. Het werkt met elk SVG-pictogram. Als u geen svg-pictogrammen gebruikt, moet u het script aanpassen om uw type pictogrammen te verwerken. Het verandert ook alle tabellen op de pagina om donker te zijn als de donkere modus is gekozen

Theme Switcher

Zet de Theme Switcher-component neer in uw navigatiebalk of gebruik de zwevende Theme Switcher uit de online bibliotheek als u geen navigatiebalk heeft

Javascript

Voeg dit javascript-fragment toe aan een javascript-bestand in je ontwerp

class ThemeChecker {
  constructor() {
    this.theme = localStorage.getItem('theme') || 'auto';
    this.togglers = document.querySelectorAll('[data-bs-theme-value]');
    this.tables = document.querySelectorAll('.table');
    this.init();
  }

  toggleIcon(themeIcon) {
    if (themeIcon) {
      document.querySelectorAll('.theme-switcher').forEach((switcher) => {
        const bssThemeIcon = switcher.querySelector('svg');
        bssThemeIcon.innerHTML = '';
        bssThemeIcon.appendChild(themeIcon.cloneNode(true));
      });
    }
  }

  updateTableClasses() {
    this.tables.forEach((table) => {
      document.documentElement.dataset.bsTheme === 'dark' ? table.classList.add('table-dark') : table.classList.remove('table-dark');
    });
  }

  init() {
    const themeObserver = new MutationObserver(() => this.updateTableClasses());
    themeObserver.observe(document.documentElement, { attributeFilter: ['data-bs-theme'] });
    this.updateTableClasses();
    const thisIcon = document.querySelector(`[data-bs-theme-value="${this.theme}"] svg`);
    this.toggleIcon(thisIcon);
    this.togglers.forEach((toggle) => {
      toggle.addEventListener('click', (e) => {
        e.preventDefault();
        const icon = toggle.querySelector('svg');
        this.toggleIcon(icon);
      });
    });
  }
}

document.addEventListener('DOMContentLoaded', () => {
  new ThemeChecker();
});