Theming के लिए CSS Variables
-- के साथ custom properties घोषित करें, var() का उपयोग करें, nested scopes में उन्हें override करें और light/dark theme toggle लागू करें।
Theming के लिए CSS Variables, CoddyKit पर Frontend Academy का एक निःशुल्क पाठ है। यह 4 में से 4वाँ पाठ है। आप नीचे पूरा पाठ निःशुल्क पढ़ सकते हैं—फिर अंतर्निहित कोड संपादक और 24/7 एआई ट्यूटर के साथ ब्राउज़र में इसका व्यावहारिक अभ्यास कर सकते हैं। यह Frontend Academy सीखने के मार्ग का हिस्सा है और आपकी प्रगति वेब तथा CoddyKit ऐप पर सिंक होती रहती है। Frontend Academy पाठ्यक्रम में कुल 4 पाठ शामिल हैं।
CSS कस्टम गुण क्या हैं
CSS कस्टम गुण (CSS चर) ऐसे मान संग्रहीत करते हैं जिनका पूरे स्टाइलशीट में फिर से उपयोग किया जा सकता है। इन्हें --name: value से घोषित किया जाता है और var(--name) से उपयोग किया जाता है। प्रीप्रोसेसर चर (Sass) के विपरीत, ये गतिशील होते हैं — आप इन्हें JavaScript से अपडेट कर सकते हैं।
कस्टम गुण घोषित करना
गुणों को :root पर घोषित करें, ताकि वे पूरे दस्तावेज़ में उपलब्ध रहें। आप इन्हें किसी भी तत्व पर घोषित करके उस तत्व के उप-वृक्ष तक सीमित भी कर सकते हैं।
:root {
--color-primary: #3182ce;
--color-bg: #f7fafc;
--color-text: #1a202c;
--spacing-md: 16px;
--border-radius: 8px;
--font-sans: 'Inter', system-ui, sans-serif;
}कस्टम गुणों का उपयोग करना
var(--name) से किसी चर का संदर्भ लें। दूसरे तर्क के रूप में एक वैकल्पिक मान शामिल करें: var(--color-primary, #3182ce)। यदि चर परिभाषित नहीं है, तो वैकल्पिक मान का उपयोग किया जाता है।
.card {
background: var(--color-bg);
color: var(--color-text);
padding: var(--spacing-md);
border-radius: var(--border-radius);
}
.btn {
background: var(--color-primary, blue); /* fallback */
}कैस्केड: सीमित चर
कस्टम गुण कैस्केड होते हैं और विरासत में मिलते हैं। यदि आप किसी बाल तत्व पर चर को फिर से परिभाषित करते हैं, तो वह उस तत्व और उसके सभी वंशजों के लिए पैरेंट के मान को ओवरराइड करता है।
:root { --accent: blue; }
.card { color: var(--accent); } /* blue */
.special-section {
--accent: green; /* override for this subtree */
}
.special-section .card { color: var(--accent); } /* green */CSS चर के साथ डार्क मोड
डार्क मोड का सबसे साफ़ पैटर्न यह है: CSS चर के रूप में हल्के और गहरे रंगों के पैलेट परिभाषित करें। बदलने के लिए किसी वर्ग को टॉगल करें या prefers-color-scheme मीडिया क्वेरी का उपयोग करें। अलग-अलग रंग गुणों को ओवरराइड करने की आवश्यकता नहीं होती।
:root {
--bg: #ffffff;
--text: #1a202c;
--card-bg: #f7fafc;
}
[data-theme='dark'], @media (prefers-color-scheme: dark) {
:root {
--bg: #1a202c;
--text: #f7fafc;
--card-bg: #2d3748;
}
}
body { background: var(--bg); color: var(--text); }JavaScript से डार्क मोड टॉगल करना
एक टॉगल बटन जोड़ें जो मूल तत्व पर डेटा विशेषता या वर्ग बदलता हो। CSS चर बाकी काम संभाल लेते हैं — JavaScript की एक पंक्ति, बिना अलग-अलग स्टाइल ओवरराइड किए।
const btn = document.querySelector('#theme-toggle');
btn.addEventListener('click', () => {
const current = document.documentElement.getAttribute('data-theme');
document.documentElement.setAttribute(
'data-theme',
current === 'dark' ? 'light' : 'dark'
);
});JavaScript से चर अपडेट करना
element.style.setProperty('--name', value) किसी कस्टम गुण को इनलाइन अपडेट करता है। removeProperty से उसे हटाने पर कैस्केड का मान वापस आ जाता है। इससे गतिशील थीम और एनिमेटेड मान संभव होते हैं।
// Dynamically set a CSS variable from JS:
document.documentElement.style.setProperty('--primary-hue', '220');
// Based on input:
const hue = document.querySelector('#hue-slider');
hue.addEventListener('input', () => {
document.documentElement.style.setProperty('--primary-hue', hue.value);
});डिज़ाइन टोकन बतौर CSS चर
सभी डिज़ाइन संबंधी निर्णय—रंग-पैलेट, रिक्ति-स्केल और टाइप-स्केल—को CSS चर के रूप में परिभाषित कीजिए। इससे विश्वसनीयता का एकमात्र स्रोत बनता है, जिसका उपयोग कॉम्पोनेंट करते हैं। किसी टोकन को बदलने पर बदलाव तुरंत हर जगह लागू हो जाता है।
:root {
/* Colour scale */
--blue-50: #ebf8ff;
--blue-100: #bee3f8;
--blue-500: #3182ce;
--blue-900: #1a365d;
/* Spacing scale */
--space-1: 4px;
--space-2: 8px;
--space-4: 16px;
--space-8: 32px;
}calc() में चर का उपयोग
CSS चर calc() के अंदर काम करते हैं, जिससे टोकन के मानों के आधार पर उत्तरदायी गणनाएँ की जा सकती हैं।
:root { --header-height: 64px; }
.content {
/* Leave room for fixed header */
padding-top: calc(var(--header-height) + 24px);
min-height: calc(100vh - var(--header-height));
}ब्राउज़र समर्थन
CSS कस्टम गुणधर्म सभी आधुनिक ब्राउज़र में समर्थित हैं (प्रमुख ब्राउज़र के लिए 2016 से)। इस सुविधा के लिए प्रीप्रोसेसर की आवश्यकता नहीं है। बहुत पुराने ब्राउज़र के लिए फ़ॉलबैक के रूप में var() से पहले एक स्थिर मान दीजिए।
.btn {
background: blue; /* IE fallback */
background: var(--color-primary); /* modern browsers */
}कस्टम गुणधर्म बनाम Sass चर
Sass चर को स्थिर मानों में संकलित किया जाता है। CSS कस्टम गुणधर्म रनटाइम पर मौजूद रहते हैं, गतिशील होते हैं, JavaScript से बदले जा सकते हैं और DOM में कैस्केड होते हैं। थीम बनाने के लिए CSS चर और बिल्ड-टाइम स्थिरांकों के लिए Sass चर का उपयोग कीजिए।
त्वरित जाँच
JavaScript से CSS कस्टम गुणधर्म को कैसे पढ़ेंगे और अपडेट करेंगे?
पुनरावलोकन: CSS कस्टम गुणधर्म
वैश्विक दायरे के लिए :root पर -- के साथ घोषित कीजिए। var() के साथ उपयोग कीजिए। सीमित दायरे वाले चर वंशज तत्वों तक कैस्केड होते हैं। डार्क मोड के लिए मीडिया क्वेरी या डेटा एट्रिब्यूट में रंग-टोकन को फिर से परिभाषित कीजिए। JavaScript से style.setProperty() द्वारा अपडेट कीजिए। चर के रूप में डिज़ाइन टोकन = विश्वसनीयता का एकमात्र स्रोत।
एआई शिक्षक के साथ HTML सीखें — निःशुल्क
अपने ब्राउज़र में वास्तविक कोड लिखें और चलाएँ, चौबीसों घंटे एआई शिक्षक से तुरंत सहायता पाएँ, और वेब या ऐप पर वहीं से शुरू करें जहाँ आपने छोड़ा था।
- पाठ्यक्रम
- 41
- पाठ
- 163
अक्सर पूछे जाने वाले प्रश्न
क्या “Theming के लिए CSS Variables” पाठ निःशुल्क है?
हाँ—“Theming के लिए CSS Variables” का पूरा पाठ यहाँ वेब पर निःशुल्क पढ़ा जा सकता है। इंटरैक्टिव अभ्यास (अंतर्निहित कोड संपादक और 24/7 एआई ट्यूटर) करने और Frontend Academy पाठ्यक्रम का बाकी हिस्सा अनलॉक करने के लिए CoddyKit PRO लें। Frontend Academy पाठ्यक्रम में कुल 4 पाठ शामिल हैं।
“Theming के लिए CSS Variables” में मैं क्या सीखूँगा?
-- के साथ custom properties घोषित करें, var() का उपयोग करें, nested scopes में उन्हें override करें और light/dark theme toggle लागू करें। आप ब्राउज़र में सीधे चलाए जाने वाले व्यावहारिक कोड के साथ Frontend Academy का अभ्यास करते हैं, और पाठ पूरा करते समय 24/7 एआई ट्यूटर आपके प्रश्नों के उत्तर देता है।
क्या Frontend Academy शुरू करने के लिए मुझे किसी अनुभव की आवश्यकता है?
पहले के अनुभव की आवश्यकता नहीं है। CoddyKit पर Frontend Academy शुरुआती से लेकर उन्नत शिक्षार्थियों तक सभी के लिए व्यवस्थित किया गया है, इसलिए आप यहीं से या शुरुआत से सीखना शुरू कर सकते हैं और अपनी गति से आगे बढ़ सकते हैं। यह 4 में से 4वाँ पाठ है।
“Theming के लिए CSS Variables” पाठ पूरा करने में कितना समय लगता है?
CoddyKit का अधिकांश पाठ लगभग 5–10 मिनट में पूरा हो जाता है। हर पाठ छोटा और संवादात्मक है, इसलिए आप लगातार प्रगति करते हैं और वेब या ऐप पर वहीं से सीखना जारी रख सकते हैं जहाँ आपने छोड़ा था।
क्या मैं इस Frontend Academy पाठ में कोड लिख और चला सकता हूँ?
हाँ। हर Frontend Academy पाठ में एक अंतर्निर्मित कोड संपादक शामिल है, जिससे आप सीधे अपने ब्राउज़र में वास्तविक कोड लिख और चला सकते हैं और तुरंत एआई प्रतिक्रिया पा सकते हैं—स्थानीय सेटअप की आवश्यकता नहीं है।
इस पाठ्यक्रम के सभी पाठ
- Flexbox गहन अध्ययन: संरेखण, रैपिंग, क्रम
- CSS Grid: template-areas, auto-fit, minmax
- Flexbox और Grid का संयोजन
- Theming के लिए CSS Variables