Tukar tema Terang dan Gelap dalam baris JavaScript sahaja

Baiklah.. Terdapat sedikit CSS yang terlibat?, tetapi ia lebih mudah daripada jawapan yang saya temui di internet.

Apa yang Saya Cuba Capai?
Saya cuba mencapai dua perkara dengan kaedah ini.

1. Saya perlu membenarkan tapak web memuatkan cara yang disukai pengguna (Bahagian di mana mereka sudah memilih tema mereka dalam OS)
2. Tetapi saya juga mahu membenarkan mereka menogol antara mod gelap dan terang selepas pemuatan.

Jadi kami akan mempunyai tapak web yang akan dimuatkan dalam tema yang diharapkan pengguna dan kemudian membenarkan mereka mengubahnya apabila mereka mahu.

Langkah 1: Buat Butang untuk menogol

<img class="mode" src="./img/moon.svg">

Saya menggunakan imej sebagai butang saya yang mempunyai imej svg bulan. Anda boleh menambah butang atau kotak pilihan anda yang sesuai untuk anda togol antara dua pilihan.

Langkah 2: Letakkan butiran warna anda dalam CSS sebagai sifat tersuai

:root{
    color-scheme: light dark;

    --light-bg: ghostwhite;
    --light-color: darkslategray;
    --light-code: tomato;

    --dark-bg: darkslategray;
    --dark-color: ghostwhite;
    --dark-code: gold;
}

.light{
    color-scheme: light;
}

.dark{
    color-scheme: dark;
}

Baiklah.. Jadi pada akarnya anda melihat harta yang dipanggil skema warna dan ini akan menjadi penukar permainan kami.
Seperti yang anda lihat, ia memerlukan nilai terang atau gelap untuknya. Saya juga telah mencipta dua kelas yang .terang dan .gelap yang menetapkan nilai skema warna kepada gelap atau terang.

Langkah 3: Tambahkan warna pada pelbagai bahagian kod anda

body{
    background-color: light-dark(var(--light-bg), var(--dark-bg));
}

Kini apabila sesuatu hartanah meminta warna (seperti latar belakang, sifat warna), anda boleh menggunakan fungsi yang dipanggil terang-gelap().
Fungsi ini mengambil dua nilai, yang pertama digunakan apabila skema warna ditetapkan kepada terang dan yang kedua digunakan apabila skema warna ditetapkan kepada gelap.

Ya... Ini ialah fungsi yang dikeluarkan pada Mei 2024. Ia agak baharu, tetapi Ia akan disesuaikan tidak lama lagi. Dan ia adalah dalam sokongan asas pada penulisan artikel ini. Berikut ialah dokumen untuknya

terang-gelap() - CSS: Helaian Gaya Lata | MDN

CSS terang-gelap() fungsi membolehkan menetapkan dua warna untuk harta - mengembalikan salah satu daripada dua pilihan warna dengan mengesan jika pembangun telah menetapkan skema warna terang atau gelap atau pengguna telah meminta tema warna terang atau gelap - tanpa perlu menyelitkan warna tema dalam pilihan pertanyaan ciri media skema warna. Pengguna boleh menunjukkan keutamaan skema warna mereka melalui tetapan sistem pengendalian mereka (mis. mod terang atau gelap) atau tetapan ejen pengguna mereka. Fungsi terang-gelap() membolehkan menyediakan dua nilai warna di mana mana-mana nilai diterima. Fungsi warna CSS terang-gelap() mengembalikan nilai pertama jika keutamaan pengguna ditetapkan kepada terang atau jika tiada keutamaan ditetapkan dan nilai kedua jika pilihan pengguna ditetapkan kepada gelap.

developer.mozilla.org

Jika anda menggunakan ini, CSS akan secara automatik mengesan pilihan pengguna daripada OS dan menetapkannya kepada warna yang mereka mahukan.
Kami mencapai matlamat pertama kami, tapak web akan dimuatkan dengan pengguna mod warna yang sudah dikehendaki dalam OS mereka.

Langkah 4: Gunakan Javascript untuk menogol antara mod gelap dan terang

// mode is the toggle button 
mode.addEventListener("click", ()=>{
    // we are getting the color scheme here
    let theme = document.documentElement.style.colorScheme;
    /*  when a website is first loaded
    it will have null as its color-scheme value*/
    if(theme == null){
        // this window.matchMedia() checks if the user prefers the dark theme
        if(window.matchMedia("(prefers-color-scheme:dark)").matches){
            /* if they prefer dark, clicking on our button should turn everything to light, 
            the color-scheme will be given a value as light  */
            document.documentElement.style.colorScheme = "light"; 
        }
        // Or else the color-scheme will be set to dark
        document.documentElement.style.colorScheme = "dark";
    }

    /* Now since our toggle button set the color scheme,
        we can simply change light to dark and dark to light using below code 
    */

    else{
        document.documentElement.style.colorScheme = (theme == "light")? "dark": "light";
    }
});

Di sini, document.documentElement.style.colorScheme sebenarnya merujuk kepada elemen :root daripada CSS.
Seperti yang telah kami capai untuk membuka tapak web dalam mod pilihan pengguna dalam langkah sebelumnya, di sini apabila butang togol diklik ia melakukan tugas berikut.

1. Ia menyemak sama ada skema warna mempunyai sebarang nilai, jika tidak, tapak web berada dalam mod pilihan pengguna, kami perlu mengenal pasti sama ada ia gelap atau terang untuk menukar mod.
2. Ia menggunakan window.matchMedia("(prefers-color-scheme:dark)"). padanan untuk mencari jika ia berada dalam mod gelap, jika ia dalam mod gelap, kami menukar skema warna kepada terang, jika tidak , kita tukar kepada gelap.
3. Apabila mereka mengklik butang seterusnya, kami sudah menetapkan nilai untuk skema warna kami, jadi kami hanya menogol antara gelap atau terang.

*PS: * Ini adalah catatan pertama saya dan saya masih pemula dalam pembangunan web. Tetapi apabila saya mencari kaedah ini, saya tidak melihat sebarang catatan berkaitan mengenainya. Jika anda sudah tahu ini, saya minta maaf kerana click baiting anda?. Saya fikir siaran ini akan membantu saya mengingati proses ini setiap kali saya mengerjakan projek baharu.
Jika anda berusaha untuk tapak web anda berfungsi pada pelayar lama, kaedah ini pastinya bukan untuk anda. Beritahu saya dalam ulasan tentang siaran ini. Terima kasih kerana membaca.

Atas ialah kandungan terperinci Tukar tema Terang dan Gelap dalam baris JavaScript sahaja. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!