এই পৃষ্ঠাটি Cloud Translation API অনুবাদ করেছে।

একটি রং স্কিম নির্মাণ

একটি গতিশীল এবং কনফিগারযোগ্য রঙের স্কিম কীভাবে স্থাপন করা যায় তার একটি মৌলিক সারসংক্ষেপ

Adam Argyle

এই পোস্টে আমি CSS-এ একাধিক রঙের স্কিম পরিচালনা করার উপায় সম্পর্কে চিন্তাভাবনা শেয়ার করতে চাই। ডেমোটি চেষ্টা করে দেখুন ।

ডেমো

যদি আপনি ভিডিও পছন্দ করেন, তাহলে এই পোস্টের একটি ইউটিউব সংস্করণ এখানে দেওয়া হল:

সংক্ষিপ্ত বিবরণ

আমরা কাস্টম প্রোপার্টি এবং calc() দিয়ে একটি অ্যাক্সেসযোগ্য কালার সিস্টেম তৈরি করব, যাতে ব্যবহারকারীর পছন্দের সাথে খাপ খাইয়ে এমন একটি ওয়েবপৃষ্ঠা তৈরি করা যায় এবং লেখকের অভিজ্ঞতা ন্যূনতম রাখা যায়। আমরা একটি বেস ব্র্যান্ড কালার দিয়ে শুরু করি এবং এর থেকে বিভিন্ন ধরণের একটি সিস্টেম তৈরি করি: 2টি টেক্সট কালার, 4টি সারফেস কালার এবং একটি ম্যাচিং শ্যাডো।

এই নির্দেশিকাটি প্রতিটি রঙের স্কিমের জন্য সমস্ত রঙের সংজ্ঞা দিয়ে শুরু হয়। একেবারে শেষ পর্যন্ত পৃষ্ঠা পরিবর্তন করার জন্য এগুলি ব্যবহার করা হয় না।

ব্র্যান্ড

প্রায়শই, একটি ব্র্যান্ড রঙ ইতিমধ্যেই প্রতিষ্ঠিত হয়ে থাকে এবং হেক্স বা rgb হিসাবে সরবরাহ করা হয়। এই GUI চ্যালেঞ্জের একটি বেস ব্র্যান্ড রঙ #0af । প্রথমত, এই রঙ সিস্টেমের জন্য, হেক্স মান hsl এ রূপান্তরিত করতে হবে।

* {
  --brand: #0af;
  --brand: hsl(200 100% 50%);
}

ব্র্যান্ডের রঙকে গাঢ় বা হালকা করার ধারণাটি সক্ষম করার জন্য, ধরা যাক ২০%, hsl রঙের মানের ৩টি চ্যানেলকে তাদের নিজস্ব কাস্টম বৈশিষ্ট্যে নিষ্কাশন করতে হবে, যেমন:

* {
  --brand-hue: 200;
  --brand-saturation: 100%;
  --brand-lightness: 50%;
}

CSS সেই রঙের বৈশিষ্ট্যগুলির উপর গণিত করতে পারে, উদাহরণস্বরূপ calc(var(--brand-lightness) - 20%) যাতে হালকাতার মান 20% কমানো যায়। এটি একটি রঙের স্কিম তৈরির ভিত্তি কারণ CSS hsl স্যাচুরেশন এবং হালকাতার পরিমাণ সামঞ্জস্য করে সমস্ত রঙকে একই রঙের পরিবারে রাখতে পারে।

হালকা থিম

প্রতিটি রঙের ধরণ তার মিলিত স্কিম দিয়ে চিহ্নিত করা হবে, এই ক্ষেত্রে, প্রতিটির সাথে -light যুক্ত করা হবে।

হালকা থিমের শেষ ফলাফলের প্রিভিউ

ব্র্যান্ড

ব্র্যান্ডের রঙ দিয়ে শুরু করে, এটি hsl () ফাংশন বন্ধনীর ভিতরে --brand-hue , --brand-saturation এবং --brand-lightness কাস্টম বৈশিষ্ট্যগুলি মোড়ানোর মাধ্যমে পুনর্নির্মাণ করা হয়, কোনও গণনা ছাড়াই:

* {
  --brand-light: hsl(var(--brand-hue) var(--brand-saturation) var(--brand-lightness));
}

টেক্সটের রঙ

এরপর, রঙের স্কিমের অপরিহার্য উপাদানগুলির জন্য টেক্সট রঙের প্রয়োজন। হালকা থিমে, টেক্সট খুব গাঢ় হওয়া উচিত। লক্ষ্য করুন কিভাবে নিচের রঙগুলির হালকাতা কম, ৫০% এরও কম।

* {
  --text1-light: hsl(var(--brand-hue) var(--brand-saturation) 10%);
  --text2-light: hsl(var(--brand-hue) 30% 30%);
}

--text1-light , যেহেতু এটি ১০% হালকা হলে খুবই গাঢ়, তাই এটি ১০০% স্যাচুরেশন ধরে রাখে যাতে ব্র্যান্ডের রঙটি এখনও গাঢ় গাঢ় নেভির মধ্যে উঁকি দিতে পারে।

--text2-light , এটি প্রথম রঙের মতো গাঢ় নয়, যা ভালো কারণ এটি একটি গৌণ রঙ, এবং এটি অনেক কম স্যাচুরেটেডও।

পৃষ্ঠের রঙ

পৃষ্ঠের রঙ হল ব্যাকগ্রাউন্ড, বর্ডার এবং অন্যান্য সাজসজ্জার পৃষ্ঠ যেখানে টেক্সট থাকে বা থাকে। হালকা থিমে, এগুলি হল হালকা রঙ, টেক্সটের রঙগুলির বিপরীতে যা গাঢ় ছিল। hsl ব্যবহার করে হালকা রঙ তৈরি করতে, আমরা তৃতীয় হালকা মানের উচ্চ শতাংশ মান ব্যবহার করব। আমরা স্যাচুরেশনও কমিয়ে দেব, যাতে হালকা ধূসর রঙ খুব বেশি রঙিন না দেখায়।

* {
  --surface1-light: hsl(var(--brand-hue) 25% 90%);
  --surface2-light: hsl(var(--brand-hue) 20% 99%);
  --surface3-light: hsl(var(--brand-hue) 20% 92%);
  --surface4-light: hsl(var(--brand-hue) 20% 85%);
}

৪টি পৃষ্ঠের রঙ তৈরি করা হয়েছে কারণ সাজসজ্জার রঙগুলিতে আরও বৈচিত্র্যের প্রয়োজন হয়, যেমন :focus বা :hover মতো ইন্টারেক্টিভ মুহূর্তগুলির জন্য অথবা কাগজের স্তরের চেহারা তৈরি করার জন্য। এই পরিস্থিতিতে, --surface2-light hover-এ --surface3-light এ রূপান্তর করা ভালো, তাই একটি hover-এর ফলে বৈসাদৃশ্য বৃদ্ধি পায় (৯৯% হালকাতা থেকে ৯২% হালকাতা; এটিকে আরও গাঢ় করে তোলে)।

ছায়া

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

* {
  --surface-shadow-light: var(--brand-hue) 10% 20%;
  --shadow-strength-light: .02;
}

--surface-shadow-light কোন hsl ফাংশনে মোড়ানো হয় না। এর কারণ হল --shadow-strength মানটি কিছু অস্বচ্ছতা তৈরি করতে একত্রিত হবে এবং CSS-এর গণনা সম্পাদনের জন্য এই অংশগুলির প্রয়োজন হবে। আরও জানতে rad shadow বিভাগে যান।

হালকা রঙ একসাথে

হালকা রঙগুলি কীভাবে তৈরি হয় তা খুঁজে বের করার জন্য আশেপাশে খোঁজ করার দরকার নেই, CSS-এ সব এক জায়গায় রয়েছে।

* {
  --brand-light: hsl(var(--brand-hue) var(--brand-saturation) var(--brand-lightness));
  --text1-light: hsl(var(--brand-hue) var(--brand-saturation) 10%);
  --text2-light: hsl(var(--brand-hue) 30% 30%);
  --surface1-light: hsl(var(--brand-hue) 25% 90%);
  --surface2-light: hsl(var(--brand-hue) 20% 99%);
  --surface3-light: hsl(var(--brand-hue) 20% 92%);
  --surface4-light: hsl(var(--brand-hue) 20% 85%);
  --surface-shadow-light: var(--brand-hue) 10% calc(var(--brand-lightness) / 5);
  --shadow-strength-light: .02;
}

হালকা রঙের একসাথে স্ক্রিনশট — কোডপেনে স্যান্ডবক্স

গাঢ় থিম

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

এই থিমটি ব্যবহার করার সময় ব্যবহারকারীরা সাধারণত অন্ধকারে থাকবেন, তাই অন্ধকারে পরীক্ষা করুন।
অতিরিক্ত তীব্রতার কারণে রঙগুলি ডিস্যাচুরেটেড হওয়া উচিত যাতে স্ক্রিনে কম্পন না হয়।

ডার্ক থিমের শেষ ফলাফলের পূর্বরূপ

ব্র্যান্ড

হালকা থিমে ৩টি ব্র্যান্ডের এইচএসএল কালার চ্যানেলের মান পরিবর্তন ছাড়াই ব্যবহার করা হয়েছে, ডার্ক থিমে তা করা হয়নি। স্যাচুরেশন অর্ধেক করা হয়েছে এবং হালকাতা আপেক্ষিক ৫০% কমানো হয়েছে।

* {
  --brand-dark: hsl(
    var(--brand-hue)
    calc(var(--brand-saturation) / 2)
    calc(var(--brand-lightness) / 1.5)
  );
}

টেক্সটের রঙ

গাঢ় থিমে, টেক্সটের রঙ হালকা হওয়া উচিত। নিম্নলিখিত রঙগুলির হালকাতার জন্য উচ্চ মান রয়েছে, যা এগুলিকে সাদা রঙের কাছাকাছি রাখে।

* {
  --text1-dark: hsl(var(--brand-hue) 15% 85%);
  --text2-dark: hsl(var(--brand-hue) 5% 65%);
}

পৃষ্ঠের রঙ

গাঢ় থিমে, পৃষ্ঠের রঙ গাঢ় হওয়া উচিত। নিম্নলিখিত রঙগুলির হালকাতা এবং স্যাচুরেশন কম, প্রথম পৃষ্ঠটি ১০%-এ সবচেয়ে গাঢ়।

* {
  --surface1-dark: hsl(var(--brand-hue) 10% 10%);
  --surface2-dark: hsl(var(--brand-hue) 10% 15%);
  --surface3-dark: hsl(var(--brand-hue) 5%  20%);
  --surface4-dark: hsl(var(--brand-hue) 5% 25%);
}

ছায়া

অন্ধকার থিমে, ছায়া দেখা খুব কঠিন হতে পারে। এটি যুক্তিসঙ্গত কারণ ইতিমধ্যেই বেশ অন্ধকার কিছুকে অন্ধকার করা কঠিন। এখানে --shadow-strength-dark খুব কার্যকর কারণ এটি আমাদের একটি পরিবর্তনশীল পরিবর্তন করে ছায়াগুলিকে অন্ধকার করতে দেয়।

* {
  --surface-shadow-dark: var(--brand-hue) 50% 3%;
  --shadow-strength-dark: .8;
}

আর, দেখো, ওই ছায়ায় কতটা স্যাচুরেশন আছে। ইন্টারফেসের দিকে তাকিয়ে রঙটা কি তুমি লক্ষ্য করতে পারছো? devtools থেকে স্যাচুরেশনটা মুছে ফেলার চেষ্টা করো, তুমি কোনটা পছন্দ করো?!

গাঢ় রঙগুলো একসাথে

* {
  --brand-dark: hsl(var(--brand-hue) calc(var(--brand-saturation) / 2) calc(var(--brand-lightness) / 1.5));
  --text1-dark: hsl(var(--brand-hue) 15% 85%);
  --text2-dark: hsl(var(--brand-hue) 5% 65%);
  --surface1-dark: hsl(var(--brand-hue) 10% 10%);
  --surface2-dark: hsl(var(--brand-hue) 10% 15%);
  --surface3-dark: hsl(var(--brand-hue) 5%  20%);
  --surface4-dark: hsl(var(--brand-hue) 5% 25%);
  --surface-shadow-dark: var(--brand-hue) 50% 3%;
  --shadow-strength-dark: .8;
}

গাঢ় রঙের সবগুলো একসাথে স্ক্রিনশট — কোডপেনে স্যান্ডবক্স

আবছা থিম

এই রঙের স্কিমটি মূলত হালকাতা এবং স্যাচুরেশনকে সুসংগঠিত করার জন্য তৈরি। রঙটি দৃশ্যমান হওয়ার জন্য পর্যাপ্ত স্যাচুরেশন থাকা উচিত, তবে এটি কনট্রাস্ট স্কোরগুলিকে খুব কমই অতিক্রম করবে কারণ এটি যাইহোক আবছা এবং কম কনট্রাস্টের জন্য তৈরি।

ডিম থিম থেকে শেষ ফলাফলের পূর্বরূপ

ব্র্যান্ড

* {
  --brand-dim: hsl(
    var(--brand-hue)
    calc(var(--brand-saturation) / 1.25)
    calc(var(--brand-lightness) / 1.25)
  );
}

টেক্সটের রঙ

* {
  --text1-dim: hsl(var(--brand-hue) 15% 75%);
  --text2-dim: hsl(var(--brand-hue) 10% 61%);
}

পৃষ্ঠের রঙ

* {
  --surface1-dim: hsl(var(--brand-hue) 10% 20%);
  --surface2-dim: hsl(var(--brand-hue) 10% 25%);
  --surface3-dim: hsl(var(--brand-hue) 5%  30%);
  --surface4-dim: hsl(var(--brand-hue) 5% 35%);
}

ছায়া

* {
  --surface-shadow-dim: var(--brand-hue) 30% 13%;
  --shadow-strength-dim: .2;
}

সব মিলিয়ে ম্লান রঙ

* {
  --brand-dim: hsl(var(--brand-hue) calc(var(--brand-saturation) / 1.25) calc(var(--brand-lightness) / 1.25));
  --text1-dim: hsl(var(--brand-hue) 15% 75%);
  --text2-dim: hsl(var(--brand-hue) 10% 61%);
  --surface1-dim: hsl(var(--brand-hue) 10% 20%);
  --surface2-dim: hsl(var(--brand-hue) 10% 25%);
  --surface3-dim: hsl(var(--brand-hue) 5%  30%);
  --surface4-dim: hsl(var(--brand-hue) 5% 35%);
  --surface-shadow-dim: var(--brand-hue) 30% 13%;
  --shadow-strength-dim: .2;
}

একসাথে আবছা রঙের স্ক্রিনশট — কোডপেনে স্যান্ডবক্স

অ্যাক্সেসযোগ্য রঙ

লক্ষ্য করুন কিভাবে গাঢ় টেক্সট রঙের সেটে সর্বনিম্ন হালকাতা ৬৫% এবং অন্ধকার পৃষ্ঠের সর্বোচ্চ হালকাতা ২৫%। অর্থাৎ তাদের মধ্যে ৪০% হালকাতা শ্বাস-প্রশ্বাসের জায়গা। হালকা থিমে, হালকা থিমে ৫৫% শ্বাস-প্রশ্বাসের জায়গা থাকে। টেক্সট এবং পৃষ্ঠের রঙের মধ্যে হালকাতার পার্থক্য প্রায় ৪০-৫০% রাখলে রঙের বৈপরীত্য অনুপাত বেশি রাখা সম্ভব, এবং স্কোর খারাপ হলে সামঞ্জস্য করার জন্য এটি একটি সূক্ষ্ম লিভারও হতে পারে।

আমি এটাকে "বাম্প বাম্প টিল ইয়া পাস" বলি, যা হল হালকাতার মানকে বাম্প করার মিথস্ক্রিয়া যতক্ষণ না একটি টুল দেখায় যে আমি পাস করছি।

shift + down arrow টিপে হালকাতা কমানো এবং কনট্রাস্ট বৃদ্ধি করা হয় যতক্ষণ না পাস হয়

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

.surface1 {
  background-color: var(--surface1);
  color: var(--text2);
}

.surface2 {
  background-color: var(--surface2);
  color: var(--text2);
}

.surface3 {
  background-color: var(--surface3);
  color: var(--text1);
}

.surface4 {
  background-color: var(--surface4);
  color: var(--text1);
}

ভিসবাগের সাথে আবছা পৃষ্ঠ এবং টেক্সট জোড়ার স্ক্রিনশট

র‍্যাড শ্যাডো

থিমগুলিতে .rad-shadow নামক একটি ইউটিলিটি ক্লাস ব্যবহার করা হয়েছে। এই ছায়াটি এই Smooth Shadow টুল থেকে তৈরি করা হয়েছে, যা আমি খুব পছন্দ করি। আমি এর তৈরি স্নিপেটটি নিয়েছি এবং আমার নিজস্ব রঙ এবং অস্বচ্ছতা গণনার মাধ্যমে এটি কাস্টমাইজ করেছি। এর কারণ ছিল এমন একটি ছায়া তৈরি করা যা আমি প্রতিটি রঙের স্কিমের মধ্যে সামঞ্জস্য করতে পারি।

একে অপরের পাশে প্রতিটি ছায়া

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

:root {
  --surface-shadow-light: var(--brand-hue) 10% 20%;
  --shadow-strength-light: .02;
}

.rad-shadow {
  box-shadow:
    0 2.8px 2.2px hsl(var(--surface-shadow) / calc(var(--shadow-strength) + .03)),
    0 6.7px 5.3px hsl(var(--surface-shadow) / calc(var(--shadow-strength) + .01)),
    0 12.5px 10px hsl(var(--surface-shadow) / calc(var(--shadow-strength) + .02)),
    0 22.3px 17.9px hsl(var(--surface-shadow) / calc(var(--shadow-strength) + .02)),
    0 41.8px 33.4px hsl(var(--surface-shadow) / calc(var(--shadow-strength) + .03)),
    0 100px 80px hsl(var(--surface-shadow) / var(--shadow-strength))
  ;
}

যদি আমি আমার রঙের স্কিমে ছায়া নিয়ে আরও এগিয়ে যাই, তাহলে আমি ছায়ার কোণগুলিকেও একটি নকশার ধ্রুবক হিসেবে ব্যবহার করব, কারণ নকশার সমস্ত ছায়ার মধ্যে আলোর দিক একই হওয়া উচিত।

রঙের স্কিম ব্যবহার

রঙের পূর্বনির্ধারণ সম্পন্ন হওয়ার পর, এখন সময় এসেছে সেগুলোকে স্কিম অ্যাগনস্টিক প্রোপার্টিতে রূপান্তর করার। আমি বলতে চাইছি, এই কালার স্কিম প্রজেক্টের একজন CSS লেখক হিসেবে, খুব কমই একজনের নির্দিষ্ট কালার স্কিমের মান অ্যাক্সেস করার প্রয়োজন হবে। আমি থিমের মধ্যে থাকা সহজ করে তুলতে চাই।

এটি সম্পন্ন করার জন্য, রঙের স্কিমের ব্যবহার কেবলমাত্র জেনেরিক কাস্টম বৈশিষ্ট্যের মাধ্যমে করা উচিত, যা আমরা কিছুক্ষণের মধ্যে সংজ্ঞায়িত করব। এইভাবে, ডিজাইন ভেরিয়েবল ব্যবহারকারীদের কখনই কোন রঙের স্কিমের সেট করা আছে তা নিয়ে চিন্তা করতে হবে না, তাদের কেবল পৃষ্ঠ এবং টেক্সট রঙ ব্যবহার করতে হবে। color: var(--text1-light) এর পরিবর্তে color: var(--text1) ব্যবহার করুন। রঙের সমস্ত অভিযোজন এবং পিভটিং CSS-এ অনেক উচ্চ স্তরে করা হয়।

নিচের কোড ব্লকে হালকা থিমের সংযোগকারী শৈলীতে ডুব দিয়ে, হালকা থিমের নির্দিষ্ট রঙের সাথে একটি জেনেরিক কাস্টম প্রপার্টি সংযুক্ত করুন। এখন var(--brand) এর সকল ব্যবহার হালকা ব্র্যান্ডের রঙ ব্যবহার করবে।

হালকা থিম (স্বয়ংক্রিয়)

:root {
  color-scheme: light;
  --brand: var(--brand-light);
  --text1: var(--text1-light);
  --text2: var(--text2-light);
  --surface1: var(--surface1-light);
  --surface2: var(--surface2-light);
  --surface3: var(--surface3-light);
  --surface4: var(--surface4-light);
  --surface-shadow: var(--surface-shadow-light);
  --shadow-strength: var(--shadow-strength-light);
}

সাইটটি এখন হালকা থিম ব্যবহার করছে। এটি একটি খুব মজার সফল মুহূর্ত! আসুন আমরা অন্যান্য রঙের স্কিম প্রসঙ্গে আমাদের পূর্বনির্ধারিত রঙগুলি ব্যবহার করার সময় সেই মুহূর্তগুলির আরও কিছু উপভোগ করি।

গাঢ় থিম (স্বয়ংক্রিয়)

@media (prefers-color-scheme: dark) {
  :root {
    color-scheme: dark;

    --brand: var(--brand-dark);
    --text1: var(--text1-dark);
    --text2: var(--text2-dark);
    --surface1: var(--surface1-dark);
    --surface2: var(--surface2-dark);
    --surface3: var(--surface3-dark);
    --surface4: var(--surface4-dark);
    --surface-shadow: var(--surface-shadow-dark);
    --shadow-strength: var(--shadow-strength-dark);
  }
}

হালকা থিম

[color-scheme="light"] {
  color-scheme: light;

  --brand: var(--brand-light);
  --text1: var(--text1-light);
  --text2: var(--text2-light);
  --surface1: var(--surface1-light);
  --surface2: var(--surface2-light);
  --surface3: var(--surface3-light);
  --surface4: var(--surface4-light);
  --surface-shadow: var(--surface-shadow-light);
  --shadow-strength: var(--shadow-strength-light);
}

গাঢ় থিম

[color-scheme="dark"] {
  color-scheme: dark;

  --brand: var(--brand-dark);
  --text1: var(--text1-dark);
  --text2: var(--text2-dark);
  --surface1: var(--surface1-dark);
  --surface2: var(--surface2-dark);
  --surface3: var(--surface3-dark);
  --surface4: var(--surface4-dark);
  --surface-shadow: var(--surface-shadow-dark);
  --shadow-strength: var(--shadow-strength-dark);
}

আবছা থিম

[color-scheme="dim"] {
  color-scheme: dark;

  --brand: var(--brand-dim);
  --text1: var(--text1-dim);
  --text2: var(--text2-dim);
  --surface1: var(--surface1-dim);
  --surface2: var(--surface2-dim);
  --surface3: var(--surface3-dim);
  --surface4: var(--surface4-dim);
  --surface-shadow: var(--surface-shadow-dim);
  --shadow-strength: var(--shadow-strength-dim);
}

এই মুহুর্তে, লেখকরা প্রয়োজন অনুসারে প্রদত্ত রঙিন স্কিমের জেনেরিক ব্যবহার করতে স্বাধীন, এবং তাদের আর কখনও থিম নিয়ে চিন্তা করতে হবে না।

উপসংহার

এখন তুমি জানো আমি এটা কিভাবে করেছি, তুমি কিভাবে করবে?! 🙂

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

উৎস

কমিউনিটি রিমিক্স - @chris-kruining একটি হিউ স্লাইডার, স্ট্যাটাস কালার এবং কন্ট্রাস্ট মোড যোগ করেছে less no-preference জন্য, more : ডেমো ।