Bagaimanakah saya boleh mencipta mod gelap yang boleh disesuaikan untuk tapak web saya menggunakan Pembolehubah CSS dan JavaScript?

Memperibadikan Mod Gelap dengan Pembolehubah CSS dan JavaScript

Melaksanakan mod gelap untuk apl atau tapak web anda adalah penting dalam menyediakan pengalaman pengguna yang lancar. Peraturan media CSS asli menawarkan pilihan untuk penyemak imbas mengesan mod gelap yang ditetapkan sistem, tetapi pengguna mungkin lebih suka tema lain untuk tapak atau penyemak imbas tertentu yang belum menyokongnya lagi, seperti Microsoft Edge.

Untuk menangani ini, kita boleh menggunakan pembolehubah CSS dan JavaScript untuk mengurus tetapan tema.

Penyesuaian CSS dengan Pembolehubah dan Tema

Tentukan pembolehubah CSS pada peringkat akar atau lalai, dan nyatakan tema gelap:

<code class="css">:root {
    --font-color: #000;
    ...
    --bg-color: rgb(243,243,243);
}

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

Panggil pembolehubah jika perlu untuk melaraskan gaya secara dinamik.

JavaScript untuk Pengesanan dan Togol Tema

Dalam pengepala bahagian HTML anda, tambah JavaScript untuk mengesan tema pilihan pengguna:

<code class="javascript">function detectColorScheme() {
    var theme = "light";
    ...
}
detectColorScheme();</code>

Gunakan JavaScript untuk menogol antara tema terang dan gelap:

<code class="javascript">const toggleSwitch = document.querySelector('#theme-switch input[type="checkbox"]');

function switchTheme(e) {
    ...
}

toggleSwitch.addEventListener('change', switchTheme, false);</code>

HTML untuk Togol Tema

Buat kotak semak HTML untuk penukaran tema yang dikawal pengguna:

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

Dengan pendekatan ini, anda boleh mengesan tema pengguna secara automatik, membenarkan mereka mengatasi tema tersebut dan menyediakan tema tersuai pengalaman merentas pelayar dan platform.

Atas ialah kandungan terperinci Bagaimanakah saya boleh mencipta mod gelap yang boleh disesuaikan untuk tapak web saya menggunakan Pembolehubah CSS dan JavaScript?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!