Dasar Mode Gelap dan Terang

Termasuk bagian Frontend Praktis dalam perjalanan HTML di Coddy. Pelajaran 13 dari 35.

Mode gelap/terang adalah fitur populer yang memungkinkan pengguna memilih skema warna yang mereka sukai. Mari buat tombol untuk beralih antara mode gelap dan terang menggunakan variabel CSS.

Pertama, definisikan variabel warna mode terang di elemen root dan terapkan pada elemen yang berbeda:

:root {
  --background-color: #ffffff;
  --text-color: #333333;
  --heading-color: #000000;
}
body {
  background-color: var(--background-color);
  color: var(--text-color);
}
h1, h2, h3 {
  color: var(--heading-color);
}

Selanjutnya, buat class mode gelap yang akan menggantikan variabel-variabel ini:

.dark-mode {
  --background-color: #333333;
  --text-color: #f5f5f5;
  --heading-color: #ffffff;
}

Sekarang, class .dark-mode mengontrol tema. Saat class ini ditambahkan ke <body>, variabel berubah dan semua elemen yang menggunakannya diperbarui secara otomatis.

<body class="dark-mode">
<!-- konten halamanmu di sini -->
</body>

Untuk beralih mode secara dinamis, kita perlu sedikit bantuan dari bahasa lain bernama JavaScript (JS) untuk menambahkan atau menghapus class .dark-mode. Dalam pelajaran ini, kamu bisa mengujinya secara manual dengan menambahkan atau menghapus class pada tag <body>.

Tantangan

Mudah

Tugasmu:

Tambahkan class .dark-mode di dalam bagian <style>.
Timpa variabel CSS untuk mengatur warna gelap pada latar belakang, teks, judul, dan tombol.
Uji dengan menambahkan class="dark-mode" ke tag <body>.

Coba sendiri

<!DOCTYPE html>
<html>
<head>
  <title>Dark/Light Mode Basics</title>
  <style>
    /* Default light theme */
    :root {
      --background-color: #f0f4f8;
      --text-color: #222222;
      --heading-color: #003366;
      --button-bg: #ffcc00;
      --button-text: #000000;
    }

    body {
      background-color: var(--background-color);
      color: var(--text-color);
      font-family: Arial, sans-serif;
      margin: 0;
      padding: 0;
    }

    header {
      background-color: var(--heading-color);
      color: white;
      padding: 2rem;
      text-align: center;
    }

    header h1 {
      margin: 0;
      font-size: 2rem;
    }

    main {
      padding: 2rem;
    }

    h2 {
      color: var(--heading-color);
      margin-top: 1.5rem;
    }

    p {
      line-height: 1.6;
    }

    .button {
      display: inline-block;
      margin-top: 1rem;
      padding: 0.75rem 1.5rem;
      background-color: var(--button-bg);
      color: var(--button-text);
      border: none;
      border-radius: 5px;
      text-decoration: none;
      font-weight: bold;
      cursor: pointer;
    }

    footer {
      background-color: var(--heading-color);
      color: white;
      text-align: center;
      padding: 1rem;
      margin-top: 2rem;
    }
  </style>
</head>
<body>
  <header>
    <h1>Olympic Games 2025</h1>
    <p>Celebrating sports, unity, and excellence</p>
  </header>

  <main>
    <h2>Top Sports</h2>
    <p>From track and field to swimming and gymnastics, the Olympics showcase the best athletes in the world.</p>
    <a href="#" class="button">See Medal Winners</a>

    <h2>Host Cities</h2>
    <p>Explore the exciting host cities where athletes come together to compete at the highest level.</p>
    <a href="#" class="button">Learn More</a>

    <h2>History</h2>
    <p>The Olympic Games have a rich history dating back to ancient Greece, promoting peace, friendship, and fair competition.</p>
  </main>

  <footer>
    &copy; 2025 Olympic Games. All rights reserved.
  </footer>
</body>
</html>