আগের পর্বে আমরা Flexbox দিয়ে বাস্তব লেআউট প্যাটার্ন সমাধান করেছিলাম। এই পর্বে আমরা দেখব CSS Custom Properties (CSS Variables) — যেটা দিয়ে লাইট/ডার্ক মোডের মতো ডাইনামিক থিমিং সিস্টেম বানানো যায়, কোনো JavaScript ফ্রেমওয়ার্ক ছাড়াই।
CSS Custom Properties কী?
আগে আমরা SCSS ভ্যারিয়েবল ($primary-color) শিখেছিলাম — কিন্তু সেগুলো কম্পাইল-টাইমে ঠিক হয়ে যায়, ব্রাউজারে রানটাইমে পাল্টানো যায় না। CSS Custom Properties (--variable) সম্পূর্ণ ভিন্ন — এগুলো ব্রাউজারেই বাস্তবে বেঁচে থাকে, তাই JavaScript দিয়ে রানটাইমে পাল্টানো যায়।
| বৈশিষ্ট্য | SCSS ভ্যারিয়েবল ($x) | CSS Custom Property (--x) |
|---|---|---|
| কখন ঠিক হয় | কম্পাইল-টাইমে (একবার) | রানটাইমে (যেকোনো সময়) |
| JS দিয়ে পাল্টানো | সম্ভব না | সম্ভব |
| ব্রাউজারে দেখা যায় | না (কম্পাইলড CSS-এ শুধু মান থাকে) | হ্যাঁ (DevTools-এ দেখা যায়) |
বেসিক সিনট্যাক্স
Custom Property ডিফাইন করতে হয় -- দিয়ে, আর ব্যবহার করতে হয় var() ফাংশন দিয়ে।
:root {
--primary-color: #2563eb;
--text-color: #111827;
--spacing: 16px;
}
.button {
background: var(--primary-color);
padding: var(--spacing);
color: white;
}
.title {
color: var(--text-color);
}
:root মানে পুরো ডকুমেন্টের সবচেয়ে উপরের লেভেল — এখানে ডিফাইন করা ভ্যারিয়েবল পুরো পেজের সব জায়গা থেকে অ্যাক্সেস করা যায়। var()-এ দ্বিতীয় আর্গুমেন্ট দিয়ে ফলব্যাক মানও দেওয়া যায়: var(--primary-color, blue) — ভ্যারিয়েবলটা না থাকলে blue ব্যবহার হবে।
থিম পাল্টানো — একটা ক্লাস দিয়ে সবকিছু বদলে যাওয়া
মূল কৌশল হলো — একটা প্যারেন্ট এলিমেন্টে (যেমন <body>) একটা ক্লাস যোগ করলে সেই স্কোপের ভেতরের সব Custom Property নতুন মান নিয়ে নেয়।
:root {
--bg-color: #ffffff;
--text-color: #111827;
--card-bg: #f9fafb;
}
body.dark-mode {
--bg-color: #0f172a;
--text-color: #f1f5f9;
--card-bg: #1e293b;
}
body {
background: var(--bg-color);
color: var(--text-color);
transition: background 0.3s, color 0.3s;
}
.card {
background: var(--card-bg);
}
এখানে কোনো নতুন CSS ক্লাস .card-এর জন্য আলাদা করে লেখার দরকার নেই — শুধু body-তে dark-mode ক্লাস যোগ করলেই পুরো পেজের রঙ বদলে যাবে।
JavaScript দিয়ে টগল করা
const toggleBtn = document.getElementById("themeToggle");
// পেজ লোড হওয়ার সময় আগের পছন্দ চেক করা (পর্ব ১-এর localStorage টেকনিক!)
const savedTheme = localStorage.getItem("theme");
if (savedTheme === "dark") {
document.body.classList.add("dark-mode");
}
toggleBtn.addEventListener("click", () => {
document.body.classList.toggle("dark-mode");
const isDark = document.body.classList.contains("dark-mode");
localStorage.setItem("theme", isDark ? "dark" : "light");
});
এখানে খেয়াল করো — Advanced HTML সিরিজের পর্ব ১-এ শেখা localStorage ব্যবহার করে থিম পছন্দ সেভ রাখা হচ্ছে, যাতে রিফ্রেশ করলেও আগের থিম মনে থাকে।
লাইভ ডেমো — লাইট/ডার্ক টগল
নিচের বাটনে চাপো — পুরো ডেমো বক্সের থিম বদলে যাবে, শুধু একটা CSS ক্লাস টগল করে।
প্রিভিউ
এই কার্ডের ব্যাকগ্রাউন্ড আর টেক্সট কালার সব Custom Property থেকে আসছে।
গণনায় ব্যবহার — calc() দিয়ে
Custom Property-কে calc()-এর সাথে মিলিয়ে ডাইনামিক হিসাব করা যায় — যেমন একটা বেস স্পেসিং থেকে সব স্পেসিং বের করা।
:root {
--spacing-unit: 8px;
}
.small-gap { gap: var(--spacing-unit); }
.medium-gap { gap: calc(var(--spacing-unit) * 2); }
.large-gap { gap: calc(var(--spacing-unit) * 4); }
SCSS ভ্যারিয়েবল আর CSS Custom Property একসাথে
দুটো একসাথেও ব্যবহার করা যায় — SCSS দিয়ে প্রথমে থিমগুলো তৈরি করে, তারপর সেগুলো CSS Custom Property হিসেবে বসিয়ে দেওয়া যায়, যাতে রানটাইমেও পাল্টানো যায়।
// SCSS দিয়ে বেস মান রাখা
$light-primary: #2563eb;
$dark-primary: #60a5fa;
:root {
--primary-color: #{$light-primary}; // #{} দিয়ে SCSS ভ্যারিয়েবলকে CSS-এ বসানো
}
body.dark-mode {
--primary-color: #{$dark-primary};
}
.button {
background: var(--primary-color); // রানটাইমে JS দিয়ে পাল্টানো যাবে
}
একটা সম্পূর্ণ উদাহরণ — মাল্টি-থিম সিস্টেম
চলো শুধু লাইট/ডার্ক না, একাধিক থিম (যেমন "ব্লু", "গ্রিন") সাপোর্ট করে এমন একটা সিস্টেম বানাই — যেমনটা ArifStack বা Pathok Ghor-এ ব্যবহারকারীর পছন্দমতো রঙ দিতে কাজে লাগতে পারে।
<!DOCTYPE html>
<html lang="bn">
<head>
<meta charset="UTF-8" />
<title>মাল্টি-থিম সিস্টেম</title>
<style>
:root {
--accent: #2563eb;
--bg: #ffffff;
--text: #111827;
}
[data-theme="green"] {
--accent: #16a34a;
--bg: #f0fdf4;
--text: #14532d;
}
[data-theme="purple"] {
--accent: #7c3aed;
--bg: #faf5ff;
--text: #4c1d95;
}
[data-theme="dark"] {
--accent: #60a5fa;
--bg: #0f172a;
--text: #f1f5f9;
}
body {
background: var(--bg);
color: var(--text);
transition: all 0.3s;
font-family: sans-serif;
}
button {
background: var(--accent);
color: white;
border: none;
padding: 8px 14px;
border-radius: 6px;
margin-right: 8px;
cursor: pointer;
}
</style>
</head>
<body>
<h1>থিম বাছাই করো</h1>
<button onclick="document.body.setAttribute('data-theme', 'default')">ডিফল্ট</button>
<button onclick="document.body.setAttribute('data-theme', 'green')">সবুজ</button>
<button onclick="document.body.setAttribute('data-theme', 'purple')">বেগুনি</button>
<button onclick="document.body.setAttribute('data-theme', 'dark')">ডার্ক</button>
</body>
</html>
এখানে ক্লাসের বদলে data-theme অ্যাট্রিবিউট ব্যবহার করা হয়েছে — এতে একসাথে একটাই থিম সক্রিয় থাকা নিশ্চিত হয় (একাধিক ক্লাস একসাথে টগল করার ঝামেলা এড়ানো যায়)।
নিজে চেষ্টা করো
Exercise:
- উপরের মাল্টি-থিম সিস্টেমে একটা নতুন থিম ("অরেঞ্জ") যোগ করো।
- থিম পছন্দ
localStorage-এ সেভ করো, যাতে পেজ রিফ্রেশ করলেও শেষ পছন্দ করা থিম থেকে যায়। --spacing-unit-এর মতো একটা বেস ভ্যারিয়েবল বানিয়েcalc()দিয়ে ৩টা ভিন্ন সাইজের গ্যাপ ক্লাস বানাও।- Pathok Ghor বা ArifStack-এর কোনো একটা পেজের রঙগুলো (background, text, accent) খুঁজে বের করে সেগুলো
:root-এ Custom Property হিসেবে সংগঠিত করো।
পরের পর্বে যা থাকছে
পরের পর্বে আমরা শিখব Container Queries ও আধুনিক responsive টেকনিক — কীভাবে পুরো স্ক্রিনের বদলে একটা এলিমেন্টের নিজের সাইজের উপর ভিত্তি করে স্টাইল পাল্টানো যায়।