থিমিং

এমনকি ব্র্যান্ডিংও রেসপন্সিভ হতে পারে। আপনি ব্যবহারকারীর পছন্দ অনুযায়ী আপনার ওয়েবসাইটের উপস্থাপনা সাজিয়ে নিতে পারেন। কিন্তু তার আগে, জেনে নিন কীভাবে আপনার ওয়েবসাইটের ব্র্যান্ডিংকে ব্রাউজার পর্যন্ত প্রসারিত করবেন।

ব্রাউজার ইন্টারফেস কাস্টমাইজ করুন

কিছু ব্রাউজার আপনার ওয়েবসাইটের প্যালেটের উপর ভিত্তি করে একটি থিম কালার সাজেস্ট করার সুযোগ দেয়। ব্রাউজারের ইন্টারফেস আপনার সাজেস্ট করা কালার অনুযায়ী মানিয়ে নেয়। আপনার পেজের head theme-color নামের একটি meta এলিমেন্টে কালারটি যোগ করুন।

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

আপনি জাভাস্ক্রিপ্ট ব্যবহার করে theme-color মান আপডেট করতে পারেন। কিন্তু এই ক্ষমতাটি বিচক্ষণতার সাথে ব্যবহার করুন। ব্যবহারকারীদের ব্রাউজারের কালার স্কিম খুব ঘন ঘন পরিবর্তিত হলে তা তাদের জন্য বিরক্তিকর হতে পারে। থিম কালার সামঞ্জস্য করার জন্য সূক্ষ্ম উপায়গুলো নিয়ে ভাবুন। পরিবর্তনগুলো যদি খুব বেশি চোখে লাগার মতো হয়, তবে ব্যবহারকারীরা বিরক্ত হয়ে ব্রাউজার ছেড়ে চলে যাবে।

আপনি একটি ওয়েব অ্যাপ ম্যানিফেস্ট ফাইলে থিমের রঙও নির্দিষ্ট করে দিতে পারেন। এটি আপনার ওয়েবসাইট সম্পর্কিত মেটাডেটা সম্বলিত একটি JSON ফাইল।

আপনার ডকুমেন্টের head থেকে ম্যানিফেস্ট ফাইলের সাথে লিঙ্ক করুন। manifest এর ` rel ভ্যালু সহ একটি link এলিমেন্ট ব্যবহার করুন।

<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.
}

meta এলিমেন্টের মধ্যে prefers-color-scheme মিডিয়া ফিচার ব্যবহার করে থিমের রং নির্দিষ্ট করুন।

<meta name="theme-color" content="#ffffff" media="(prefers-color-scheme: light)">
<meta name="theme-color" content="#000000" media="(prefers-color-scheme: dark)">

আপনি SVG-এর ভিতরে prefers-color-scheme মিডিয়া ফিচারটিও ব্যবহার করতে পারেন। আপনি যদি আপনার ফ্যাভিকনের জন্য একটি SVG ফাইল ব্যবহার করেন, তবে এটিকে ডার্ক মোডের জন্য সামঞ্জস্য করা যেতে পারে। টমাস স্টেইনার ' SVG favicons for dark mode icons' বইতে prefers-color-scheme সম্পর্কে লিখেছেন।

কাস্টম বৈশিষ্ট্য সহ থিমিং

আপনার 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);
}

কাস্টম প্রোপার্টি ব্যবহার করে থিমিং-এর আরও উন্নত উদাহরণের জন্য কালার স্কিম তৈরি করা দেখুন।

ছবি

আপনি যদি আপনার HTML-এ SVG ব্যবহার করেন, তাহলে সেখানেও কাস্টম প্রোপার্টি প্রয়োগ করতে পারেন।

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">

চেকবক্স, রেডিও বাটন এবং অন্যান্য কিছু ফর্ম ফিল্ড স্টাইল করতে CSS-এ accent-color প্রপার্টি ব্যবহার করুন।

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

ব্যবহারকারীর পছন্দ অনুযায়ী আপনার সাইটকে মানিয়ে নেওয়ার একটি উদাহরণ হলো ডার্ক মোড প্রদান করা। এরপর আপনি শিখবেন কীভাবে আপনার সাইটকে সব ধরনের অ্যাক্সেসিবিলিটি সংক্রান্ত বিষয়গুলির সাথে খাপ খাইয়ে নেওয়া যায়।

আপনার বোধগম্যতা যাচাই করুন

থিমিং বিষয়ে আপনার জ্ঞান পরীক্ষা করুন