cari
Rumahhujung hadapan webtutorial cssTogol 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

Dark Mode Toggle in HTML Web Components

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.

Dark Mode Toggle in HTML Web Components

Dark Mode Toggle in HTML Web Components

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.

Dark Mode Toggle in HTML Web Components

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

Dark Mode Toggle in HTML Web Components

Dark Mode Toggle in HTML Web Components

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!

Kenyataan
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Berapa banyak kekhususan yang ada @rules, seperti @keyframes dan @media?Berapa banyak kekhususan yang ada @rules, seperti @keyframes dan @media?Apr 18, 2025 am 11:34 AM

Saya mendapat soalan ini pada hari yang lain. Pemikiran pertama saya ialah: soalan pelik! Kekhususan adalah mengenai pemilih, dan at-peraturan bukan pemilih, jadi ... tidak relevan?

Bolehkah anda bersarang @media dan @support pertanyaan?Bolehkah anda bersarang @media dan @support pertanyaan?Apr 18, 2025 am 11:32 AM

Ya, anda boleh, dan ia tidak begitu penting dalam perintah apa. Preprocessor CSS tidak diperlukan. Ia berfungsi dalam CSS biasa.

Cache Cache PantasCache Cache PantasApr 18, 2025 am 11:23 AM

Anda pasti pasti menetapkan tajuk cache yang jauh pada aset anda seperti CSS dan JavaScript (dan imej dan fon dan apa sahaja yang lain). Yang memberitahu penyemak imbas

Dalam mencari timbunan yang memantau kualiti dan kerumitan CSSDalam mencari timbunan yang memantau kualiti dan kerumitan CSSApr 18, 2025 am 11:22 AM

Ramai pemaju menulis tentang bagaimana untuk mengekalkan asas CSS, namun tidak banyak daripada mereka menulis tentang bagaimana mereka mengukur kualiti asas kod tersebut. Pasti, kita ada

Datalist adalah untuk mencadangkan nilai tanpa menguatkuasakan nilaiDatalist adalah untuk mencadangkan nilai tanpa menguatkuasakan nilaiApr 18, 2025 am 11:08 AM

Pernahkah anda mempunyai bentuk yang perlu menerima sedikit teks yang sewenang -wenangnya? Seperti nama atau apa sahaja. Itu ' s betul -betul apa. Terdapat banyak

Persidangan Depan di ZürichPersidangan Depan di ZürichApr 18, 2025 am 11:03 AM

Saya sangat teruja untuk menuju ke Zürich, Switzerland untuk persidangan depan (suka nama dan url!). Saya tidak pernah ke Switzerland sebelum ini, jadi saya teruja

Membina aplikasi tanpa pelayan penuh dengan pekerja CloudflareMembina aplikasi tanpa pelayan penuh dengan pekerja CloudflareApr 18, 2025 am 10:58 AM

Salah satu perkembangan kegemaran saya dalam pembangunan perisian adalah kedatangan tanpa pelayan. Sebagai pemaju yang mempunyai kecenderungan untuk terjebak dalam butiran

Membuat Laluan Dinamik dalam Aplikasi NUXTMembuat Laluan Dinamik dalam Aplikasi NUXTApr 18, 2025 am 10:53 AM

Dalam siaran ini, kami akan menggunakan demo kedai e -dagang yang saya bina dan digunakan untuk Netlify untuk menunjukkan bagaimana kami boleh membuat laluan dinamik untuk data masuk. Ia adil

See all articles

Alat AI Hot

Undresser.AI Undress

Undresser.AI Undress

Apl berkuasa AI untuk mencipta foto bogel yang realistik

AI Clothes Remover

AI Clothes Remover

Alat AI dalam talian untuk mengeluarkan pakaian daripada foto.

Undress AI Tool

Undress AI Tool

Gambar buka pakaian secara percuma

Clothoff.io

Clothoff.io

Penyingkiran pakaian AI

AI Hentai Generator

AI Hentai Generator

Menjana ai hentai secara percuma.

Alat panas

SublimeText3 versi Inggeris

SublimeText3 versi Inggeris

Disyorkan: Versi Win, menyokong gesaan kod!

Dreamweaver Mac版

Dreamweaver Mac版

Alat pembangunan web visual

Hantar Studio 13.0.1

Hantar Studio 13.0.1

Persekitaran pembangunan bersepadu PHP yang berkuasa

SublimeText3 versi Mac

SublimeText3 versi Mac

Perisian penyuntingan kod peringkat Tuhan (SublimeText3)

EditPlus versi Cina retak

EditPlus versi Cina retak

Saiz kecil, penyerlahan sintaks, tidak menyokong fungsi gesaan kod