M

MLOG

עברית

יישמו מצב כהה באתר שלכם עם המדריך המקיף הזה. למדו על שאילתות מדיה של CSS, מתגי JavaScript, שיקולי נגישות ושיטות עבודה מומלצות לחוויית משתמש חלקה.

יישום מצב כהה: מדריך מקיף עם CSS ו-JavaScript

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

למה ליישם מצב כהה?

ישנן מספר סיבות משכנעות לשקול ליישם מצב כהה:

שיטות ליישום מצב כהה

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

1. יישום מצב כהה עם שאילתות מדיה של CSS

שאילתת המדיה של CSS prefers-color-scheme מאפשרת לך לזהות את העדפת ערכת הצבעים של המשתמש וליישם סגנונות שונים בהתאם. זוהי הדרך הישירה והיעילה ביותר ליישם מצב כהה עבור משתמשים שכבר הגדירו את העדפות המערכת שלהם.

דוגמת קוד

הוסף את ה-CSS הבא לגליון הסגנונות שלך:

/* ערכת נושא ברירת מחדל (בהיר) */
body {
  background-color: #fff;
  color: #000;
}

/* ערכת נושא כהה */
@media (prefers-color-scheme: dark) {
  body {
    background-color: #222;
    color: #fff;
  }
  /* התאם רכיבים אחרים לפי הצורך */
  h1, h2, h3 {
    color: #ddd;
  }
  a {
    color: #8ab4f8;
  }
}

הסבר:

יתרונות

חסרונות

2. יישום מצב כהה עם מתג JavaScript

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

מבנה HTML

ראשית, הוסף אלמנט מתג ל-HTML שלך:

<label class="switch">
  <input type="checkbox" id="darkModeToggle">
  <span class="slider round"></span>
</label>

זה יוצר מתג פשוט באמצעות תיבת סימון ועיצוב CSS מותאם אישית.

עיצוב CSS (אופציונלי)

ניתן לעצב את מתג ההחלפה באמצעות CSS. הנה דוגמה:

.switch {
  position: relative;
  display: inline-block;
  width: 60px;
  height: 34px;
}

.switch input {
  opacity: 0;
  width: 0;
  height: 0;
}

.slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #ccc;
  -webkit-transition: .4s;
  transition: .4s;
}

.slider:before {
  position: absolute;
  content: "";
  height: 26px;
  width: 26px;
  left: 4px;
  bottom: 4px;
  background-color: white;
  -webkit-transition: .4s;
  transition: .4s;
}

input:checked + .slider {
  background-color: #2196F3;
}

input:focus + .slider {
  box-shadow: 0 0 1px #2196F3;
}

input:checked + .slider:before {
  -webkit-transform: translateX(26px);
  -ms-transform: translateX(26px);
  transform: translateX(26px);
}

/* Rounded sliders */
.slider.round {
  border-radius: 34px;
}

.slider.round:before {
  border-radius: 50%;
}

קוד JavaScript

כעת, הוסף את קוד JavaScript הבא כדי לטפל בפונקציונליות ההחלפה:

const darkModeToggle = document.getElementById('darkModeToggle');
const body = document.body;

// Function to toggle dark mode
function toggleDarkMode() {
  body.classList.toggle('dark-mode');

  // Store the user's preference in localStorage
  if (body.classList.contains('dark-mode')) {
    localStorage.setItem('darkMode', 'enabled');
  } else {
    localStorage.setItem('darkMode', 'disabled');
  }
}

// Check localStorage for saved preference
if (localStorage.getItem('darkMode') === 'enabled') {
  body.classList.add('dark-mode');
  darkModeToggle.checked = true;
}

// Add event listener to the toggle
darkModeToggle.addEventListener('change', toggleDarkMode);

הסבר:

עיצוב CSS עבור מצב כהה (שימוש במחלקה)

עדכן את ה-CSS שלך כדי להשתמש במחלקה dark-mode כדי להחיל את סגנונות ערכת הנושא הכהה:

/* ערכת נושא ברירת מחדל (בהיר) */
body {
  background-color: #fff;
  color: #000;
}

/* ערכת נושא כהה */
body.dark-mode {
  background-color: #222;
  color: #fff;
}

body.dark-mode h1, body.dark-mode h2, body.dark-mode h3 {
  color: #ddd;
}

body.dark-mode a {
  color: #8ab4f8;
}

יתרונות

חסרונות

3. שילוב שאילתות מדיה ו-JavaScript

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

דוגמת קוד

השתמש באותו HTML ו-CSS מהדוגמה של מתג JavaScript. שנה את ה-JavaScript כדי לבדוק את העדפת המערכת:

const darkModeToggle = document.getElementById('darkModeToggle');
const body = document.body;

// Function to toggle dark mode
function toggleDarkMode() {
  body.classList.toggle('dark-mode');

  // Store the user's preference in localStorage
  if (body.classList.contains('dark-mode')) {
    localStorage.setItem('darkMode', 'enabled');
  } else {
    localStorage.setItem('darkMode', 'disabled');
  }
}

// Check localStorage for saved preference, then system preference
if (localStorage.getItem('darkMode') === 'enabled') {
  body.classList.add('dark-mode');
  darkModeToggle.checked = true;
} else if (window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches) {
  body.classList.add('dark-mode');
  darkModeToggle.checked = true;
}

// Add event listener to the toggle
darkModeToggle.addEventListener('change', toggleDarkMode);

הסבר:

יתרונות

חסרונות

שיקולי נגישות

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

שיטות עבודה מומלצות ליישום מצב כהה

להלן מספר שיטות עבודה מומלצות שיש לפעול לפיהן בעת יישום מצב כהה באתר שלך:

דוגמה: משתני CSS לעיצוב נושא

משתני CSS מקלים על מעבר בין ערכות נושא בהירות וכהות. הגדר את המשתנים במחלקת ה-:root:

:root {
  --bg-color: #fff;
  --text-color: #000;
  --link-color: #007bff;
}

body {
  background-color: var(--bg-color);
  color: var(--text-color);
}

a {
  color: var(--link-color);
}

body.dark-mode {
  --bg-color: #222;
  --text-color: #fff;
  --link-color: #8ab4f8;
}

כעת, כאשר המחלקה dark-mode מתווספת לגוף, משתני ה-CSS מתעדכנים, והסגנונות מוחלים אוטומטית.

סיכום

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

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

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