Ilustrasi seseorang sedang merancang tampilan gelap dan terang pada kalkulator di meja kerjanya. Ilustrasi dibuat menggunakan Nano Banana Gemini

Tutorial Kalkulator Umur - Menerapkan Mode Gelap & Terang

Secara bawaan, Pico CSS sudah memiliki mode gelap-terang. Terbukti dari tampilan awal yang sudah bermode gelap.

Tampilan Awal Kalkulator Umur Mode Gelap

Untuk dapat mengubahnya menjadi mode terang, kita cukup menambahkan atribut dan nilai data-theme=”light” pada tag HTML. Berikut adalah contohnya

<!DOCTYPE html>
<html lang="en" data-theme="light">
<head>
    . . .

Dengan atribut dan nilai tersebut, tampilan pada halaman website akan menjadi terang.

Tampilan Awal Kalkulator Umur Mode Terang

Membuat Function untuk Berpindah ke Gelap atau Terang

Dalam CSS terdapat media query yaitu prefers-color-scheme yang dapat mendeteksi jika sistem atau device kita sedang menggunakan skema warna apa. Ini kita butuhkan untuk mengecek kondisi awal pada saat halaman website diakses.

Untuk itu kita akan mengecek skema warna pada saat ini apa dan menambahkan beberapa function untuk merubah tampilan antara gelap dan terang.

. . .
</main>

    <script type="text/javascript">
        
        const root = document.querySelector("html");
        const currentDark = window.matchMedia("(prefers-color-scheme: dark)");

        function setToDarkMode(){
            root.setAttribute("data-theme", "dark");
        }

        function setToLightMode(){
            root.setAttribute("data-theme", "light");
        }

        if (currentDark.matches){
            setToDarkMode();
        } else {
            setToLightMode();
        }

    </script>
    
</body>

Mengaktifkan Dark-Light Toggle

Terdapat logika sederhana yang akan kita terapkan untuk merubah antara mode gelap dan terang.

Berikut adalah penerapan sederhananya pada JavaScript

<script type="text/javascript">
    
    const root = document.querySelector("html");
    const currentDark = window.matchMedia("(prefers-color-scheme: dark)");
    const darkModeToggle = document.getElementById("darkmode-toggle");

    function setToDarkMode(){
        root.setAttribute("data-theme", "dark");
        darkModeToggle.checked = true;
    }

    function setToLightMode(){
        root.setAttribute("data-theme", "light");
        darkModeToggle.checked = false;
    }

    if (currentDark.matches){
        setToDarkMode();
    } else {
        setToLightMode();
    }

    darkModeToggle.addEventListener("change", function(){
        if (this.checked) {
            root.setAttribute("data-theme", "dark");
        } else {
            root.setAttribute("data-theme", "light");
        }
    });

</script>

Sampai dengan tahap ini, kita sudah bisa merubah mode gelap-terang menggunakan toggle yang sudah kita buat.

Tampilan Kalkulator Umur Mode Gelap & Terang

Kode lengkap tahap ini dapat dilihat di sini

Tahap 2: Tampilan Tahap 4: Alur Kerja