בחירת עיצוב

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

התאמה אישית של ממשק הדפדפן

בדפדפנים מסוימים אפשר להציע צבע עיצוב על סמך לוח הצבעים של האתר. ממשק הדפדפן מתאים את עצמו לצבע המוצע שלך. מוסיפים את הצבע ברכיב meta בשם theme-color ב-head של הדפים.

<meta name="theme-color" content="#00D494">

אפשר לעדכן את הערך של theme-color באמצעות JavaScript. אבל חשוב להשתמש בכוח הזה בחוכמה. אם ערכת הצבעים של הדפדפן משתנה לעיתים קרובות מדי, המשתמשים עלולים להיות מוצפים. כדאי לחשוב על דרכים עדינות לשינוי צבע העיצוב. אם השינויים צורמים מדי, המשתמשים יעזבו את האתר בעצבנות.

אפשר גם לציין צבע עיצוב בקובץ מניפסט של אפליקציית אינטרנט. זהו קובץ JSON עם מטא-נתונים על האתר שלך.

קישור לקובץ המניפסט מתוך head של המסמכים שלך. צריך להשתמש ברכיב link עם הערך rel של manifest.

<link rel="manifest" href="/manifest.json">

בקובץ המניפסט, מציינים את המטא-נתונים באמצעות צמדי מפתח/ערך.

{
  "short_name": "Clearleft",
  "name": "Clearleft design agency",
  "start_url": "/",
  "background_color": "#00D494",
  "theme_color": "#00D494",
  "display": "standalone"
}

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

הצגת מצב כהה

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

@media (prefers-color-scheme: dark) {
  // Styles for a dark theme.
}

צריך לציין צבעי עיצוב עם תכונת המדיה prefers-color-scheme בתוך הרכיב meta.

<meta name="theme-color" content="#ffffff" media="(prefers-color-scheme: light)">
<meta name="theme-color" content="#000000" media="(prefers-color-scheme: dark)">

אפשר גם להשתמש בתכונת המדיה prefers-color-scheme בקובץ SVG. אם משתמשים בקובץ SVG לסמל האתר, אפשר להתאים אותו למצב כהה. תומס סטיינר כתב על prefers-color-scheme בסמלי אתר בפורמט SVG לסמלים של מצב כהה.

בחירת עיצוב באמצעות מאפיינים מותאמים אישית

אם משתמשים באותם ערכי צבע בכמה מקומות בשירות ה-CSS, חזרה על כל הסלקטורים בשאילתת מדיה prefers-color-scheme יכולה להיות מסובכת.

body {
  background-color: white;
  color: black;
}
input {
  background-color: white;
  color: black;
  border-color: black;
}
button {
  background-color: black;
  color: white;
}
@media (prefers-color-scheme: dark) {
  body {
    background-color: black;
    color: white;
  }
  input {
    background-color: black;
    color: white;
    border-color: white;
  }
  button {
    background-color: white;
    color: black;
  }
}

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

אם מעדכנים את הערכים של המאפיינים המותאמים אישית בשאילתת מדיה prefers-color-scheme, לא תצטרכו לכתוב את כל הסלקטורים פעמיים.

html {
  --page-color: white;
  --ink-color: black;
}
@media (prefers-color-scheme: dark) {
  html {
    --page-color: black;
    --ink-color: white;
  }
}
body {
  background-color: var(--page-color);
  color: var(--ink-color);
}
input {
  background-color: var(--page-color);
  color: var(--ink-color);
  border-color: var(--ink-color);
}
button {
  background-color: var(--ink-color);
  color: var(--page-color);
}

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

תמונות

אם אתם משתמשים בפורמט SVG ב-HTML, אפשר להחיל גם שם מאפיינים מותאמים אישית.

svg {
  stroke: var(--ink-color);
  fill: var(--page-color);
}

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

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

@media (prefers-color-scheme: dark) {
  img {
    filter: brightness(.8) contrast(1.2);
  }
}

בחלק מהתמונות כדאי להחליף אותן לגמרי במצב כהה. לדוגמה, תוכלו להציג מפה עם ערכת צבעים כהה יותר. צריך להשתמש ברכיב <picture> שמכיל את הרכיב <source> עם שאילתת המדיה prefers-color-scheme.

<picture>
  <source srcset="darkimage.png" media="(prefers-color-scheme: dark)">
  <img src="lightimage.png" alt="A description of the image.">
</picture>

טפסים

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

מוסיפים את קטע הקוד הזה לשירות ה-CSS:

html {
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  html {
    color-scheme: dark;
  }
}

אפשר גם להשתמש ב-HTML. עליך להוסיף את המשפט הבא בhead של המסמכים:

<meta name="supported-color-schemes" content="light dark">

השתמשו במאפיין accent-color ב-CSS כדי לעצב תיבות סימון, לחצני בחירה ושדות אחרים בטופס.

html {
  accent-color: red;
}

לרוב, עיצובים כהים מתאפיינים בצבעים מאופקים של המותג. אפשר לעדכן את הערך של accent-color למצב כהה.

html {
  accent-color: red;
}
@media (prefers-color-scheme: dark) {
  html {
    accent-color: pink;
  }
}

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

html {
  color-scheme: light;
  --page-color: white;
  --ink-color: black;
  --highlight-color: red;
}
@media (prefers-color-scheme: dark) {
  html {
    color-scheme: dark;
    --page-color: black;
    --ink-color: white;
    --highlight-color: pink;
  }
}
html {
  accent-color: var(--highlight-color);
}
body {
  background-color: var(--page-color);
  color: var(--ink-color);
}

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

בדיקת ההבנה

בחינת הידע שלך בנושא