المظهر

حتى العلامة التجارية يمكن أن تكون متجاوبة. يمكنك تعديل طريقة عرض موقعك الإلكتروني لتتوافق مع الإعدادات المفضّلة للمستخدم. ولكن قبل ذلك، إليك كيفية توسيع نطاق علامتك التجارية على موقعك الإلكتروني ليشمل المتصفّح نفسه.

تخصيص واجهة المتصفّح

تتيح لك بعض المتصفّحات اقتراح لون تصميم استنادًا إلى لوحة الألوان في موقعك الإلكتروني. تتكيّف واجهة المتصفّح مع اللون المقترَح. أضِف اللون في عنصر 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);
}

إنّ توفير الوضع الداكن هو مجرد مثال على تكييف موقعك الإلكتروني ليناسب الإعدادات المفضّلة للمستخدم. بعد ذلك، ستتعرّف على كيفية جعل موقعك الإلكتروني متوافقًا مع جميع أنواع اعتبارات تسهيل الاستخدام.

اختبِر معلوماتكَ

اختبِر معلوماتك حول تصميم المظاهر