כיצד להוסיף לאתר שלך מצב "Dark Mode"

מאת

מצב "Dark Mode" הפך לפופולרי מאוד בשנים האחרונות, ומשתמשים רבים מעדיפים להשתמש בו כדי להפחית את העומס על העיניים שלהם בזמן השימוש באתרים ובאפליקציות. במדריך זה נלמד כיצד להוסיף מצב "Dark Mode" לאתר שלך באמצעות CSS בלבד, כולל שימוש ב-class ב-body.

יצירת CSS ל-Dark Mode

כדי להוסיף מצב "Dark Mode" לאתר שלך, נתחיל בהגדרת סגנונות CSS לשני המצבים: מצב רגיל (Light Mode) ומצב כהה (Dark Mode). נשתמש ב-class כדי להפעיל את המצב הכהה.

HTML בסיסי:

ראשית, נגדיר את מבנה ה-HTML הבסיסי שלנו: (ללמוד HTM כנס לקורס HTML ו-CSS למתחילים

<!DOCTYPE html>
<html lang="he">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Dark Mode Example</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <button id="toggle-dark-mode">Toggle Dark Mode</button>
    <h1>ברוכים הבאים למצב כהה!</h1>
    <p>זהו טקסט לדוגמה.</p>

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

CSS:

נגדיר את הסגנונות לשני המצבים בקובץ styles.css:

body {
    background-color: white;
    color: black;
    transition: background-color 0.3s, color 0.3s;
}

body.dark-mode {
    background-color: black;
    color: white;
}

button {
    padding: 10px 20px;
    margin: 20px;
    cursor: pointer;
}

במצב הרגיל, הרקע יהיה לבן והטקסט יהיה שחור. כאשר נוסיף את ה-class dark-mode ל-body, הסגנונות ישתנו לרקע שחור וטקסט לבן.

JavaScript:

נשתמש בקובץ JavaScript פשוט כדי לאפשר למשתמשים לעבור בין המצבים בלחיצת כפתור:

document.getElementById('toggle-dark-mode').addEventListener('click', function() {
    document.body.classList.toggle('dark-mode');
});

כאשר המשתמש לוחץ על הכפתור, ה-class dark-mode יתווסף או יוסר מ-body, והסגנונות ישתנו בהתאם.

השוואה בין שימוש ב-CSS וונילה לעומת ספריות כמו Bootstrap ו-Tailwind

שימוש ב-CSS וונילה:

שימוש ב-CSS וונילה (כמו בדוגמה לעיל) הוא גישה פשוטה וישירה המאפשרת לך שליטה מלאה על העיצוב.

היתרונות כוללים:

  • שליטה מלאה על כל הסגנונות.
  • קל להבין ולבצע שינויים מותאמים אישית.
  • עם זאת, עליך לכתוב את כל הקוד בעצמך, מה שעלול להיות מאתגר בפרויקטים גדולים.

שימוש ב-Bootstrap:

Bootstrap היא ספריית CSS פופולרית המספקת כלים מובנים למצב כהה. לדוגמה:

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" rel="stylesheet">

<body class="bg-light text-dark" id="page-body">
    <button id="toggle-dark-mode" class="btn btn-dark">Toggle Dark Mode</button>
    <h1>ברוכים הבאים למצב כהה!</h1>
    <p>זהו טקסט לדוגמה.</p>
</body>

<script>
document.getElementById('toggle-dark-mode').addEventListener('click', function() {
    document.getElementById('page-body').classList.toggle('bg-dark');
    document.getElementById('page-body').classList.toggle('text-light');
});
</script>

יתרונות:

  • קל לשימוש ולהגדרה.
  • כולל סגנונות מובנים ומוכנים לשימוש.

שימוש ב-Tailwind CSS:

Tailwind CSS היא ספרייה המאפשרת כתיבת CSS מבוסס utility classes. ניתן להשתמש ב-Tailwind להוספת מצב כהה בקלות:

<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/tailwind.min.css" rel="stylesheet">

<body class="bg-white text-black transition duration-300" id="page-body">
    <button id="toggle-dark-mode" class="px-4 py-2 mt-4 bg-gray-800 text-white">Toggle Dark Mode</button>
    <h1>ברוכים הבאים למצב כהה!</h1>
    <p>זהו טקסט לדוגמה.</p>
</body>

<script>
document.getElementById('toggle-dark-mode').addEventListener('click', function() {
    document.getElementById('page-body').classList.toggle('bg-black');
    document.getElementById('page-body').classList.toggle('text-white');
});
</script>

יתרונות:

  • מאפשר כתיבת CSS מודולרי ונקי.
  • מותאם אישית לכל צורך.

סיכום

הוספת מצב "Dark Mode" לאתר שלך יכולה לשפר את חווית המשתמש ולהפוך את האתר לנעים יותר לשימוש. בין אם אתה משתמש ב-CSS וונילה, Bootstrap או Tailwind CSS, ישנן דרכים רבות להוסיף את המצב הכהה בצורה יעילה ומותאמת אישית. נסה את הגישות השונות ובחר בזו המתאימה ביותר לצרכים שלך ולפרויקט הספציפי.

Scroll to Top