By Keluaran Tepat Yuk in Hiburan —

Cara Buat Dark Mode Toggle dengan JavaScript

Pernah gak, kamu buka sebuah website di malam hari, dan tiba-tiba mata kamu “disambit” cahaya putih terang dari layar? Nggak enak banget, kan? Nah, di situlah fitur dark mode berperan penting. Bukan cuma soal gaya, tapi juga kenyamanan mata dan pengalaman pengguna yang lebih ramah, apalagi buat situs yang sering diakses malam hari—kayak situs keluaran togel misalnya.

Kalau kamu punya web result togel atau sedang ngembangin project frontend, fitur dark mode toggle wajib masuk daftar to-do kamu. Di artikel ini, kita bakal bahas secara praktis dan santai cara bikin tombol dark mode toggle pakai JavaScript, tanpa ribet dan langsung bisa diimplementasikan di web apapun.

Kenapa Harus Ada Dark Mode di Situs Togel?

Kebanyakan pengunjung situs togel datang di malam hari, apalagi kalau mereka nunggu update hasil live. Tampilan putih terang di malam hari bisa ganggu kenyamanan mata dan bikin pengguna cepat keluar dari halaman.

Manfaat dark mode toggle untuk situs keluaran togel:

  • Lebih nyaman dilihat saat malam
  • Hemat baterai (terutama di OLED)
  • Tampilan terlihat lebih modern
  • User punya opsi personalisasi
  • Bisa bikin orang betah lebih lama di situs

Jadi bukan cuma gimmick, tapi dark mode itu bagian dari UX (user experience) yang bikin pengunjung merasa dihargai.

Konsep Dasar Dark Mode Toggle

Secara teknis, dark mode toggle adalah:

  1. Sebuah tombol atau switch di UI
  2. Saat diklik, JavaScript akan menambahkan class CSS tertentu (misalnya dark-mode) ke <body>
  3. CSS dark-mode akan override warna latar, teks, dan elemen lainnya

Kita juga bisa simpan preferensi pengguna di localStorage, jadi saat mereka balik ke web, tampilannya tetap gelap (atau terang) sesuai pilihan sebelumnya.

Langkah 1: Siapkan Struktur HTML Sederhana

Kita mulai dengan HTML yang clean:

htmlSalinEdit<!DOCTYPE html>
<html lang="id">
<head>
<meta charset="UTF-8">
<title>Keluaran Togel Hari Ini</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<button id="toggle-dark">🌙 Dark Mode</button>

<div class="content">
<h1>Keluaran Togel Hari Ini</h1>
<p>Angka terbaru: <strong>4321</strong></p>
</div>

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

Langkah 2: Tambahkan CSS untuk Mode Terang dan Gelap

cssSalinEdit/* style.css */
body {
background: #ffffff;
color: #000000;
font-family: sans-serif;
transition: all 0.3s ease;
}

button {
margin: 1rem;
padding: 0.5rem 1rem;
cursor: pointer;
}

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

Kita cukup tambahkan .dark-mode ke <body>, dan semua elemen akan otomatis pakai warna gelap.

Langkah 3: Buat Script JavaScript Toggle

javascriptSalinEdit// script.js
const toggleBtn = document.getElementById('toggle-dark');
const body = document.body;

// Cek preferensi sebelumnya
if (localStorage.getItem('theme') === 'dark') {
body.classList.add('dark-mode');
}

// Event saat tombol diklik
toggleBtn.addEventListener('click', () => {
body.classList.toggle('dark-mode');

// Simpan preferensi ke localStorage
if (body.classList.contains('dark-mode')) {
localStorage.setItem('theme', 'dark');
} else {
localStorage.setItem('theme', 'light');
}
});

Sederhana tapi fungsional. Sekali pengguna klik tombol, dark mode langsung aktif. Dan saat mereka balik lagi ke halaman besok, preferensi tetap tersimpan.

Tambahan: Ubah Label Tombol Secara Dinamis

Biar lebih interaktif, kamu bisa ganti ikon/label tombol saat mode berubah:

javascriptSalinEdittoggleBtn.addEventListener('click', () => {
body.classList.toggle('dark-mode');
const isDark = body.classList.contains('dark-mode');
toggleBtn.innerText = isDark ? '☀️ Light Mode' : '🌙 Dark Mode';
localStorage.setItem('theme', isDark ? 'dark' : 'light');
});

Bonus: Deteksi Preferensi Sistem Otomatis

Beberapa user udah atur dark mode dari sistem. Kamu bisa deteksi dengan:

javascriptSalinEditconst prefersDark = window.matchMedia('(prefers-color-scheme: dark)').matches;
if (prefersDark && !localStorage.getItem('theme')) {
body.classList.add('dark-mode');
}

Jadi kalau pengguna memang suka dark mode di level sistem, situsmu akan otomatis mengikuti.

Tips Tambahan untuk Situs Keluaran Togel

Kalau kamu implementasi dark mode toggle di situs yang berisi angka keluaran, pastikan juga:

1. Warna Tabel Terbaca

Jangan sampai warna angka terlalu gelap atau terlalu terang di dark mode. Gunakan warna kontras seperti:

cssSalinEdit.dark-mode table {
background-color: #1e1e1e;
color: #00ffcc;
}

2. Gambar Jangan Overbright

Gunakan ikon pasaran atau logo yang punya versi gelap dan terang (SVG ideal), atau pastikan gambar tetap terlihat di latar gelap.

3. Test di Mobile dan Desktop

Pastikan tombol toggle terlihat jelas dan tidak mengganggu layout utama.

Bisa Diterapkan di Framework Apa Pun

Meskipun contoh di atas pakai HTML, CSS, dan JS biasa, kamu juga bisa implementasi dark mode toggle ini di framework seperti:

  • React / Next.js
  • Vue.js
  • Svelte
  • WordPress (dengan sedikit modifikasi)

Fungsinya tetap sama: tambahkan class di root element, lalu buat CSS yang menyesuaikan warna.