Bina Togol Mod Gelap dalam inutes (Itu Sebenarnya Berfungsi)-tutorial css-php.cn

Build a Dark Mode Toggle in inutes (That Actually Works)

Pernah menghabiskan masa berjam-jam melaksanakan togol mod gelap sahaja untuk membolehkannya memancarkan warna putih membuta tuli pada muat semula halaman? Atau lebih teruk, adakah ia benar-benar mengabaikan pilihan sistem pengguna anda? Ya, saya juga. ?

Inilah perkaranya - mod gelap bukan sekadar ciri bergaya lagi. Dengan lebih ramai orang mengekod pada waktu malam (bersalah seperti yang didakwa) dan kebolehaksesan menjadi semakin penting, mod gelap yang dilaksanakan dengan baik boleh dikatakan mesti ada untuk tapak web atau apl web moden. Tetapi untuk membetulkannya boleh menjadi sangat sukar.

Berita baik? Selepas meraba-raba pelbagai pelaksanaan dan bertarung dengan localStorage, akhirnya saya telah memecahkan kod untuk togol mod gelap yang:

Sebenarnya mengingati pilihan pengguna anda
Tidak memancarkan tema yang salah semasa muat semula
Bermain dengan baik dengan pilihan sistem
Mengambil masa 5 minit untuk dilaksanakan

Dalam siaran ini, saya akan membimbing anda membina togol mod gelap yang sebenarnya anda mahu gunakan. Tiada penyelesaian yang terlalu rumit, tiada kebergantungan yang tidak perlu - hanya bersih, kod berfungsi yang boleh anda laksanakan dengan segera.

Prasyarat (Perkara yang Anda Perlukan)

Mari kita hilangkan bahagian yang membosankan dahulu - tetapi saya berjanji untuk memastikannya pendek!

Anda mungkin sudah mempunyai semua yang anda perlukan, tetapi hanya untuk memastikan kami berada di halaman yang sama:

HTML asas (seperti, anda tahu apa itu )
Beberapa pengetahuan CSS (terutamanya pembolehubah CSS - tetapi saya akan menerangkan semasa kita pergi)
Vanila JavaScript (tiada yang mewah, saya janji)
Editor kod kegemaran anda
Kira-kira 5 minit masa anda (dan mungkin kopi ☕)

Apa yang Kami Bina

Sebelum kita melompat masuk, berikut adalah gambaran ringkas tentang apa yang akan kita hadapi. Tiada perpustakaan UI yang mewah atau persediaan yang rumit - hanya togol mudah dan lancar yang kelihatan seperti ini:

Jangan risau untuk menjadikannya kelihatan seperti ini - bahagian yang penting ialah ia akan berfungsi dengan sempurna. Kami akan fokus pada fungsi dahulu, kemudian anda boleh menggayakannya mengikut kehendak anda.

Bahagian terbaik? Semua yang kami akan bina berfungsi dengan:

Pelayar moden (ya, malah Safari!)
Keutamaan mod gelap sistem
Halaman disegarkan (tiada lagi kilat skrin putih)
Sifar kebergantungan luar

Bersedia untuk mengotorkan tangan anda? Jom mulakan dengan foundation!

Menubuhkan Yayasan

Baiklah, mari kita kotorkan tangan kita! Pertama, kami akan menyediakan struktur asas.

HTML: Pastikan Ia Mudah

Kita akan mulakan dengan beberapa HTML mudah mati. Tidak perlu terlalu memikirkan bahagian ini:

<button>



<h3>
  
  
  The CSS
</h3>

<p>Here's where things get interesting. We'll use CSS variables (aka custom properties) to handle our color scheme. Drop this in your CSS file:<br>
</p>

<pre class="brush:php;toolbar:false">:root {
  --background: #ffffff;
  --text-primary: #222222;
  --toggle-bg: #e4e4e7;
  --toggle-hover: #d4d4d8;
}


[data-theme="dark"] {
  --background: #121212;
  --text-primary: #ffffff;
  --toggle-bg: #3f3f46;
  --toggle-hover: #52525b;
}

body {
  background-color: var(--background);
  color: var(--text-primary);
  transition: background-color 0.3s ease, color 0.3s ease;
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
}

.theme-toggle {
  border: none;
  padding: 0.5rem;
  border-radius: 9999px;
  background-color: var(--toggle-bg);
  cursor: pointer;
  transition: background-color 0.2s ease;
  align-self: flex-start;
  position: absolute;
  right: 20px;
}

.theme-toggle:hover {
  background-color: var(--toggle-hover);
}

.theme-toggle svg {
    transform-origin: center;
    transition: transform 0.3s ease;
}

.theme-toggle:active svg {
    transform: rotate(30deg);
}

h1 {
  display: flex;
}

.sun-icon {
  display: none;
  width: 24px;
  height: 24px;
}

.moon-icon {
  width: 24px;
  height: 24px;
}

[data-theme="dark"] .sun-icon {
  display: block;
}

[data-theme="dark"] .moon-icon {
  display: none;
}

Salin selepas log masuk

Petua Pro: Perhatikan bagaimana kami menggunakan tema data dan bukannya kelas? Ini menjadikannya sangat jelas untuk tujuan atribut itu dan menghalang sebarang kemungkinan konflik penamaan kelas.

Untuk ikon, anda boleh menggunakan sama ada SVG anda sendiri atau ambil beberapa daripada pustaka ikon kegemaran anda. Saya suka menggunakan yang mudah jadi saya memberitahu Chatgpt untuk menghasilkan ini:

<!-- Replace the empty SVGs with these -->
<svg>



<p>At this point, your toggle should look pretty decent, but it won't actually do anything yet. Don't worry though - in the next section, we'll add the JavaScript that makes it all work!</p>

<p><strong>A quick heads-up:</strong> I've kept the styling minimal on purpose. Feel free to spice it up with your own creative touches. Want a sliding animation? Go for it! Prefer a different icon style? Make it yours!</p>

<p>Ready to make this thing actually work? Let's move on to the JavaScript implementation!</p>

<h2>
  
  
  The JavaScript Implementation (Where It All Comes Together!)
</h2>

<p>Alright, this is where we make our toggle actually, you know... toggle. But don't worry - we're keeping it clean and simple.<br>
</p>

<pre class="brush:php;toolbar:false">const themeToggle = document.querySelector('.theme-toggle');


function toggleTheme() {
  const currentTheme = document.documentElement.getAttribute('data-theme');

  const newTheme = currentTheme === 'dark' ? 'light' : 'dark';

  document.documentElement.setAttribute('data-theme', newTheme);

  localStorage.setItem('theme', newTheme);
}

// Listen for clicks on our toggle
themeToggle.addEventListener('click', toggleTheme);


function initializeTheme() {
  const savedTheme = localStorage.getItem('theme');

  if (savedTheme) {
    document.documentElement.setAttribute('data-theme', savedTheme);
  } else {
    const prefersDark = window.matchMedia('(prefers-color-scheme: dark)').matches;

    document.documentElement.setAttribute(
      'data-theme',
      prefersDark ? 'dark' : 'light'
    );

    localStorage.setItem('theme', prefersDark ? 'dark' : 'light');
  }
}

// Run on page load
initializeTheme();

// Listen for system theme change

window.matchMedia('(prefers-color-scheme: dark)')
  .addEventListener('change', (e) => {
    // Only update if user hasn't manually set a preference
    if (!localStorage.getItem('theme')) {
      document.documentElement.setAttribute(
        'data-theme',
        e.matches ? 'dark' : 'light'
      );
    }
  });

Salin selepas log masuk

Mari kita pecahkan apa yang berlaku di sini kerana sebenarnya terdapat beberapa perkara yang menarik berlaku:

Apabila seseorang mengklik togol, kami menyemak tema semasa dan bertukar kepada tema yang bertentangan
Kami menyimpan pilihan mereka dalam localStorage (supaya ia berterusan antara pemuatan halaman)
Apabila halaman pertama kali dimuatkan, kami:
- Semak jika mereka mempunyai pilihan yang disimpan
- Jika tidak, kami menyemak tema sistem mereka
- Gunakan mana-mana tema yang sesuai
Sebagai bonus, kami mendengar perubahan tema sistem (seperti apabila seseorang mendayakan mod gelap pada OS mereka)

Mencegah Kilatan Tema Salah

Berikut ialah masalah biasa: kadangkala pengguna melihat kilat tema yang salah apabila halaman dimuatkan. Sangat menjengkelkan, bukan? Mari kita betulkan dengan menambahkan skrip ini dalam

HTML anda:

<script>
  // Add this to your <head> before any style sheets
  (function() {
    const savedTheme = localStorage.getItem('theme');
    if (savedTheme) {
      document.documentElement.setAttribute('data-theme', savedTheme);
    } else if (window.matchMedia('(prefers-color-scheme: dark)').matches) {
      document.documentElement.setAttribute('data-theme', 'dark');
    }
  })();
</script>

Salin selepas log masuk

Ini berjalan serta-merta sebelum apa-apa lagi dimuatkan, menghalang denyar yang menjengkelkan itu.

Dan... itu sahaja! Anda mempunyai togol mod gelap yang berfungsi:

Mengingat pilihan pengguna
Menghormati tetapan sistem
Tidak memancarkan tema yang salah
Berfungsi dengan lancar dengan peralihan

Ingin menjadikannya lebih baik? Mari beralih kepada beberapa petua berguna yang akan membawa togol anda daripada yang baik kepada yang hebat!

Menjadikannya Lebih Baik (Kerana Butiran Penting!)

Mari kita beralih daripada "berfungsi" kepada "berfungsi dengan cantik" dengan beberapa penambahbaikan penting tetapi sering diabaikan. Ini ialah jenis butiran yang memisahkan pelaksanaan profesional daripada godam pantas.

1. Kebolehcapaian Papan Kekunci

Pertama sekali, mari pastikan semua orang boleh menggunakan togol kami, tidak kira cara mereka berinteraksi dengan peranti mereka:

// Add this to your existing JavaScript
themeToggle.addEventListener('keydown', (e) => {
    // Toggle on Enter or Space
    if (e.key === 'Enter' || e.key === ' ') {
        e.preventDefault();
        toggleTheme();
    }
});

Salin selepas log masuk

2. Melumpuhkan peralihan

Lumpuhkan peralihan apabila pengguna memilih gerakan yang dikurangkan:

@media (prefers-reduced-motion: reduce) {
  body {
    transition: none;
  }
}

Salin selepas log masuk

3. Mengendalikan Perubahan Kandungan

Ini adalah sesuatu yang ramai pembangun terlepas - sesetengah kandungan mungkin perlu diubah berdasarkan tema. Fikirkan tentang imej dengan versi berbeza untuk mod terang/gelap:

// Add this to your toggleTheme function
function updateThemeSpecificContent(theme) {
    // Find all theme-aware images
    const themeImages = document.querySelectorAll('[data-theme-image]');

    themeImages.forEach(img => {
        const lightSrc = img.getAttribute('data-light-src');
        const darkSrc = img.getAttribute('data-dark-src');

        img.src = theme === 'dark' ? darkSrc : lightSrc;
    });
}

Salin selepas log masuk

Gunakan dalam HTML anda seperti ini:

<img data-theme-image data-light-src="/path/to/light-logo.png" data-dark-src="/path/to/dark-logo.png" alt="Bina Togol Mod Gelap dalam inutes (Itu Sebenarnya Berfungsi)">

Salin selepas log masuk

4. Mencegah Ketidakpadanan Tema

Kadangkala tema yang disimpan boleh menjadi tidak segerak dengan perkara yang sebenarnya dipaparkan. Mari tambah pemeriksaan keselamatan:

<button>



<h3>
  
  
  The CSS
</h3>

<p>Here's where things get interesting. We'll use CSS variables (aka custom properties) to handle our color scheme. Drop this in your CSS file:<br>
</p>

<pre class="brush:php;toolbar:false">:root {
  --background: #ffffff;
  --text-primary: #222222;
  --toggle-bg: #e4e4e7;
  --toggle-hover: #d4d4d8;
}


[data-theme="dark"] {
  --background: #121212;
  --text-primary: #ffffff;
  --toggle-bg: #3f3f46;
  --toggle-hover: #52525b;
}

body {
  background-color: var(--background);
  color: var(--text-primary);
  transition: background-color 0.3s ease, color 0.3s ease;
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
}

.theme-toggle {
  border: none;
  padding: 0.5rem;
  border-radius: 9999px;
  background-color: var(--toggle-bg);
  cursor: pointer;
  transition: background-color 0.2s ease;
  align-self: flex-start;
  position: absolute;
  right: 20px;
}

.theme-toggle:hover {
  background-color: var(--toggle-hover);
}

.theme-toggle svg {
    transform-origin: center;
    transition: transform 0.3s ease;
}

.theme-toggle:active svg {
    transform: rotate(30deg);
}

h1 {
  display: flex;
}

.sun-icon {
  display: none;
  width: 24px;
  height: 24px;
}

.moon-icon {
  width: 24px;
  height: 24px;
}

[data-theme="dark"] .sun-icon {
  display: block;
}

[data-theme="dark"] .moon-icon {
  display: none;
}

Salin selepas log masuk

5. Helah Pengoptimuman Prestasi

Berikut ialah helah yang kemas untuk mengelakkan peralihan reka letak semasa memuatkan fon tersuai dalam tema yang berbeza:

<!-- Replace the empty SVGs with these -->
<svg>



<p>At this point, your toggle should look pretty decent, but it won't actually do anything yet. Don't worry though - in the next section, we'll add the JavaScript that makes it all work!</p>

<p><strong>A quick heads-up:</strong> I've kept the styling minimal on purpose. Feel free to spice it up with your own creative touches. Want a sliding animation? Go for it! Prefer a different icon style? Make it yours!</p>

<p>Ready to make this thing actually work? Let's move on to the JavaScript implementation!</p>

<h2>
  
  
  The JavaScript Implementation (Where It All Comes Together!)
</h2>

<p>Alright, this is where we make our toggle actually, you know... toggle. But don't worry - we're keeping it clean and simple.<br>
</p>

<pre class="brush:php;toolbar:false">const themeToggle = document.querySelector('.theme-toggle');


function toggleTheme() {
  const currentTheme = document.documentElement.getAttribute('data-theme');

  const newTheme = currentTheme === 'dark' ? 'light' : 'dark';

  document.documentElement.setAttribute('data-theme', newTheme);

  localStorage.setItem('theme', newTheme);
}

// Listen for clicks on our toggle
themeToggle.addEventListener('click', toggleTheme);


function initializeTheme() {
  const savedTheme = localStorage.getItem('theme');

  if (savedTheme) {
    document.documentElement.setAttribute('data-theme', savedTheme);
  } else {
    const prefersDark = window.matchMedia('(prefers-color-scheme: dark)').matches;

    document.documentElement.setAttribute(
      'data-theme',
      prefersDark ? 'dark' : 'light'
    );

    localStorage.setItem('theme', prefersDark ? 'dark' : 'light');
  }
}

// Run on page load
initializeTheme();

// Listen for system theme change

window.matchMedia('(prefers-color-scheme: dark)')
  .addEventListener('change', (e) => {
    // Only update if user hasn't manually set a preference
    if (!localStorage.getItem('theme')) {
      document.documentElement.setAttribute(
        'data-theme',
        e.matches ? 'dark' : 'light'
      );
    }
  });

Salin selepas log masuk

Senarai Semak Ujian Pantas

Sebelum anda menghantar, pastikan anda menguji senario ini:

✅ Muat semula halaman mengekalkan tema yang betul
✅ Perubahan tema sistem dihormati (jika tiada pilihan manual)
✅ Togol berfungsi dengan kedua-dua tetikus dan papan kekunci
✅ Tiada kilat tema yang salah semasa dimuatkan
✅ Peralihan lancar
✅ Berfungsi dalam semua penyemak imbas utama (ya, malah Safari!)
✅ Kemas kini kandungan khusus tema dengan betul

Isu Biasa yang Perlu Diperhatikan

Kandungan Pihak Ketiga: Sesetengah kandungan terbenam mungkin tidak menghormati tema anda. Tanganinya seperti ini:

<script>
  // Add this to your <head> before any style sheets
  (function() {
    const savedTheme = localStorage.getItem('theme');
    if (savedTheme) {
      document.documentElement.setAttribute('data-theme', savedTheme);
    } else if (window.matchMedia('(prefers-color-scheme: dark)').matches) {
      document.documentElement.setAttribute('data-theme', 'dark');
    }
  })();
</script>

Salin selepas log masuk

Imej dengan Ketelusan: Imej itu boleh kelihatan salah pada latar belakang yang berbeza:

// Add this to your existing JavaScript
themeToggle.addEventListener('keydown', (e) => {
    // Toggle on Enter or Space
    if (e.key === 'Enter' || e.key === ' ') {
        e.preventDefault();
        toggleTheme();
    }
});

Salin selepas log masuk

Itu sahaja! Anda kini mempunyai pelaksanaan mod gelap yang teguh, boleh diakses dan mesra pengguna yang mengendalikan senario berbeza seperti juara.

Kesimpulan

Nah, begitulah! Kami telah membina togol mod gelap yang bukan sahaja berfungsi tetapi berfungsi dengan baik.

Mari kita imbas semula dengan cepat apa yang telah kita capai:

Togol yang benar-benar mengingati pilihan pengguna anda ?
Peralihan lancar antara tema tanpa kilat yang digeruni ⚡
Pengesanan keutamaan sistem yang hanya berfungsi ?
Kebolehaksesan terbina dalam dari mula ♿
Pengoptimuman prestasi untuk memastikan keadaan sentiasa ceria ?‍♂️

Ke mana hendak pergi dari sini?

Jangan ragu untuk mengambil kod ini dan menjadikannya milik anda. Mungkin menambah beberapa animasi mewah, mencuba skema warna yang berbeza, atau menyepadukannya dengan reka bentuk sedia ada anda. Asas yang kami bina cukup kukuh untuk mengendalikan apa sahaja idea kreatif yang anda lemparkan.

Satu Perkara Terakhir...

Mod gelap mungkin kelihatan seperti butiran kecil, tetapi sentuhan kecil inilah yang menunjukkan anda mengambil berat tentang pengalaman pengguna anda. Tambahan pula, ia hanya keren. Siapa yang tidak suka mod gelap yang bagus?

Jika anda mendapati ini membantu, sila kongsikan dengan pembangun lain. Dan jika anda membuat sebarang peningkatan yang menarik, saya ingin mendengar tentangnya!

Mari Kekal Terhubung! ?

Jika anda menikmati panduan ini dan mahukan lebih banyak petua pembangun web, penggodaman dan jenaka ayah sekali-sekala tentang pengaturcaraan, datang lepak dengan saya di X! Saya berkongsi petua pantas, cerapan pengekodan dan penyelesaian dunia sebenar daripada perjalanan pembangun saya.

? Ikuti saya @Peboydcoder

Saya kerap menyiarkan tentang:

Petua & helah pembangunan web
Amalan terbaik frontend
Cerapan UI/UX
Dan ya, lebih banyak siaran penghargaan mod gelap ?

Mampir dan bertanya khabar! Sentiasa teruja untuk berhubung dengan rakan pembangun yang mengambil berat tentang membina pengalaman web yang lebih baik.

Atas ialah kandungan terperinci Bina Togol Mod Gelap dalam inutes (Itu Sebenarnya Berfungsi). Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!