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!