حتى العلامة التجارية يمكن أن تكون متجاوبة. يمكنك تعديل طريقة عرض موقعك الإلكتروني ليلائم ما يفضّله المستخدم. لكن أولاً، في ما يلي كيفية توسيع العلامة التجارية لموقعك الإلكتروني لتشمل المتصفّح نفسه.
تخصيص واجهة المتصفّح
تتيح لك بعض المتصفحات اقتراح لون مظهر استنادًا إلى لوحة ألوان موقعك الإلكتروني.
تتكيّف واجهة المتصفح مع اللون المقترَح. أضِف اللون في عنصر 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);
}
إنّ توفير الوضع الداكن هو مجرد مثال واحد على تكييف موقعك الإلكتروني ليلائم إعدادات المستخدِم المفضّلة. وستتعرّف في الخطوة التالية على كيفية جعل موقعك الإلكتروني قابلاً للتكيّف مع جميع أنواع اعتبارات تسهيل الاستخدام.
التحقّق من استيعابك
اختبر معلوماتك حول الموضوع
لتوفير ألوان المظاهر التي تؤثر على المتصفح خارج صفحة الويب، استخدم:
<meta>
التي تحمل اسم "theme-color" (لون المظهر).manifest.json
وتتضمّن حقولاً لتحديد ألوان المظاهر لتلوين شكل التطبيق أثناء فتحه من شاشة رئيسية للأجهزة الجوّالة.<meta>
من نوع "theme-color" (لون المظاهر)<head>
، ما يتجنّب الوميضات غير المرغوب فيها من الألوان.للاستفادة من الخيار المفضّل لنظام المستخدم في ما يتعلق بالمظهر الفاتح أو الداكن، استخدِم ما يلي:
(prefers-color-scheme)
وبالتالي، يمكنك استخدام المظهر الداكن، ولكن تظل جميع إدخالات النماذج ذات طابع فاتح. الإجراءات التي يمكن اتخاذها
html { color-scheme: light dark; }
إلى خدمة مقارنة الأسعار (CSS).<meta name="supported-color-schemes" content="light dark">
إلى علامة HTML <head>
.