יסודות מצב כהה ובהיר

חלק מהיחידה פיתוח Frontend מעשי במסלול ה-HTML של Coddy. שיעור 13 מתוך 35.

מצב כהה/בהיר הוא תכונה פופולרית שמאפשרת למשתמשים לבחור את ערכת הצבעים המועדפת עליהם. בואו נממש מתג בסיסי למעבר בין מצב כהה לבהיר באמצעות משתני CSS.

תחילה, הגדירו את משתני הצבע של מצב בהיר באלמנט השורש והחילו אותם על אלמנטים שונים:

: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);
}

לאחר מכן, צרו מחלקה למצב כהה שתדרוס את המשתנים האלה:

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

כעת, המחלקה .dark-mode שולטת בערכת הנושא. כאשר המחלקה הזו מתווספת ל־<body>, המשתנים משתנים וכל הרכיבים שמשתמשים בהם מתעדכנים אוטומטית.

<body class="dark-mode">
<!-- תוכן הדף שלך כאן -->
</body>

כדי להחליף מצבים באופן דינמי, אנחנו זקוקים לעזרה קטנה משפה אחרת שנקראת JavaScript (JS) כדי להוסיף או להסיר את המחלקה .dark-mode. בשיעור הזה תוכלו לבדוק זאת ידנית על ידי הוספה או הסרה של המחלקה בתגית <body>.

אתגר

קל

המשימה שלך:

הוסף מחלקת .dark-mode בתוך מקטע <style>.
דרוס את משתני CSS כדי להגדיר צבעים כהים לרקע, לטקסט, לכותרות ולכפתורים.
בדוק זאת על ידי הוספת class="dark-mode" לתג <body>.

נסו בעצמכם

<!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>