المظهر

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

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

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

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

التحقق من فهمك

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