Panduan Langkah demi Langkah untuk Mod Terang/Gelap di Blog Beruang

Baru-baru ini saya telah melaksanakan suis mod terang/gelap pada blog Bear saya menggunakan ciri media skema warna pilihan yang digabungkan dengan fungsi warna terang-gelap().

Begini cara saya melakukannya.

Langkah 1: Menyediakan CSS

CSS telah memperoleh beberapa ciri baharu yang hebat sejak beberapa tahun lalu, termasuk fungsi warna terang-gelap(). Fungsi ini membolehkan anda menentukan dua warna untuk mana-mana elemen—satu untuk mod terang dan satu untuk mod gelap.

Sebagai contoh, jika anda mahu latar belakang anda berwarna putih dalam mod terang dan hitam dalam mod gelap, berikut ialah cara anda menyediakannya:

body {
  background-color: light-dark(#fff, #000);
}

Saya menggunakan pendekatan ini pada semua elemen dengan keperluan warna yang berbeza dalam mod terang dan gelap.

Langkah 2: Menambah HTML

Untuk togol tema, saya menggunakan ikon tunggal dan bukannya suis, butang radio atau menu lungsur. Halaman dimuatkan dengan hanya ikon untuk bertukar kepada mod bertentangan yang boleh dilihat—memandangkan tema lalai saya gelap, ikon mod gelap pada mulanya disembunyikan dan ikon untuk bertukar kepada mod cahaya kelihatan.

Acara onclick memanggil fungsi switchMode(), yang mengendalikan togol antara tema terang dan gelap (lebih lanjut mengenainya kemudian). Berikut ialah persediaan HTML:

<a id="preferdark" onclick="switchMode('dark')" style="display: none;">
  <!-- Icon for switching to dark mode. -->
</a>
<a id="preferlight" onclick="switchMode('light')">
  <!-- Icon for switching to light mode. -->
</a>

Langkah 3: Mencipta JavaScript

JavaScript mengendalikan dua tugas utama:

1. Bertukar antara mod terang dan gelap apabila pengguna mengklik ikon.
2. Menyimpan pilihan tema pengguna dalam localStorage untuk memuatkannya secara automatik pada lawatan akan datang.

JavaScript dibahagikan kepada dua bahagian: kod dalam <kepala> untuk menyediakan tema pada pemuatan halaman dan kod dalam <footer> untuk mengemas kini elemen selepas halaman dimuatkan sepenuhnya.

Untuk menambah kod pada <kepala> dan <footer> pada Bear, pergi ke Tetapan > Arahan pengepala dan pengaki.

<kepala> Kod JavaScript

Kod ini mendapatkan semula tema yang disimpan sebelum ini daripada storan setempat, jika tersedia. Jika tidak, ia menyemak sama ada penyemak imbas atau OS pengguna lebih suka tema terang atau gelap. Jika maklumat itu tidak tersedia, ia lalai kepada mod gelap. Kemudian, ia menggunakan mod itu pada elemen :root (iaitu elemen asas):

const storedScheme = localStorage.getItem("color-scheme");
const preferredScheme = storedScheme 
  ? storedScheme 
  : window && 
    window.matchMedia && 
    window.matchMedia('(prefers-color-scheme: light)').matches ? "light" : "dark";

document.querySelector(':root').style.setProperty("color-scheme", preferredScheme);

<footer> Kod JavaScript

Kod ini menunjukkan ikon yang betul berdasarkan pembolehubah Skim pilihan yang telah ditetapkan sebelum ini dalam <kepala>. Fungsi switchMode() mengemas kini paparan ikon, menukar skema warna :root dan menyimpan pilihan baharu dalam storan setempat:

document.querySelector("#preferlight").style.display = preferredScheme === "light" 
  ? "none" 
  : "";
document.querySelector("#preferdark").style.display = preferredScheme === "light" 
  ? "" 
  : "none";

function switchMode(mode) {
  document.getElementById("preferlight").style.display = mode === "light" 
  ? "none" 
  : "";
  document.getElementById("preferdark").style.display = mode === "light" 
  ? "" 
  : "none";
  document.querySelector(':root').style.setProperty("color-scheme", mode);
  localStorage.setItem("color-scheme", mode);
}

Dan itu sahaja—suis mod terang/gelap untuk blog Bear anda!

Atas ialah kandungan terperinci Panduan Langkah demi Langkah untuk Mod Terang/Gelap di Blog Beruang. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!