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

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

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

הבנת מצב כהה

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

הגדרת הפרויקט שלך

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

קוד ה-HTML

התחל עם הסימון הבא עבור תוכן הדף שלך. מבקר יוכל להשתמש ב- נושא_מתג רכיב כדי לעבור בין מצב כהה לבהיר.

<body>
<navclass="navbar">
<spanclass="logo">Company Logospan>
<ulclass="nav__lists">
<li>Aboutli>
<li>Blogli>
<li>Contactli>
ul>


<divid="theme__switcher">
<imgid="theme__image"src="./toggle.svg"alt="" />
div>
nav>







instagram viewer



<main>
 Lorem ipsum dolor sit amet consectetur adipisicing elit.
 Odit deserunt sit neque in labore quis quisquam expedita minus
 perferendis.
main>
<scriptsrc="./script.js">script>
body>

קוד ה-CSS

הוסף את ה-CSS הבא כדי לסגנן את הדוגמה. זה ישמש כמצב האור המוגדר כברירת מחדל, שאותו תגדיל מאוחר יותר בסגנונות חדשים לתצוגת מצב כהה.

@import url("https://fonts.googleapis.com/css2?family=Quicksand: wght@400;700&display=swap");
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}


html { font-size: 62.5%; }


body { font-family: "Quicksand", sans-serif; }


.navbar {
display: flex;
padding: 2rem;
font-size: 1.6rem;
align-items: center;
color: rgb(176, 58, 46);
background-color: #fdedec;
}


.navbarspan { margin-right: auto; }


.logo { font-weight: 700; }


.nav__lists {
display: flex;
list-style: none;
column-gap: 2rem;
margin: 0 2rem;
}


#theme__switcher { cursor: pointer; }


main {
width: 300px;
margin: 5remauto;
font-size: 2rem;
line-height: 2;
padding: 1rem 2rem;
border-radius: 10px;
box-shadow: 2px 3.5px 5pxrgba(242, 215, 213, 0.4);
}

כרגע, הממשק שלך אמור להיראות כך:

יישום Dark Mode באמצעות CSS ו-JavaScript

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

יצירת כיתות הנושא

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

.dark {
background: #1f1f1f;
color: #fff;
}
.light {
background: #fff;
color: #333;
}

בחירת האלמנטים האינטראקטיביים

הוסף את ה-JavaScript הבא שלך script.js קוֹבֶץ. פיסת הקוד הראשונה פשוט בוחרת את האלמנטים שבהם תשתמש כדי להתמודד עם החלפת המצב.

// Get a reference to the theme switcher element and the document body
const themeToggle = document.getElementById("theme__switcher");
const bodyEl = document.body;

הוספת פונקציית החלפת מצב

לאחר מכן, השתמש ב-JavaScript הבא כדי לעבור בין מצב האור (אוֹר) ומצב כהה (אפל) שיעורים. שים לב שמומלץ גם לשנות את מתג ההחלפה כדי לציין את המצב הנוכחי. הקוד הזה עושה זאת עם מסנן CSS.

// Function to set the theme
functionsetTheme(theme) {
// If the theme is "dark," add the "dark" class, remove "light" class,
// and adjust filter style
 bodyEl.classList.toggle("dark", theme "dark");


// If the theme is "light," add the "light" class, remove "dark" class,
 bodyEl.classList.toggle("light", theme !== "dark");


// adjust filter of the toggle switch
 themeToggle.style.filter = theme "dark"? "invert(75%)": "none";
}


// Function to toggle the theme between light and dark


functiontoggleTheme() {
 setTheme(bodyEl.classList.contains("dark")? "light": "dark");
}


themeToggle.addEventListener("click", toggleTheme);

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

שיפור מצב כהה עם JavaScript

שקול את שני השיפורים הבאים שיכולים להפוך את אתרי המצב האפל שלך לנעים יותר לשימוש עבור המבקרים שלך.

זיהוי העדפות משתמש

זה כרוך בבדיקת נושא המערכת של המשתמש לפני שהאתר נטען והתאמת האתר שלך כך שיתאים. הנה איך אתה יכול לעשות את זה באמצעות matchMedia פוּנקצִיָה:

// Function to detect user's preferred theme
functiondetectPreferredTheme() {
// Check if the user prefers a dark color scheme using media queries
const prefersDarkMode = window.matchMedia("(prefers-color-scheme: dark)").matches;
 setTheme(prefersDarkMode);
}


// Run the function to detect the user's preferred theme
detectPreferredTheme();

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

העדפת משתמש מתמשכת עם אחסון מקומי

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

functionsetTheme(theme) {
 bodyEl.classList.toggle("dark", theme "dark");
 bodyEl.classList.toggle("light", theme !== "dark");
 themeToggle.style.filter = theme "dark"? "invert(75%)": "none";


// Setting the theme in local storage
 localStorage.setItem("theme", theme);
}


// Check if the theme is stored in local storage


const storedTheme = localStorage.getItem("theme");


if (storedTheme) {
 setTheme(storedTheme);
}


functiondetectPreferredTheme() {
const prefersDarkMode = window.matchMedia("(prefers-color-scheme: dark)").matches;


// Getting the value from local storage
const storedTheme = localStorage.getItem("theme");
 setTheme(prefersDarkMode && storedTheme !== "light"? "dark": "light");
}

אימוץ עיצוב ממוקד משתמש

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