Togol Mod Gelap dalam Komponen Web HTML

Apabila mereka bentuk taman digital saya, saya tahu saya mahukan togol mod gelap yang comel. Setelah saya melukis SVG saya, saya mula membina komponen web yang mempunyai semua fungsi yang sama seperti togol mod gelap saya dalam React. Ini termasuk semua yang saya pelajari semasa kebolehaksesan mengaudit tapak saya.

Selain menukar tema, togol perlu mengambil kira pemilihan skema warna pilihan pengguna dan mengekalkan pilihan pengguna merentas muat semula. Untuk kebolehaksesan, pengumuman pembaca skrin togol mesti masuk akal (mis. "togol mod gelap dihidupkan"). Memandangkan saya ingin memaparkan SVG dan bukannya kotak pilihan dengan teks, saya perlu menambah fokus dan penggayaan tuding serta label yang muncul pada tuding.

Togol Komponen Web

Pertama, saya memerlukan kelas Togol yang mencipta elemen HTML. Menggunakan API Elemen Tersuai, saya akan mentakrifkan menggunakan kelas ini.

Menggunakan pembina kelas, saya menetapkan HTML dalaman bagi kepada dengan dan SVG sebagai kanak-kanak. Label mempunyai atribut tajuk, memberikan togol kami label "togol mod gelap" yang boleh dilihat jika pengguna menuding di atasnya atau . Kerana kotak pilihan adalah anak kepada , berinteraksi dengan adalah perkara yang sama seperti berinteraksi dengan dan sebaliknya. Atribut tajuk juga memastikan pembaca skrin mengumumkan "togol mod gelap" apabila pengguna berinteraksi dengan komponen ini.

Setelah HTML disediakan, saya menambah fungsi ConnectCallback pada kelas. Bahagian API elemen tersuai ini mentakrifkan fungsi untuk digunakan dalam komponen dan melaksanakan kod apabila komponen dimasukkan ke dalam DOM.

// /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);

Kerana dimasukkan ke dalam DOM sebelum halaman dimuatkan, satu-satunya kod yang dilaksanakan serta-merta menambah pendengar acara. Pendengar acara memanggil keepTheme sebaik sahaja halaman dimuatkan. Mula-mula, keepTheme menambah pendengar acara pada yang memanggil switchTheme apabila pengguna berinteraksi dengannya. switchTheme melepasi 'gelap' kepada setTheme jika kotak semak ditandakan dan 'terang' jika tidak. Rentetan yang dihantar ke setTheme ditetapkan sebagai tema CSS dan disimpan dalam localStorage yang akan berterusan merentasi muat semula.

Selebihnya keepTheme dikhaskan untuk memilih tema yang betul semasa dimuatkan. Pertama, ia menyemak localStorage untuk melihat sama ada keutamaan pengguna telah ditetapkan. Seterusnya, ia menyemak sama ada prefers-color-scheme ditetapkan kepada 'cahaya'. Akhirnya, ia lalai kepada mod gelap. Untuk kedua-dua mod gelap dan terang, saya memanggil setTheme. Untuk mod gelap, saya juga memanggil setCheckbox. Kotak semak dipasang dalam keadaan tidak ditandai. Pembaca skrin akan mengumumkan "mod gelap" dan sama ada kotak pilihan ditandakan. Untuk mendapatkan pengumuman seperti "togol mod gelap disemak" atau "togol mod gelap dihidupkan", saya perlu menyemak kotak pilihan secara pemrograman apabila saya menetapkan tema kepada 'gelap' semasa dimuatkan.

Togol Penggayaan

Saya memilih untuk melukis reka bentuk yang agak mudah supaya saya boleh meletakkan kod SVG saya terus dalam komponen web dan menukar warna isian secara pemrograman. Dengan cara ini, warna latar belakang daisy sentiasa sepadan dengan tema. Seterusnya, saya menggunakan kelegapan: 0; untuk menyembunyikan kotak semak dan meletakkannya di tengah-tengah imej. Akhir sekali, saya menambah gaya tuding dan fokus.

// /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);

Menggunakan Komponen Web Togol

Apa yang perlu saya lakukan ialah mengimport helaian gaya dan skrip komponen saya dalam daripada halaman HTML. Kemudian saya boleh memanggil di mana-mana dalam halaman.

/* /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;
}

Kesimpulan

Saya seronok menjadikan togol mod gelap saya berfungsi dengan baik dalam komponen web seperti yang berlaku dalam React. Anda boleh melihat ini secara langsung di taman digital saya dan kod penuh dalam repo GitHub.

Atas ialah kandungan terperinci Togol Mod Gelap dalam Komponen Web HTML. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!