Mod Gelap dan Mod Malam dengan CSS Tailwind dan Pembolehubah CSS

Mod gelap dan mod malam mesti dimiliki untuk tapak web moden. Mereka meningkatkan kebolehaksesan dan memberi pengguna fleksibiliti untuk memilih rupa pilihan mereka. Mari kita mendalami cara anda boleh membina ciri ini menggunakan pembolehubah CSS dan CSS Tailwind.

Mengapa Pembolehubah CSS dan CSS Tailwind Berfungsi Dengan Baik

• Pembolehubah CSS: Permudahkan pengurusan warna untuk tema yang berbeza.
• Kelas Induk: Togol tema dengan menukar kelas induk tunggal.
• Penyatuan JavaScript: Kemas kini tema secara dinamik dengan minimum usaha.

Menyediakan Warna Tema dengan Pembolehubah CSS

Mulakan dengan menentukan warna untuk tema anda. Pembolehubah CSS ini akan berada di dalam kelas induk untuk memudahkan penukaran tema.

/* Light Theme (Default) */
:root {
  --bg-color: #ffffff;
  --text-color: #000000;
}

/* Dark Theme */
.theme-dark {
  --bg-color: #000000;
  --text-color: #ffffff;
}

/* Solarized Theme */
.theme-solarized {
  --bg-color: #002b36;
  --text-color: #839496;
}

Menggunakan Pembolehubah CSS dalam Kelas Tailwind

Tailwind memudahkan penggunaan pembolehubah CSS untuk penggayaan.

<div>



<h2>
  
  
  Adding JavaScript for Dynamic Theme Switching
</h2>

<p>Here’s the JavaScript to handle theme changes dynamically:<br>
</p>

<pre class="brush:php;toolbar:false">const themeSelect = document.getElementById("theme-select");
const rootElement = document.documentElement;

// Listen for dropdown changes
themeSelect.addEventListener("change", (event) => {
  const selectedTheme = event.target.value;

  // Remove all theme classes
  rootElement.classList.remove("theme-light", "theme-dark", "theme-solarized");

  // Add the selected theme class
  rootElement.classList.add(selectedTheme);
});

// Set default theme on load
window.addEventListener("DOMContentLoaded", () => {
  rootElement.classList.add("theme-light");
});

Pertukaran Tema Masa Nyata dalam Tindakan

Apabila pengguna memilih tema daripada menu lungsur, latar belakang dan warna teks berubah serta-merta. Kemas kini dinamik ini menjadikan pengalaman lancar dan interaktif.

Mengapa Pendekatan Ini Hebat

• Skalabiliti: Tambah tema baharu dengan mentakrifkan pembolehubah CSS tambahan.
• Pemisahan Bersih: CSS mengendalikan tema; JavaScript mengurus logik.
• Prestasi: Pembolehubah CSS menjadikan kemas kini lancar dan cekap.

Simpan Keutamaan Tema dengan LocalStorage

Tingkatkan ia dengan menyimpan tema yang dipilih supaya ia berterusan merentas sesi.

// Save the theme
themeSelect.addEventListener("change", (event) => {
  const selectedTheme = event.target.value;
  rootElement.classList.remove("theme-light", "theme-dark", "theme-solarized");
  rootElement.classList.add(selectedTheme);
  localStorage.setItem("theme", selectedTheme);
});

// Load the saved theme
window.addEventListener("DOMContentLoaded", () => {
  const savedTheme = localStorage.getItem("theme") || "theme-light";
  rootElement.classList.add(savedTheme);
});

Petua Tambahan untuk Mod Gelap dan Mod Malam

• Lagi Tema: Tambahkan kontras tinggi atau tema tersuai yang ditentukan pengguna.
• Peralihan: Gunakan peralihan CSS untuk perubahan warna latar belakang dan teks yang lancar.
• Kebolehaksesan: Pastikan penukar tema anda berfungsi dengan baik dengan papan kekunci dan pembaca skrin.

Dengan pembolehubah CSS dan CSS Tailwind, mencipta mod gelap dinamik atau mod malam adalah mudah dan cekap. Cubalah dan lihat bagaimana ia mengubah pengalaman pengguna tapak web anda!

Atas ialah kandungan terperinci Mod Gelap dan Mod Malam dengan CSS Tailwind dan Pembolehubah CSS. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!