বেসলাইন সিএসএস বৈশিষ্ট্য সহ রঙিন থিম

David A. Herron

প্রকাশিত: ১১ ডিসেম্বর, ২০২৫

তাহলে, আপনার একটি সাইট আছে যা আপনি তৈরি বা পুনরায় ডিজাইন করতে চান। হয়তো আপনার মনে কয়েকটি মূল রঙ আছে, এবং আপনি ভাবছেন কিভাবে দ্রুত সেই রঙগুলির উপর ভিত্তি করে একটি থিম বাস্তবায়ন করা যায়।

আপনার প্রাথমিক রঙের প্রয়োজন হবে, তবে অ্যাকশন, হোভার স্টেট, এরর এবং অন্যান্য ইউজার ইন্টারফেসের প্রয়োজনে রঙের প্রয়োজন হবে। তাহলে লাইট এবং ডার্ক মোড বিকল্পগুলি কী হবে? হঠাৎ করেই আপনার অনেক রঙের প্রয়োজন হবে, এবং এটি অপ্রতিরোধ্য মনে হতে পারে।

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

আপেক্ষিক রঙ দিয়ে একটি ভিত্তি তৈরি করুন

যদি আপনার থিমের জন্য একটি প্রাথমিক রঙের ধারণা থাকে, কিছু মৌলিক রঙের তত্ত্ব এবং CSS আপেক্ষিক রঙের বাক্য গঠনের সাহায্যে, আপনি দ্রুত আপনার থিমে ব্যবহারের জন্য রঙের একটি প্যালেট তৈরি করা শুরু করতে পারেন।

ধরুন আপনার বেস রঙটি নীলচে রঙের একটি ছায়া, যা আপনি প্রথমে আপনার পছন্দের রঙের বিন্যাসে সংজ্ঞায়িত করতে পারেন। তারপর আপনি আপনার বেস রঙের সাথে সম্পর্কিত নতুন রঙ তৈরি করতে যেকোনো রঙের ফাংশন ব্যবহার করতে পারেন:

html {
  --base-color: oklch(43.7% 0.075 224);
}

--base-color কাস্টম প্রপার্টিটি oklch() কালার ফাংশন ব্যবহার করে তৈরি করা হয়। OkLCh হল Oklab কালার স্পেসের নলাকার রূপ, এবং তিনটি চ্যানেলের জন্য মান নির্ধারণ করে: L (হালকাতা), C (ক্রোমা), H (আভা), এবং স্বচ্ছতা নিয়ন্ত্রণের জন্য একটি ঐচ্ছিক আলফা চ্যানেল।

এই ধরণের রঙের ম্যানিপুলেশনের জন্য OkLCh একটি ভালো ফর্ম্যাট, কারণ এটি উপলব্ধিগত অভিন্নতা প্রদানের জন্য ডিজাইন করা হয়েছে। উদাহরণস্বরূপ, যদি আপনি শুধুমাত্র একটি রঙের রঙ সামঞ্জস্য করেন, তাহলে ফলাফলের রঙের মূল রঙের সাথে একই রকম হালকাতা এবং ক্রোমা থাকা উচিত। এটি অপ্রত্যাশিত বৈপরীত্য সমস্যা এড়াতে বিশেষভাবে কার্যকর।

তোমার --base-color থেকে একই হালকাতা এবং ক্রোমা রেখে, তুমি একটি ট্রায়াডিক প্যালেটের জন্য উভয় দিকে ১২০ ডিগ্রি রঙ সামঞ্জস্য করতে পারো।

html {
  /* ... */
  --triadic-color-primary: oklch(from var(--base-color) l c calc(h + 120));
  --triadic-color-secondary: oklch(from var(--base-color) l c calc(h - 120));
}

এখানে দেখানো হয়েছে, আপেক্ষিক রঙের সিনট্যাক্স একটি রঙের ফাংশন ব্যবহার করে যা একটি মূল রঙ ( এই উদাহরণে --base-color ) কে from কীওয়ার্ডের সাথে উল্লেখ করে এবং নির্বাচিত আউটপুট রঙের উপর ভিত্তি করে রঙের স্থানের সংশ্লিষ্ট চ্যানেলগুলিকে সামঞ্জস্য করে, যা এই ক্ষেত্রেও OkLCh হবে।

ফলে আউটপুটটি আপনাকে --accent-color এর জন্য গাঢ় গোলাপী এবং --highlight-color এর জন্য সোনালী রঙের একটি ছায়া দেবে, উভয়ই মূল --base-color মতো একই হালকাতা এবং ক্রোমা সহ।

html {
  /* ... */
  --accent-color: var(--triadic-color-primary);
  --highlight-color: var(--triadic-color-secondary);
}

  html {
    /* Input color in the rgb color space*/
    --base-color: teal;

     /* Output color in oklch. Computes to oklch(0.543123 0.0927099 314.769) */
     --triadic-color-primary: oklch(from var(--base-color) l c calc(h + 120));
  }

একটি পরিপূরক রঙ রঙের কোণে ১৮০ ডিগ্রি যোগ করবে।

html {
  /* ... */
  --complement-color: oklch(from var(--base-color) l c calc(h + 180));
  --border-highlight: var(--complement-color);
}

আপনার UI-তে হোভার স্টেটের জন্য, আপনি একটি নির্দিষ্ট রঙের হালকা সংস্করণ আউটপুট করতে চাইতে পারেন। এর অর্থ হবে লাইটনেস চ্যানেলের মান বৃদ্ধি করা। একটি সক্রিয় স্টেটের জন্য, আপনি আলফা চ্যানেল সামঞ্জস্য করে স্বচ্ছতা যোগ করতে চাইতে পারেন, অথবা লাইটনেস চ্যানেলের মান হ্রাস করে এটিকে অন্ধকার করতে চাইতে পারেন।

html {
  /* Darken the --base-color by 15% */
  --base-color-darkened: oklch(from var(--base-color) calc(l * 0.85) c h);
  /* Assign this color a meaningful variable name */
  --action-color: var(--base-color-darkened);
  /* Lighten the --action-color by 15% */
  --action-color-light: oklch(from var(--action-color) calc(l * 1.15) c h);
  /* Darken the --action-color by 10% */
  --action-color-dark: oklch(from var(--action-color) calc(l * 0.9) c h);
}

এখানে, আমরা --base-color থেকে --action-color বের করছি, এবং এটি বোতাম এবং লিঙ্কের জন্য ব্যবহার করছি। --action-color দুটি রূপ আছে - হালকা এবং গাঢ় - যা --action-color --base-color থেকে ভিন্ন অন্য রঙের সাথে তুলনা করলেও প্রযোজ্য হবে।

আপনি calc() এর মতো একটি গণিত ফাংশন ব্যবহার করে অথবা সম্পূর্ণরূপে একটি নতুন মান দিয়ে চ্যানেলটি প্রতিস্থাপন করে চ্যানেলগুলি সামঞ্জস্য করতে পারেন। অপরিবর্তিত চ্যানেলগুলিকে তাদের নিজ নিজ অক্ষর দ্বারা প্রতিনিধিত্ব করা হয় (উদাহরণস্বরূপ, অপরিবর্তিত হালকা মানের জন্য l )।

color-mix() এর সাথে রঙ মিশ্রিত করুন

অন্যান্য রঙের ধরণগুলির জন্য, আপনি একই পদ্ধতি গ্রহণ করতে পারেন এবং --base-color কাস্টম প্রোপার্টির অন্যান্য চ্যানেলগুলি সামঞ্জস্য করতে পারেন। অথবা আপনার ডিজাইনের অন্যান্য দিকগুলিতে বেস রঙের ইঙ্গিত যোগ করতে color-mix() ব্যবহার করুন।

--border-color হল বেস কালার এবং নামক grey রঙের মিশ্রণ, যা oklab কালার স্পেসে ইন্টারপোলেট করা হয়। যখন কালার ইন্টারপোলেশন পদ্ধতি হিসেবে ব্যবহার করা হয়, তখন এটি উপলব্ধিযোগ্যভাবে অভিন্ন ফলাফল প্রদান করে।

html {
  --base-mix-grey-50: color-mix(in oklab, var(--base-color), grey);
  --border-color: var(--base-mix-grey-50);
}

ডিফল্টরূপে, এটি প্রতিটি রঙের ৫০% হবে, তবে আপনি এর শতাংশের ওজন সামঞ্জস্য করে যেকোনো রঙকে কম বা বেশি বিশিষ্ট করতে পারেন।

html {
  --background-mix-base-80: color-mix(in oklab,
    var(--background-color) 80%,
    var(--base-color));
  --surface-light: var(--background-mix-base-80);
}

কোনও উপাদানে আরও রঙ যোগ করার বিকল্প হল আপেক্ষিক রঙের সিনট্যাক্স ব্যবহার করে এর ক্রোমা চ্যানেল সামঞ্জস্য করা। ফোকাসে থাকা অবস্থায় কন্টাক্ট ফর্মের টেক্সট ইনপুটগুলির সীমানা কিছুটা বেশি রঙিন থাকে।

[data-input*="text"] {
  --focus-ring: transparent;
  /* ... */
  &:focus {
    --focus-ring: oklch(from var(--border-color) l calc(c + 0.1) h);
  }
}

হালকা এবং অন্ধকার মোড বেছে নিন

একবার আপনার কাছে কাজ করার জন্য রঙের একটি সেট হয়ে গেলে, আপনি হালকা এবং গাঢ় মোডের জন্য বিভিন্ন রঙ প্রয়োগ করার একটি কার্যকর উপায় চাইবেন।

color-scheme বৈশিষ্ট্যের সাহায্যে হালকা এবং গাঢ় থিমের জন্য সিগন্যাল সমর্থন

color-scheme প্রোপার্টি ব্যবহার করে আপনি তাৎক্ষণিকভাবে ব্রাউজারকে বলতে পারবেন যে আপনার সাইটটি "হালকা", "অন্ধকার", অথবা উভয় মোডে দেখা যাবে। এই প্রোপার্টি ব্রাউজারকে বলে দেয় কোন রঙের স্কিমে কোন এলিমেন্টটি আরামে রেন্ডার করা যেতে পারে।

 html {
   color-scheme: light dark;
}

:root সিউডো-এলিমেন্ট অথবা html এলিমেন্টে color-scheme: light dark সেট করা হচ্ছে:

• ব্রাউজারকে বলে যে আপনার পৃষ্ঠাটি হালকা বা অন্ধকার মোডে দেখা সমর্থন করে।
• সংশ্লিষ্ট অপারেটিং সিস্টেম সেটিংসের সাথে মেলে ব্রাউজার ইউজার ইন্টারফেসের ডিফল্ট রঙ পরিবর্তন করে।

আপনার পৃষ্ঠাটি হালকা এবং অন্ধকার মোড সমর্থন করে তা ব্যবহারকারী এজেন্টদের আগে থেকেই জানানোর জন্য, আপনি ডকুমেন্টের <head> এ একটি <meta> উপাদান যোগ করে রঙের স্কিম পরিবর্তনের জন্য সমর্থন সংকেত দিতে পারেন।

<head>
  <!-- ... -->
   <meta name="color-scheme" content="light dark">
</head>

light-dark() ফাংশন ব্যবহার করে "light" এবং "dark" ভেরিয়েন্ট সেট করুন।

একজন লেখক হিসেবে, আপনি হয়তো prefers-color-scheme @media কোয়েরি দিয়ে একটি পৃষ্ঠার রঙ সেট করতে অভ্যস্ত।

@media (prefers-color-scheme: light) {
  html {
    --background-color: oklch(95.5% 0 162);
    --text-color: black;
  }
}

@media (prefers-color-scheme: dark) {
  html {
    --background-color: oklch(22.635% 0.01351 291.83);
    --text-color: white;
  }
}

এটি লেখক দ্বারা নিয়ন্ত্রিত রঙ এবং শৈলীর জন্য দুর্দান্ত কাজ করে, তবে পূর্ববর্তী বিভাগে যেমন উল্লেখ করা হয়েছে, ব্রাউজার UI এর রঙ আপডেট করার জন্য আপনার এখনও color-scheme প্রয়োজন হবে।

prefers-color-scheme কোয়েরি দিয়ে পৃষ্ঠার রঙ পরিবর্তন করলে কিছু কোড ডুপ্লিকেশনও হতে পারে কারণ আপনাকে প্রতিটি মোডের জন্য আলাদাভাবে রঙ নির্ধারণ করতে হবে।

সামগ্রিক পৃষ্ঠায় (অথবা নির্দিষ্ট উপাদানগুলিতে) color-scheme সেট করা থাকলে, আপনি কোডের এক লাইনে প্রতিটি মোডের জন্য রঙ সেট করতে light-dark() ফাংশন ব্যবহার করতে পারেন।

ফাংশনটি দুটি রঙ গ্রহণ করে। প্রথমটি ব্যবহৃত হয় যখন রঙের স্কিম "হালকা" তে সেট করা হয়, এবং দ্বিতীয়টি ব্যবহৃত হয় যখন রঙের স্কিম "অন্ধকার" তে সেট করা হয়।

html {
  color-scheme: light dark;
  /* Color custom property values for both light and dark modes */
  --base-color: light-dark(oklch(43.7% 0.075 224), oklch(89.2% 0.069 224));
  --background-color: light-dark(oklch(95.5% 0 162), oklch(22.635% 0.01351 291.83));
  --accent-color: oklch(from var(--base-color) l c calc(h + 120));
  --active-color: light-dark(var(--action-color-light), var(--action-color-dark));
  /* ... */
}

যেকোনো কাস্টম প্রপার্টির মতো, আপনার রঙের জন্য light-dark() সেটিংস বিশ্বব্যাপী বা নির্দিষ্ট উপাদানের মধ্যে সেট করা যেতে পারে এবং তারপর প্রয়োজন অনুসারে অন্য কোথাও ব্যবহার করা যেতে পারে।

/* custom property usage */
body {
  background-color: var(--background-color);
  /* ... */
}

:any-link {
  /* ... */
  text-decoration-color: var(--accent-color);
}

বিল্ট-ইন থিম সুইচারের মাধ্যমে ব্যবহারকারীদের নিয়ন্ত্রণ দিন

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

যদি আপনি এমন একটি থিম টগল তৈরি করেন যা <html> এলিমেন্টের data-scheme অ্যাট্রিবিউট আপডেট করে, তাহলে আপনি CSS দিয়ে color-scheme পরিবর্তন করতে একই অ্যাট্রিবিউট ব্যবহার করতে পারেন।

html {
  color-scheme: light dark;

  &[data-scheme="light"] {
    color-scheme: light;
  }

  &[data-scheme="dark"] {
    color-scheme: dark;
  }

  &[data-scheme="green"] {
      --base-color-light: oklch(48.052% 0.11875 151.945);
      --base-color-dark: oklch(92.124% 0.13356 151.558);
      color-scheme: light dark;
   }
}

data-scheme="light" এবং data-scheme="dark" পৃষ্ঠাটি শুধুমাত্র তাদের নিজ নিজ রঙের মোডে দেখায়। data-scheme="green" উভয় মোডেই দেখা যাবে এবং --base-color কে সবুজ রঙে পরিবর্তন করে, যা আপনাকে সম্পূর্ণ নতুন প্যালেট দেয় কারণ বেশিরভাগ অন্যান্য রঙ --base-color উপর ভিত্তি করে তৈরি।

@property দিয়ে কাস্টম প্রপার্টি নিবন্ধন করুন

এখন পর্যন্ত, ডেমোতে রঙগুলিকে স্ট্যান্ডার্ড কাস্টম বৈশিষ্ট্য হিসেবে সেট করা হয়েছে। টাইপ চেকিংয়ের সুবিধাগুলি উপভোগ করতে আপনি @property নিয়ম ব্যবহার করে বৈশিষ্ট্যগুলি নিবন্ধন করতে পারেন।

যেহেতু --base-color ইন্টারফেসের অন্যান্য অনেক রঙের ভিত্তি হিসেবে ব্যবহৃত হয়, তাই এটি নিশ্চিত করা ভালো হতে পারে যে এটি সর্বদা একটি রঙ এবং এর একটি ফলব্যাক মান রয়েছে।

@property --base-color-light {
  syntax: '<color>';
  inherits: false;
  initial-value: oklch(43.7% 0.075 224);
}

@property --base-color-dark {
  syntax: '<color>';
  inherits: false;
  initial-value: oklch(89.2% 0.069 224);
}

html {
  --base-color: light-dark(var(--base-color-light), var(--base-color-dark));
}

এইভাবে, যদি --base-color অসাবধানতাবশত একটি অবৈধ মান পরিবর্তন করা হয়, তাহলে এটি সর্বদা @property নিয়মের সাহায্যে তার initial-value সেটে ফিরে যাবে।

এইভাবে নির্দিষ্ট কিছু বৈশিষ্ট্য নিবন্ধন করলে linear-gradient() তে রঙগুলিকে মসৃণভাবে অ্যানিমেট করা সম্ভব হয়।

.main-heading {
  background: linear-gradient(in oklch 90deg, var(--text-color) 50%, oklch(from var(--base-color) l c var(--header-hue)));
  background-clip: text;
  color: transparent;
  animation: header-hue-switch 5s ease-in-out infinite alternate;
}

.main-heading একটি linear-gradient() ব্যাকগ্রাউন্ড আছে যা background-clip প্রোপার্টি সহ স্বচ্ছ টেক্সটের মাধ্যমে দেখানো হয়।

লেখার একটি অংশে এমন একটি hue দেখানো হয়েছে যা আপেক্ষিক রঙের সিনট্যাক্স ব্যবহার করে 26.67 থেকে 277 এর চ্যানেল মান থেকে অ্যানিমেট করে:

@keyframes header-hue-switch {
  from {
    --header-hue: 26.67;
  }

  to {
    --header-hue: 277;
  }
}

একটি নিবন্ধিত --header-hue কাস্টম প্রপার্টি ব্যবহার করে, এই অ্যানিমেশনটি সহজেই করা সম্ভব কারণ ব্রাউজার জানে যে এই কাস্টম প্রপার্টিটি একটি সংখ্যা।

@property --header-hue {
  syntax: '<number>';
  inherits: false;
  initial-value: 100;
}

একটি অনিবন্ধিত কাস্টম সম্পত্তির সাথে, ব্রাউজার --header-hue এর ডেটা টাইপ জানতে পারবে না, তাই একটি সংখ্যায় রূপান্তর একটি বিচ্ছিন্ন অ্যানিমেশন হবে, যা ধীরে ধীরে ইন্টারপোলেশন ছাড়াই রাজ্যগুলির মধ্যে লাফিয়ে লাফিয়ে যাবে।

শেষ করা

নতুন বেসলাইন টুলগুলি আপনাকে দ্রুত একটি সামঞ্জস্যযোগ্য রঙের প্যালেট তৈরি করতে এবং রঙের ভেরিয়েবল তৈরিকে আরও দক্ষ প্রক্রিয়া করতে সাহায্য করতে পারে। তবে, আপনাকে এখনও অফুরন্ত রঙের বিকল্প এবং সংমিশ্রণগুলির জন্য নিজেকে কষ্ট করতে হবে।

এভাবে গতিশীলভাবে আপনার প্যালেট তৈরি করলে আপনি নমনীয়তা পাবেন। ব্র্যান্ডিংয়ের জন্য যদি আপনার বেস রঙ পরিবর্তন করার প্রয়োজন হয়, তাহলে আপনি কেবল --base-color আপডেট করতে পারেন, এবং বাকি থিমটি সেখান থেকে প্রবাহিত হবে। অথবা, যদি আপনি সঙ্গীত প্লেব্যাক ক্ষমতা যোগ করেন, তাহলে আপনি সিদ্ধান্ত নিতে পারেন যে আপনি বর্তমানে বাজানো গানের সাথে মেলে বেস রঙটি গতিশীলভাবে পরিবর্তন করতে চান।

ক্রেডিট

থিম সুইচার লজিক অ্যাডাম আরগাইলের থিম সুইচ কম্পোনেন্ট থেকে অভিযোজিত।