ערכות נושא כהה ובהירה

חלק מהיחידה JavaScript בפעולה במסלול ה-HTML של Coddy. שיעור 16 מתוך 27.

הטמעת מתג בין ערכת נושא כהה לבהירה היא תכונה נפוצה באתרים מודרניים. בואו ללמוד איך ליצור מחליף ערכות נושא פשוט באמצעות JavaScript.

ראשית, צרו כפתור שיחליף בין ערכות הנושא:

<button id="themeToggle">Theme Toggle</button>

לאחר מכן, נוסיף קצת CSS בסיסי עבור ערכות הנושא הבהירה והכהה שלנו:

<style>
  :root {
    --background-color: #ffffff;
    --text-color: #333333;
  }
  
  body {
    background-color: var(--background-color);
    color: var(--text-color);
    transition: background-color 0.3s, color 0.3s;
  }
  
  .dark-theme {
    --background-color: #222222;
    --text-color: #f5f5f5;
  }
</style>

כעת, נוסיף את JavaScript כדי לעבור בין ערכות הנושא:


const themeToggle = document.getElementById('themeToggle');
  
themeToggle.addEventListener('click', function() {
  document.body.classList.toggle('dark-theme');
});

כשאתה לוחץ על הכפתור, הוא מחליף את מחלקת 'dark-theme' ברכיב body.

אתגר

קל

בתוך מאזין אירוע הלחיצה של הכפתור, הוסף קוד להפעלה או לכיבוי של המחלקה "dark-mode" ברכיב body.

נסו בעצמכם

<!DOCTYPE html>
<html>
<head>
  <title>Dark/light themes</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <header>
    <h1>Hygge ✨</h1>
    <button id="themeToggle" class="toggle-btn">Toggle Theme</button>
  </header>

  <main>
    <section class="intro">
      <img src="https://images.unsplash.com/photo-1519710164239-da123dc03ef4?auto=format&fit=crop&w=1350&q=80" alt="Cozy hygge scene" class="hero-img">
      <p>
        <strong>Hygge</strong> is a Danish concept that embodies coziness, comfort, and a sense of well-being.  
        It’s about enjoying life’s simple pleasures — candles, warm drinks, good company, and soft blankets.
      </p>
    </section>

    <section class="philosophy">
      <h2>The Philosophy</h2>
      <p>
        Hygge is less about things and more about atmosphere and feelings.  
        It’s creating moments of calm, warmth, and togetherness — a way to nurture happiness in everyday life.
      </p>
    </section>

    <section class="origin">
      <h2>Where It Comes From</h2>
      <p>
        Originating from Denmark, hygge reflects the Danish culture’s deep appreciation for balance, comfort,  
        and community. It’s often credited as one of the reasons why Denmark consistently ranks among the  
        happiest countries in the world.
      </p>
    </section>
  </main>

  <footer>
    <p>☕ Embrace hygge in your daily life.</p>
  </footer>

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