المظهر

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

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

تتيح لك بعض المتصفحات اقتراح لون مظهر استنادًا إلى لوحة ألوان موقعك الإلكتروني. تتكيّف واجهة المتصفح مع اللون المقترَح. أضِف اللون في عنصر meta باسم theme-color في head من صفحاتك.

<meta name="theme-color" content="#00D494">
Clearleft.com Resilient Web Design dot com. تمثّل هذه السمة org.
يتم عرض ثلاثة مواقع إلكترونية في متصفّح Safari. ولكل نوع من هذه الصفحات لون مظهره الخاص الذي يمتد إلى واجهة المتصفح.

يمكنك تعديل قيمة 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>
خريطتان لـ &quot;برولين&quot;، إحداهما تستخدم ألوانًا فاتحة والأخرى بألوان داكنة
نسختان من الخريطة نفسها، إحداهما للوضع الفاتح وأخرى للوضع الداكن

النماذج

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

أضِف هذه السمة إلى خدمة مقارنة الأسعار (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);
}

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

التحقّق من استيعابك

اختبر معلوماتك حول الموضوع

لتوفير ألوان المظاهر التي تؤثر على المتصفح خارج صفحة الويب، استخدم:

CSS
من المحتمل أن تتسبب معلومات مظهر CSS في وميض الألوان العادية، وهو ما يمثل تجربة غير مرغوب فيها للمستخدم.
JavaScript
فقط إذا كنت تستخدمه لتعديل علامة <meta> التي تحمل اسم "theme-color" (لون المظهر).
بيان تطبيق الويب
يمكن توفير manifest.json وتتضمّن حقولاً لتحديد ألوان المظاهر لتلوين شكل التطبيق أثناء فتحه من شاشة رئيسية للأجهزة الجوّالة.
علامة <meta> من نوع "theme-color" (لون المظاهر)
وفي أقرب وقت ممكن، يمكن أن يلاحظ المتصفِّح لون المظهر هذا في العلامة <head>، ما يتجنّب الوميضات غير المرغوب فيها من الألوان.

للاستفادة من الخيار المفضّل لنظام المستخدم في ما يتعلق بالمظهر الفاتح أو الداكن، استخدِم ما يلي:

الاستعلام عن الوسائط (prefers-color-scheme)
مرِّر القيمة التي تريد التحقق منها، مثل الفاتح أو الداكن، وبذلك يمكنك البدء.
JavaScript
والذي يستخدم بعد ذلك بنية استعلام وسائط CSS لطلب الحالة الحالية للتفضيل.

وبالتالي، يمكنك استخدام المظهر الداكن، ولكن تظل جميع إدخالات النماذج ذات طابع فاتح. الإجراءات التي يمكن اتخاذها

أضِف html { color-scheme: light dark; } إلى خدمة مقارنة الأسعار (CSS).
تشير هذه السياسة من CSS إلى أنّ إدخالات النموذج يجب أن تتطابق مع نظام ألوان النظام.
أضِف <meta name="supported-color-schemes" content="light dark"> إلى علامة HTML <head>.
يشير هذا العنوان من HTML إلى أنّ إدخالات النموذج يجب أن تتطابق مع نظام ألوان النظام.
اكتب مجموعة من CSS لتغيير جميع الإعدادات التلقائية للإدخال.
هذا مناسب أيضًا، لكنه أصعب قليلاً.