موضوع بندی

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

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

برخی از مرورگرها به شما این امکان را می دهند که رنگ تم را بر اساس پالت وب سایت خود پیشنهاد دهید. رابط مرورگر با رنگ پیشنهادی شما سازگار است. رنگ را در یک عنصر 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>

فرم ها

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

این را به 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);
}

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

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

دانش خود را در زمینه موضوعی تست کنید