


Panduan Langkah demi Langkah untuk Mod Terang/Gelap di Blog Beruang
Oct 28, 2024 pm 10:29 PMBaru-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:
- Bertukar antara mod terang dan gelap apabila pengguna mengklik ikon.
- Menyimpan pilihan tema pengguna dalam localStorage untuk memuatkannya secara automatik pada lawatan akan datang.
JavaScript dibahagikan kepada dua bahagian: kod dalam
Untuk menambah kod pada
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);
Kod ini menunjukkan ikon yang betul berdasarkan pembolehubah Skim pilihan yang telah ditetapkan sebelum ini dalam
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!

Alat AI Hot

Undress AI Tool
Gambar buka pakaian secara percuma

Undresser.AI Undress
Apl berkuasa AI untuk mencipta foto bogel yang realistik

AI Clothes Remover
Alat AI dalam talian untuk mengeluarkan pakaian daripada foto.

Clothoff.io
Penyingkiran pakaian AI

Video Face Swap
Tukar muka dalam mana-mana video dengan mudah menggunakan alat tukar muka AI percuma kami!

Artikel Panas

Alat panas

Notepad++7.3.1
Editor kod yang mudah digunakan dan percuma

SublimeText3 versi Cina
Versi Cina, sangat mudah digunakan

Hantar Studio 13.0.1
Persekitaran pembangunan bersepadu PHP yang berkuasa

Dreamweaver CS6
Alat pembangunan web visual

SublimeText3 versi Mac
Perisian penyuntingan kod peringkat Tuhan (SublimeText3)

Topik panas

CSS Blok halaman yang diberikan kerana pelayar melihat CSS dalam talian dan luaran sebagai sumber utama secara lalai, terutamanya dengan stylesheet yang diimport, header sejumlah besar CSS sebaris, dan gaya pertanyaan media yang tidak dapat dioptimumkan. 1. Ekstrak CSS kritikal dan membenamkannya ke HTML; 2. Kelewatan memuatkan CSS bukan kritikal melalui JavaScript; 3. Gunakan atribut media untuk mengoptimumkan pemuatan seperti gaya cetak; 4. Memampatkan dan menggabungkan CSS untuk mengurangkan permintaan. Adalah disyorkan untuk menggunakan alat untuk mengekstrak CSS utama, menggabungkan REL = "Preload" pemuatan asynchronous, dan menggunakan media yang ditangguhkan dengan munasabah untuk mengelakkan pemisahan yang berlebihan dan kawalan skrip kompleks.

Thebestapproachforcssdependonstantheproject'ssspecificneeds.forlargerprojects, externalcssisbetterduetomaintainabilityability;

Tidak, cssdoesnothavetobeinlowercase.however, menggunakanLowerCaseisRecommendorfendfor: 1) Consistencyandreadability, 2) Mengelakkaningerrorsinrelatedtechnologies, 3) potensiformanceBenefits, dan4) peningkatan yang lebih baik.

Cssismostlycase-insensitive, buturlsandfontfamilynamesarecase-sensitif.1) propertiesandvalueslikecolor: merah; arenotcase-sensitif.2) urlsmustmatchtheserver'scase, mis.,

AutoPrefixer adalah alat yang secara automatik menambah awalan vendor ke atribut CSS berdasarkan skop penyemak imbas sasaran. 1. Ia menyelesaikan masalah mengekalkan awalan secara manual dengan kesilapan; 2. Bekerja melalui borang pemalam postcss, menghuraikan CSS, menganalisis atribut yang perlu diawali, dan menjana kod mengikut konfigurasi; 3. Langkah-langkah penggunaan termasuk memasang pemalam, menetapkan senarai pelayar, dan membolehkan mereka dalam proses membina; 4. Nota termasuk tidak menambah awalan secara manual, menyimpan kemas kini konfigurasi, awalan tidak semua atribut, dan disyorkan untuk menggunakannya dengan preprocessor.

Csscounterscanautomaticallynumbersectionsandlists.1) useCounter-resettoinitialize, counter-incrementToinCrease, andCounter () orcounters () todisplayvalues.2) CombinWithjavascriptfordynamicContentToenSureAccurateupdates.

Dalam CSS, nama pemilih dan atribut adalah sensitif kes, manakala nilai, warna yang dinamakan, URL, dan atribut tersuai adalah sensitif kes. 1. Nama pemilih dan atribut adalah kes-tidak sensitif, seperti warna latar belakang dan warna latar belakang adalah sama. 2. Warna heksadesimal dalam nilai adalah sensitif kes, tetapi warna bernama adalah sensitif kes, seperti merah dan merah tidak sah. 3. URL adalah sensitif kes dan boleh menyebabkan masalah pemuatan fail. 4. Sifat tersuai (pembolehubah) adalah sensitif kes, dan anda perlu memberi perhatian kepada konsistensi kes apabila menggunakannya.

Cssselectorsandpropertynamesarecase-insensitive, whilevaluescanbecase-sensitivedependingoncontext.1) selectorslike'div'and'div'areequivalent.2) propertiesuchas'background-color'and'and'aretaretreatheatthlegase.3)
