Theme Switcher Ikon

Denna hjälpfunktion för Theme Switcher ändrar Theme Switcher-ikonen i navigeringsfältet till den som har klickats på i rullgardinsmenyn. Det fungerar med vilken SVG-ikon som helst. Om du inte använder svg-ikoner måste du ändra skriptet för att hantera din typ av ikoner. Det ändrar också alla tabeller på sidan till att vara mörka om mörkt läge väljs

Theme Switcher

Släpp Theme Switcher-komponenten i din navbar eller använd den flytande Tema Switcher från onlinebiblioteket om du inte har en navbar

Javascript

Lägg till detta javascript-fragment till en javascript-fil i din design

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();
});