السمات الداكنة والفاتحة

جزء من قسم JavaScript in Action في رحلة 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.

التحدي

سهل

داخل مستمع حدث النقر (click event listener) الخاص بالزر، أضف كوداً لتبديل الفئة "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>