בחירת עיצוב

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

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

חלק מהדפדפנים מאפשרים להציע צבע עיצוב על סמך לוח הצבעים של האתר. ממשק הדפדפן מותאם לצבע שהצעתם. מוסיפים את הצבע ברכיב 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);
}

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

בדיקה של רמת ההבנה שלך

בחינת הידע בנושא עיצובים