موضوع بندی

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

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

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

<meta name="theme-color" content="#00D494">
Clearleft dot com.طراحی وب انعطاف پذیر دات کام.سازمان نقطه جلسه.
سه وب سایت در مرورگر سافاری مشاهده می شوند. هر کدام رنگ تم خاص خود را دارند که در رابط مرورگر گسترش می یابد.

می توانید مقدار 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);
}

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

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

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

برای ارائه رنگ‌های تم که بر مرورگر خارج از صفحه وب تأثیر می‌گذارند، از موارد زیر استفاده کنید:

CSS
اطلاعات تم CSS احتمالا باعث فلش رنگ معمولی می شود که تجربه کاربری نامطلوبی است.
جاوا اسکریپت
فقط در صورتی که از آن برای به روز رسانی تگ <meta> "theme-color" استفاده کنید.
مانیفست برنامه وب
manifest.json می توان ارائه داد و شامل فیلدهایی برای تعیین رنگ های طرح زمینه برای رنگ آمیزی نحوه باز شدن برنامه از صفحه اصلی تلفن همراه است.
تگ <meta> 'theme-color'
در اسرع وقت یک مرورگر می تواند متوجه این رنگ تم در تگ <head> شود و از فلش های ناخواسته رنگ جلوگیری کند.

برای اتصال به تنظیمات برگزیده سیستم کاربر در مورد تم روشن یا تیره، از موارد زیر استفاده کنید:

پرسش رسانه ای (prefers-color-scheme)
مقداری را که می‌خواهید بررسی کنید مانند روشن یا تاریکی را پاس کنید و آماده هستید.
جاوا اسکریپت
که سپس از نحو پرس و جو رسانه CSS برای درخواست وضعیت فعلی اولویت استفاده می کند.

بنابراین از تم تیره پشتیبانی می‌کنید، اما همه ورودی‌های فرم همچنان با مضمون روشن هستند. چه کاری می توانی انجام بدهی؟

اضافه کردن html { color-scheme: light dark; } به CSS شما.
این سیگنال از CSS می دهد که ورودی های فرم باید با طرح رنگ سیستم مطابقت داشته باشد.
<meta name="supported-color-schemes" content="light dark"> به تگ <head> HTML خود اضافه کنید.
این از HTML سیگنال می دهد که ورودی های فرم باید با طرح رنگ سیستم مطابقت داشته باشد.
یک دسته CSS بنویسید تا تمام پیش فرض های ورودی را تغییر دهید.
این نیز کار می کند، اما کمی سخت تر است.