المظهر

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

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

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

<meta name="theme-color" content="#00D494">
.Clearleft.com. تصميم الويب المرن. com. تمثّل هذه السمة نظام نقطة الجلسة.
يتم عرض ثلاثة مواقع إلكترونية في متصفّح 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>
بيان تطبيق ويب
يمكن توفير manifest.json ويتضمّن حقولاً لتحديد ألوان المظاهر لتعديل كيفية فتح التطبيق من شاشة رئيسية على الأجهزة الجوّالة.
"لون المظهر" علامة <meta>
في أقرب وقت ممكن، سيتمكّن المتصفّح من ملاحظة لون المظهر هذا في العلامة <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 لتغيير جميع الإعدادات التلقائية للإدخال.
يعمل هذا أيضًا، ولكنه أصعب بعض الشيء.