Umschalten des dunklen Modus in HTML-Webkomponenten

Als ich meinen digitalen Garten entwarf, wusste ich, dass ich einen niedlichen Dunkelmodus-Schalter haben wollte. Nachdem ich meine SVG-Datei gezeichnet hatte, begann ich mit dem Erstellen einer Webkomponente, die dieselben Funktionen hatte wie mein Dunkelmodus-Schalter in React. Dazu gehört alles, was ich bei der Prüfung der Barrierefreiheit meiner Website gelernt habe.

Zusätzlich zum Ändern des Themas muss das Umschalten die vom Benutzer bevorzugte Farbschemaauswahl berücksichtigen und die Präferenz des Benutzers über alle Neuladevorgänge hinweg beibehalten. Für die Barrierefreiheit muss die Ansage des Bildschirmlesers des Schalters sinnvoll sein (z. B. „Dunkelmodus-Schalter ein“). Da ich anstelle eines Kontrollkästchens mit Text eine SVG-Datei anzeigen möchte, muss ich den Fokus- und Hover-Stil sowie eine Beschriftung hinzufügen, die beim Hover angezeigt wird.

Webkomponente umschalten

Zuerst benötige ich eine Toggle-Klasse, die ein HTML-Element erstellt. Mithilfe der API für benutzerdefinierte Elemente definiere ich mit dieser Klasse.

Mit dem Konstruktor der Klasse habe ich das innerHTML von zu einem mit einem und SVG als Kinder. Die Beschriftung verfügt über ein Titelattribut, das unserem Schalter eine sichtbare Beschriftung „Dunkelmodus umschalten“ verleiht, wenn ein Benutzer mit der Maus darüber oder über die Schaltfläche fährt. Da das Kontrollkästchen ein untergeordnetes Kontrollkästchen von ist, ist die Interaktion mit ist dasselbe wie die Interaktion mit dem und umgekehrt. Das Title-Attribut stellt außerdem sicher, dass Screenreader „Dark Mode Toggle“ ankündigen, wenn ein Benutzer mit dieser Komponente interagiert.

Sobald der HTML-Code vorhanden ist, füge ich der Klasse eine connectedCallback-Funktion hinzu. Dieser Teil der API für benutzerdefinierte Elemente definiert Funktionen zur Verwendung innerhalb der Komponente und führt Code aus, wenn die Komponente in das DOM eingefügt wird.

// /components/toggle.js

class Toggle extends HTMLElement {
  constructor() {
    super();
    this.innerHTML = `
      <label title="dark mode toggle">
        <input type="checkbox" id="theme-toggle" class="theme-switch" />
        <svg id="daisy">{SVG code removed for brevity}</svg>
      </label>
    `
    this.setAttribute("class", "toggle-component");
  }

  connectedCallback() {
    function switchTheme(e) {
      if (e.target.checked) {
        setTheme('dark');
        return;
      }

      setTheme('light');   
    };

    function setTheme(themeName) {
      localStorage.setItem('theme', themeName);
      document.documentElement.setAttribute('data-theme', themeName);
    };

    function setCheckBox(toggleSwitch, theme) {
      toggleSwitch.checked = theme === 'dark' ? true : false;
    }

    function keepTheme() {
      const toggleSwitch = document.querySelector('#theme-toggle');
      toggleSwitch.addEventListener('change', switchTheme, false);
      const theme = localStorage.getItem('theme');
      if (theme) {
        setTheme(theme);
        setCheckBox(toggleSwitch, theme);
        return;
      };

      const prefersLightTheme = window.matchMedia('(prefers-color-scheme: light)');
      if (prefersLightTheme.matches) {
        setTheme('light');
        return;
      };

      setTheme('dark');
      setCheckBox(toggleSwitch, 'dark');
    };

    document.addEventListener("DOMContentLoaded", keepTheme);    
  }
}

customElements.define("toggle-component", Toggle);

Weil Wird in das DOM eingefügt, bevor die Seite geladen wird, fügt der einzige Code, der sofort ausgeführt wird, einen Ereignis-Listener hinzu. Der Event-Listener ruft keepTheme auf, sobald die Seite geladen wurde. Zunächst fügt keepTheme einen Ereignis-Listener zum hinzu. das switchTheme aufruft, wenn ein Benutzer damit interagiert. switchTheme übergibt „dark“ an setTheme, wenn das Kontrollkästchen aktiviert ist, und „light“, wenn dies nicht der Fall ist. Die an setTheme übergebene Zeichenfolge wird als CSS-Design festgelegt und in localStorage gespeichert, das auch nach erneuten Ladevorgängen bestehen bleibt.

Der Rest von keepTheme widmet sich der Auswahl des richtigen Themes beim Laden. Zunächst prüft es localStorage, um zu sehen, ob die Präferenz des Benutzers bereits festgelegt ist. Als nächstes wird geprüft, ob Prefers-Color-Schema auf „Light“ eingestellt ist. Schließlich ist der Dunkelmodus standardmäßig aktiviert. Für den dunklen und hellen Modus rufe ich setTheme auf. Für den Dunkelmodus rufe ich auch setCheckbox auf. Das Kontrollkästchen wird in einem nicht aktivierten Zustand aktiviert. Ein Screenreader gibt den „Dunkelmodus“ bekannt und gibt an, ob das Kontrollkästchen aktiviert ist. Um eine Ankündigung wie „Dunkelmodus umschalten aktiviert“ oder „Dunkelmodus umschalten ein“ zu erhalten, muss ich das Kontrollkästchen programmgesteuert aktivieren, wenn ich das Design beim Laden auf „Dunkel“ setze.

Styling umschalten

Ich habe mich für ein recht einfaches Design entschieden, damit ich meinen SVG-Code direkt in die Webkomponente einfügen und die Füllfarbe programmgesteuert ändern kann. Auf diese Weise passt die Hintergrundfarbe des Gänseblümchens immer zum Thema. Als nächstes verwende ich opacity: 0; um das Kontrollkästchen auszublenden und in der Mitte des Bildes zu positionieren. Zum Schluss füge ich die Hover- und Focus-Stile hinzu.

// /components/toggle.js

class Toggle extends HTMLElement {
  constructor() {
    super();
    this.innerHTML = `
      <label title="dark mode toggle">
        <input type="checkbox" id="theme-toggle" class="theme-switch" />
        <svg id="daisy">{SVG code removed for brevity}</svg>
      </label>
    `
    this.setAttribute("class", "toggle-component");
  }

  connectedCallback() {
    function switchTheme(e) {
      if (e.target.checked) {
        setTheme('dark');
        return;
      }

      setTheme('light');   
    };

    function setTheme(themeName) {
      localStorage.setItem('theme', themeName);
      document.documentElement.setAttribute('data-theme', themeName);
    };

    function setCheckBox(toggleSwitch, theme) {
      toggleSwitch.checked = theme === 'dark' ? true : false;
    }

    function keepTheme() {
      const toggleSwitch = document.querySelector('#theme-toggle');
      toggleSwitch.addEventListener('change', switchTheme, false);
      const theme = localStorage.getItem('theme');
      if (theme) {
        setTheme(theme);
        setCheckBox(toggleSwitch, theme);
        return;
      };

      const prefersLightTheme = window.matchMedia('(prefers-color-scheme: light)');
      if (prefersLightTheme.matches) {
        setTheme('light');
        return;
      };

      setTheme('dark');
      setCheckBox(toggleSwitch, 'dark');
    };

    document.addEventListener("DOMContentLoaded", keepTheme);    
  }
}

customElements.define("toggle-component", Toggle);

Verwenden der Toggle-Webkomponente

Alles, was ich tun muss, ist, mein Stylesheet und mein Komponentenskript in die -Datei zu importieren. einer HTML-Seite. Dann kann ich irgendwo auf der Seite.

/* /styles/styles.css */

[data-theme="light"] {
  --toggle-background: #242D54;
}

[data-theme="dark"] {
  --toggle-background: #282e53;
}

#daisy path {
  fill: var(--toggle-background);
}

.theme-switch {
  position: relative;
  bottom: 30px;
  left: 55px;
  width: 1em;
  height: 1em;
  opacity: 0;
}

.theme-switch:focus + #daisy path,
.theme-switch:hover + #daisy path {
  fill: white;
}

.theme-switch:focus + #daisy {
  outline: 3px solid white;
  outline-offset: 5px;
}

Abschluss

Es hat mir Spaß gemacht, dass meine Dunkelmodus-Umschaltung in einer Webkomponente genauso gut funktioniert wie in React. Sie können dies live in meinem digitalen Garten und den vollständigen Code im GitHub-Repo sehen.

Das obige ist der detaillierte Inhalt vonUmschalten des dunklen Modus in HTML-Webkomponenten. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!