Beranda / Uncategorized / Cara Mudah Membuat Tombol Dark Mode dengan HTML, CSS, dan JavaScript

Cara Mudah Membuat Tombol Dark Mode dengan HTML, CSS, dan JavaScript

Agustus 24, 2026

Dark Mode merupakan salah satu fitur yang banyak digunakan pada website dan aplikasi modern. Fitur ini memungkinkan pengguna mengubah tampilan website dari mode terang atau Light Mode menjadi mode gelap atau Dark Mode.

Selain memberikan tampilan yang lebih menarik, Dark Mode juga dapat membuat pengguna lebih nyaman ketika melihat website dalam kondisi pencahayaan yang rendah. Untuk membuat fitur ini, kita tidak membutuhkan kode yang terlalu rumit.

Dengan menggunakan HTML, CSS, dan JavaScript, kita dapat membuat tombol Dark Mode sederhana yang memungkinkan pengunjung mengubah tampilan website hanya dengan satu klik.

Pada artikel ini, kita akan membahas cara mudah membuat tombol Dark Mode dengan HTML, CSS, dan JavaScript, lengkap dengan contoh kode yang dapat langsung dicoba.

Apa Itu Dark Mode?

Dark Mode adalah fitur yang mengubah tampilan antarmuka dari warna terang menjadi warna yang lebih gelap.

Pada Light Mode, biasanya website menggunakan:

  • Latar belakang putih.
  • Teks berwarna hitam.
  • Elemen dengan warna terang.

Sedangkan pada Dark Mode, biasanya digunakan:

  • Latar belakang gelap.
  • Teks berwarna terang.
  • Warna elemen yang disesuaikan agar tetap mudah dibaca.

Contoh sederhana:

Light Mode:

Background putih + teks hitam.

Dark Mode:

Background hitam atau abu-abu gelap + teks putih.

Pengguna biasanya dapat mengaktifkan atau menonaktifkan fitur ini menggunakan sebuah tombol.

Mengapa Dark Mode Banyak Digunakan?

Dark Mode memiliki beberapa manfaat bagi pengguna maupun pemilik website.

1. Membuat Tampilan Lebih Modern

Dark Mode dapat membuat website terlihat lebih modern dan profesional.

2. Lebih Nyaman pada Kondisi Gelap

Tampilan yang lebih gelap dapat terasa lebih nyaman ketika website digunakan pada lingkungan dengan pencahayaan rendah.

3. Memberikan Pilihan kepada Pengguna

Tidak semua pengguna memiliki preferensi tampilan yang sama. Dengan menyediakan Dark Mode, pengunjung dapat memilih tampilan yang mereka sukai.

4. Menjadi Fitur Interaktif

Tombol Dark Mode juga dapat menjadi salah satu elemen interaktif yang membuat website terasa lebih dinamis.

Apa yang Dibutuhkan untuk Membuat Dark Mode?

Untuk membuat Dark Mode sederhana, kita membutuhkan tiga teknologi utama:

HTML

HTML digunakan untuk membuat struktur halaman dan tombol Dark Mode.

CSS

CSS digunakan untuk mengatur warna, background, teks, dan tampilan ketika Dark Mode aktif.

JavaScript

JavaScript digunakan untuk mendeteksi ketika tombol ditekan dan mengubah tampilan website.

Ketiga teknologi tersebut sudah cukup untuk membuat Dark Mode sederhana tanpa menggunakan framework tambahan.

Struktur File Project

Jika ingin mencobanya menggunakan Visual Studio Code, buat sebuah folder dengan struktur:

dark-mode/
│
├── index.html
├── style.css
└── script.js

Masing-masing file mempunyai fungsi:

  • index.html → struktur halaman.
  • style.css → desain website.
  • script.js → fungsi tombol Dark Mode.

Cara Membuat Dark Mode dengan HTML, CSS, dan JavaScript

Sekarang kita masuk ke bagian praktik.

1. Membuat File HTML

Buat file bernama:

index.html

Kemudian masukkan kode berikut:

<!DOCTYPE html>
<html lang="id">

<head>
    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>Dark Mode Website</title>

    <link rel="stylesheet" href="style.css">
</head>

<body>

    <header>

        <div class="container">

            <h1>Website Saya</h1>

            <button id="darkModeButton">
                🌙 Dark Mode
            </button>

        </div>

    </header>


    <main>

        <section class="hero">

            <div class="container">

                <h2>
                    Selamat Datang di Website Saya
                </h2>

                <p>
                    Ini adalah contoh website sederhana
                    dengan fitur Dark Mode menggunakan
                    HTML, CSS, dan JavaScript.
                </p>

                <button class="button">
                    Pelajari Selengkapnya
                </button>

            </div>

        </section>


        <section class="content">

            <div class="container">

                <h2>
                    Tentang Website
                </h2>

                <p>
                    Fitur Dark Mode memungkinkan pengguna
                    mengubah tampilan website dari mode
                    terang menjadi mode gelap dengan mudah.
                </p>

            </div>

        </section>

    </main>


    <footer>

        <p>
            &copy; 2026 Website Saya
        </p>

    </footer>


    <script src="script.js"></script>

</body>

</html>

Kode tersebut membuat struktur website sederhana yang memiliki tombol Dark Mode.

2. Membuat CSS

Selanjutnya buat file:

style.css

Masukkan kode berikut:

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: Arial, sans-serif;
    background: #ffffff;
    color: #222222;
    transition: 0.3s;
}

.container {
    width: 90%;
    max-width: 1000px;
    margin: auto;
}


/* HEADER */

header {
    padding: 20px 0;
    border-bottom: 1px solid #dddddd;
}

header .container {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

header h1 {
    font-size: 25px;
}


/* DARK MODE BUTTON */

#darkModeButton {
    border: none;
    padding: 12px 18px;
    border-radius: 8px;
    cursor: pointer;
    background: #222222;
    color: #ffffff;
    font-size: 14px;
}

#darkModeButton:hover {
    opacity: 0.8;
}


/* HERO */

.hero {
    padding: 100px 0;
    text-align: center;
}

.hero h2 {
    font-size: 40px;
    margin-bottom: 20px;
}

.hero p {
    max-width: 650px;
    margin: auto;
    color: #666666;
    line-height: 1.7;
}


/* BUTTON */

.button {
    margin-top: 30px;
    padding: 13px 25px;
    border: none;
    border-radius: 8px;
    background: #2563eb;
    color: #ffffff;
    cursor: pointer;
}


/* CONTENT */

.content {
    padding: 70px 0;
    background: #f5f5f5;
}

.content h2 {
    margin-bottom: 15px;
}

.content p {
    line-height: 1.7;
    color: #555555;
}


/* FOOTER */

footer {
    padding: 30px;
    text-align: center;
    background: #111111;
    color: #ffffff;
}


/* DARK MODE */

body.dark-mode {
    background: #121212;
    color: #ffffff;
}

body.dark-mode header {
    border-color: #333333;
}

body.dark-mode .hero p {
    color: #cccccc;
}

body.dark-mode .content {
    background: #1e1e1e;
}

body.dark-mode .content p {
    color: #cccccc;
}

body.dark-mode #darkModeButton {
    background: #ffffff;
    color: #222222;
}

CSS tersebut mengatur dua kondisi tampilan, yaitu tampilan normal dan tampilan Dark Mode.

Bagian terpenting berada pada:

body.dark-mode {
    background: #121212;
    color: #ffffff;
}

Ketika class dark-mode ditambahkan ke elemen body, tampilan website akan berubah menjadi mode gelap.

3. Membuat JavaScript

Sekarang buat file:

script.js

Kemudian masukkan kode berikut:

const darkModeButton = document.getElementById("darkModeButton");

darkModeButton.addEventListener("click", function () {

    document.body.classList.toggle("dark-mode");

    if (document.body.classList.contains("dark-mode")) {

        darkModeButton.innerHTML = "☀️ Light Mode";

    } else {

        darkModeButton.innerHTML = "🌙 Dark Mode";

    }

});

JavaScript tersebut memiliki tugas utama untuk mengaktifkan dan menonaktifkan class dark-mode.

Ketika tombol ditekan, kode:

document.body.classList.toggle("dark-mode");

akan menambahkan atau menghapus class dark-mode pada elemen <body>.

Jika Dark Mode aktif, tulisan tombol berubah menjadi:

☀️ Light Mode

Jika Dark Mode dimatikan, tombol kembali menjadi:

🌙 Dark Mode

4. Jalankan Website

Setelah ketiga file selesai dibuat, struktur folder seharusnya menjadi:

dark-mode/
│
├── index.html
├── style.css
└── script.js

Kemudian buka file:

index.html

Browser akan menampilkan website.

Klik tombol:

🌙 Dark Mode

Tampilan website akan berubah menjadi mode gelap.

Klik tombol kembali:

☀️ Light Mode

Website akan kembali ke mode terang.

Cara Kerja Dark Mode

Secara sederhana, cara kerja fitur ini adalah:

Pengguna menekan tombol
        ↓
JavaScript mendeteksi klik
        ↓
Class "dark-mode" ditambahkan
        ↓
CSS Dark Mode diterapkan
        ↓
Website berubah menjadi mode gelap

Ketika tombol ditekan kembali:

Pengguna menekan tombol
        ↓
JavaScript menghapus class "dark-mode"
        ↓
CSS normal kembali digunakan
        ↓
Website berubah menjadi Light Mode

Dengan cara ini, kita tidak perlu membuat dua halaman website yang berbeda.

Cara Membuat Dark Mode Tersimpan

Kode sebelumnya hanya mengubah tampilan selama halaman masih terbuka. Jika halaman direfresh, pilihan pengguna akan kembali ke Light Mode.

Agar pilihan Dark Mode tetap tersimpan, kita dapat menggunakan localStorage pada JavaScript.

Ganti isi script.js sebelumnya dengan kode berikut:

const darkModeButton = document.getElementById("darkModeButton");

function updateButton() {

    if (document.body.classList.contains("dark-mode")) {

        darkModeButton.innerHTML = "☀️ Light Mode";

    } else {

        darkModeButton.innerHTML = "🌙 Dark Mode";

    }

}


if (localStorage.getItem("darkMode") === "enabled") {

    document.body.classList.add("dark-mode");

}


updateButton();


darkModeButton.addEventListener("click", function () {

    document.body.classList.toggle("dark-mode");


    if (document.body.classList.contains("dark-mode")) {

        localStorage.setItem("darkMode", "enabled");

    } else {

        localStorage.setItem("darkMode", "disabled");

    }


    updateButton();

});

Dengan kode tersebut, browser akan menyimpan pilihan pengguna.

Jika pengguna memilih Dark Mode dan kemudian melakukan refresh, website tetap menggunakan Dark Mode.

Apa Itu localStorage?

localStorage adalah fitur pada browser yang dapat digunakan untuk menyimpan data sederhana di perangkat pengguna.

Dalam contoh Dark Mode, kita menggunakan:

localStorage.setItem("darkMode", "enabled");

untuk menyimpan pilihan bahwa Dark Mode sedang aktif.

Sedangkan:

localStorage.setItem("darkMode", "disabled");

digunakan ketika pengguna kembali ke Light Mode.

Untuk membaca data yang telah disimpan, kita menggunakan:

localStorage.getItem("darkMode");

Cara Membuat Tombol Dark Mode Lebih Menarik

Tampilan tombol dapat dibuat lebih menarik menggunakan CSS.

Contohnya:

#darkModeButton {
    padding: 12px 20px;
    border: none;
    border-radius: 50px;
    cursor: pointer;
    background: #222;
    color: white;
    transition: 0.3s;
}

#darkModeButton:hover {
    transform: scale(1.05);
}

Efek tersebut membuat tombol sedikit membesar ketika pengguna mengarahkan kursor ke tombol.

Cara Membuat Transisi Dark Mode

Agar perpindahan dari Light Mode ke Dark Mode terlihat lebih halus, tambahkan:

body {
    transition:
        background-color 0.3s ease,
        color 0.3s ease;
}

Dengan begitu, perubahan warna tidak terjadi secara terlalu tiba-tiba.

Anda juga dapat menambahkan transition pada elemen tertentu.

Contohnya:

.content {
    transition:
        background-color 0.3s ease,
        color 0.3s ease;
}

Cara Membuat Dark Mode di WordPress

Jika Anda menggunakan WordPress, fitur Dark Mode juga dapat dibuat tanpa harus membuat website dari awal.

Salah satu cara adalah menggunakan kode HTML, CSS, dan JavaScript melalui metode yang sesuai dengan tema WordPress yang digunakan.

Untuk struktur HTML, Anda dapat menggunakan blok Custom HTML pada editor WordPress.

Contoh tombol:

<button id="darkModeButton">
    🌙 Dark Mode
</button>

Kemudian CSS dapat ditempatkan pada bagian CSS tambahan jika tema WordPress menyediakan fitur tersebut.

Contohnya:

body.dark-mode {
    background: #121212;
    color: #ffffff;
}

body.dark-mode .site-header {
    background: #181818;
}

body.dark-mode .site-content {
    background: #121212;
}

body.dark-mode .site-footer {
    background: #080808;
}

Perlu diperhatikan bahwa nama class seperti .site-header, .site-content, dan .site-footer dapat berbeda pada setiap tema WordPress. Oleh karena itu, class tersebut harus disesuaikan dengan struktur tema yang digunakan.

Kelebihan Membuat Dark Mode Sendiri

Membuat Dark Mode menggunakan HTML, CSS, dan JavaScript memiliki beberapa keuntungan.

1. Tidak Membutuhkan Library Tambahan

Fitur dasar Dark Mode dapat dibuat menggunakan teknologi web standar.

2. Bisa Disesuaikan

Anda bebas menentukan warna background, warna teks, tombol, border, dan elemen lainnya.

3. Bagus untuk Belajar Coding

Project sederhana seperti Dark Mode dapat membantu pemula memahami hubungan antara HTML, CSS, dan JavaScript.

4. Bisa Dikembangkan

Fitur ini dapat dikembangkan menjadi sistem tema yang lebih lengkap.

Kekurangan Dark Mode Sederhana

Meskipun mudah dibuat, Dark Mode sederhana juga memiliki beberapa keterbatasan.

Misalnya, kita harus memastikan semua elemen website memiliki warna yang sesuai ketika mode gelap aktif.

Jika hanya background yang diubah tetapi warna teks tidak disesuaikan, tulisan bisa menjadi sulit dibaca.

Oleh karena itu, ketika membuat Dark Mode untuk website yang lebih kompleks, sebaiknya semua komponen diperiksa.

Tips Memilih Warna Dark Mode

Dark Mode tidak berarti semua warna harus menggunakan warna hitam pekat.

Anda dapat menggunakan beberapa variasi warna gelap seperti:

  • #121212
  • #181818
  • #1e1e1e
  • #222222
  • #242424

Untuk teks utama, warna putih atau mendekati putih dapat digunakan.

Contohnya:

color: #ffffff;

Sedangkan untuk teks sekunder:

color: #cccccc;

Penggunaan beberapa tingkat warna dapat membuat tampilan Dark Mode lebih nyaman dan tidak terlihat terlalu datar.

Kesalahan yang Harus Dihindari

Ada beberapa kesalahan yang perlu diperhatikan ketika membuat Dark Mode.

1. Teks Tidak Terlihat

Pastikan warna teks memiliki kontras yang cukup dengan background.

2. Gambar Tidak Sesuai

Beberapa gambar mungkin terlihat terlalu terang pada Dark Mode. Gunakan gambar yang tetap nyaman dilihat dalam kedua mode.

3. Tombol Tidak Terlihat

Pastikan tombol tetap memiliki kontras yang baik ketika Dark Mode aktif.

4. Tidak Menguji di Smartphone

Pastikan tombol dapat digunakan dengan nyaman pada perangkat mobile.

5. Tidak Menyimpan Preferensi

Jika ingin memberikan pengalaman pengguna yang lebih baik, gunakan localStorage agar pilihan tema tetap tersimpan.

Apakah Dark Mode Membuat Website Lebih Baik?

Dark Mode dapat menjadi fitur tambahan yang memberikan pilihan kepada pengguna. Namun, Dark Mode bukan berarti selalu lebih baik daripada Light Mode.

Yang paling penting adalah memastikan website tetap:

  • Mudah dibaca.
  • Nyaman digunakan.
  • Responsif.
  • Memiliki kontras warna yang baik.
  • Cepat dimuat.
  • Mudah dinavigasi.

Sediakan pilihan Light Mode dan Dark Mode agar pengguna dapat menentukan tampilan yang mereka sukai.

Kesimpulan

Membuat tombol Dark Mode dengan HTML, CSS, dan JavaScript sebenarnya cukup mudah. HTML digunakan untuk membuat tombol dan struktur halaman, CSS digunakan untuk mengatur tampilan Light Mode dan Dark Mode, sedangkan JavaScript digunakan untuk mengubah tema ketika tombol ditekan.

Jika ingin membuat fitur yang lebih lengkap, kita juga dapat menggunakan localStorage untuk menyimpan pilihan pengguna sehingga Dark Mode tetap aktif meskipun halaman direfresh.

Bagi pemula yang sedang belajar web development, membuat Dark Mode merupakan project sederhana yang sangat baik untuk memahami hubungan antara HTML, CSS, dan JavaScript.

Setelah memahami konsep ini, Anda dapat mengembangkan fitur yang lebih kompleks seperti theme switcher, menu mobile, animasi, popup, form interaktif, dan berbagai fitur website lainnya.

bul2i

Related Posts

Cara Mengatasi Blue Screen Windows
Juli 27, 2026
Cara Mempercepat Laptop yang Lemot
Juli 24, 2026

Tinggalkan Balasan

Alamat email Anda tidak akan dipublikasikan. Ruas yang wajib ditandai *