Bagaimana untuk Mengatasi Tetapan Skim Warna Asli untuk Pengalaman Pengguna yang Lebih Baik?

Mengatasi Tetapan Skim Warna Asli

Melaksanakan mod gelap menjadi penting dengan penggunaan meluas merentas pelbagai sistem pengendalian. Walaupun sokongan penyemak imbas asli wujud melalui peraturan media CSS @media (prefers-color-scheme: dark), ia mungkin tidak menangani sepenuhnya pilihan pengguna atau memenuhi pelayar yang tidak disokong seperti Microsoft Edge.

Tetapan Sistem Menyahganding daripada Tema Laman Web

Untuk menyediakan kawalan pengguna yang optimum, adalah penting untuk membenarkan pengguna mengatasi tetapan skema warna sistem. Ini memastikan mereka boleh memilih tema yang mereka suka untuk tapak web tertentu. Untuk mencapai matlamat ini, gabungan pembolehubah CSS dan JavaScript digunakan.

Konfigurasi CSS

Pembolehubah CSS mentakrifkan parameter tema:

<code class="css">:root {
  --font-color: #000;
  --link-color: #1C75B9;
  --link-white-color: #fff;
  --bg-color: rgb(243,243,243);
}

[data-theme="dark"] {
  --font-color: #c1bfbd;
  --link-color: #0a86da;
  --link-white-color: #c1bfbd;
  --bg-color: #333;
}</code>

Pembolehubah digunakan di seluruh lembaran gaya untuk memastikan fleksibiliti:

<code class="css">body {
  color: #000;
  color: var(--font-color);
  background: rgb(243,243,243);
  background: var(--bg-color);
}</code>

Pelaksanaan JavaScript

JavaScript memainkan peranan penting dalam mengesan pilihan pengguna dan menogol antara tema:

<code class="javascript">function detectColorScheme() {
  let theme = "light";

  if (localStorage.getItem("theme") == "dark") {
    theme = "dark";
  } else if (window.matchMedia("(prefers-color-scheme: dark)").matches) {
    theme = "dark";
  }

  if (theme == "dark") {
    document.documentElement.setAttribute("data-theme", "dark");
  }
}

detectColorScheme();</code>

Fungsi toggleTheme mengendalikan penukaran tema:

<code class="javascript">function switchTheme(e) {
  if (e.target.checked) {
    localStorage.setItem('theme', 'dark');
    document.documentElement.setAttribute('data-theme', 'dark');
  } else {
    localStorage.setItem('theme', 'light');
    document.documentElement.setAttribute('data-theme', 'light');
  }  
}</code>

JavaScript ini memastikan pengesanan tema automatik dan membenarkan pengguna mengatasinya dengan kotak pilihan:

<code class="html"><label id="theme-switch" class="theme-switch" for="checkbox_theme">
  <input type="checkbox" id="checkbox_theme">
</label></code>

Kesimpulan

Dengan menggabungkan pembolehubah CSS dan JavaScript, kami memperkasakan pengguna dengan keupayaan untuk mengawal skema warna tapak web, tanpa mengira tetapan sistem mereka. Pendekatan ini memastikan pengalaman pengguna yang dipertingkatkan, memenuhi keutamaan individu dan batasan pelbagai penyemak imbas.

Atas ialah kandungan terperinci Bagaimana untuk Mengatasi Tetapan Skim Warna Asli untuk Pengalaman Pengguna yang Lebih Baik?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!