موضوع بندی

حتی برندسازی هم می‌تواند واکنش‌گرا باشد. شما می‌توانید نحوه‌ی نمایش وب‌سایت خود را مطابق با سلیقه‌ی کاربر تنظیم کنید. اما ابتدا، در اینجا نحوه‌ی گسترش برندسازی وب‌سایت خود به گونه‌ای که خود مرورگر را نیز شامل شود، آورده شده است.

رابط مرورگر را سفارشی کنید

بعضی از مرورگرها به شما این امکان را می‌دهند که بر اساس پالت رنگی وب‌سایت خود، رنگ تم را پیشنهاد دهید. رابط کاربری مرورگر با رنگ پیشنهادی شما سازگار می‌شود. رنگ را در یک عنصر meta به نام theme-color در head صفحات خود اضافه کنید.

<meta name="theme-color" content="#00D494">

شما می‌توانید مقدار theme-color را با استفاده از جاوا اسکریپت به‌روزرسانی کنید. اما از این قدرت عاقلانه استفاده کنید. اگر طرح رنگ مرورگر کاربران بیش از حد تغییر کند، می‌تواند برای آنها گیج‌کننده باشد. به روش‌های ظریفی برای تنظیم رنگ تم فکر کنید. اگر تغییرات بیش از حد آزاردهنده باشند، کاربران با ناراحتی سایت را ترک خواهند کرد.

همچنین می‌توانید رنگ تم را در فایل مانیفست برنامه وب مشخص کنید. این یک فایل 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>

فرم‌ها

مرورگرها یک پالت رنگ پیش‌فرض برای فیلدهای فرم ارائه می‌دهند. به مرورگر اطلاع دهید که سایت شما هم حالت تیره و هم حالت روشن را ارائه می‌دهد. به این ترتیب، مرورگر می‌تواند استایل پیش‌فرض مناسب را برای فرم‌ها ارائه دهد.

اینو به سی اس اس خودت اضافه کن:

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);
}

ارائه حالت تاریک تنها یک نمونه از تطبیق سایت شما با ترجیحات کاربر است. در ادامه یاد خواهید گرفت که چگونه سایت خود را با انواع ملاحظات دسترسی سازگار کنید.

درک خود را بررسی کنید

دانش خود را در مورد قالب‌بندی بیازمایید