How to set up site theming with CSS variables

Sep 14, 2025

कैसे करना है

सीएसएस कस्टम गुण, जिन्हें आमतौर पर सीएसएस चर के नाम से जाना जाता है, अब सभी प्रमुख आधुनिक ब्राउज़रों द्वारा समर्थित हैं। इसका मतलब यह है कि इंटरनेट एक्सप्लोरर जैसे विरासत ब्राउज़र जैसे विरासत ब्राउज़र का समर्थन करने के लिए बोझ नहीं होने वाली परियोजनाओं के लिए, सभी उद्देश्यों और उद्देश्यों के लिए - सभी उद्देश्यों और उद्देश्यों के लिए - उपयोग करने के लिए सुरक्षित।

कई डेवलपर पहले से ही SASS या जैसे प्रीप्रोसेस के साथ चर का उपयोग करते हैं कम कोड पुनरावृत्ति को कम करने के साधन के रूप में। मूल सीएसएस चर काफी हद तक एक ही तरीके से काम करते हैं, लेकिन किसी भी अतिरिक्त निर्माण चरण की आवश्यकता नहीं है, नियमित सीएसएस संपत्ति की तरह कैस्केड, और सबसे महत्वपूर्ण बात यह है कि रनटाइम पर उपलब्ध हैं। (अपनी साइट को आसानी से चलाने के लिए, सुनिश्चित करें कि आपने सही चुना है वेब होस्टिंग सर्विस।)

सास क्या है?

ये लाभ देशी सीएसएस चर को अपने प्रीप्रोसेसर भाई बहनों पर बढ़ते हैं, और डेवलपर्स के लिए बहुत कम कोड के साथ बहुत सारी रोचक चीजें करने के लिए दरवाजा खोलता है। आपकी साइट के लिए शून्य-कोड विकल्पों में रुचि रखते हैं? यहां शीर्ष पर गाइड है वेबसाइट निर्माता ।

इस ट्यूटोरियल में, हम खोज करेंगे कि हम NeeApp नामक एक नकली वेब ऐप में वेबसाइट थीमिंग को लागू करने के लिए सीएसएस वैरिएबल का उपयोग कैसे कर सकते हैं। इसमें लेखन शामिल होगा सीएसएस तथा जावास्क्रिप्ट उपयोगकर्ता को रंग योजना बदलने और दिखाए गए कॉलम की मात्रा को टॉगल करने की अनुमति देने के लिए। इसके बाद हम भविष्य के सत्रों के लिए कोई भी परिवर्तन सहेजे जाने के लिए वेब स्टोरेज एपीआई का लाभ उठाएंगे।

ट्यूटोरियल फाइलें प्राप्त करें

पहले चीजें पहले, प्रोजेक्ट फाइलों से डाउनलोड करें वेब डिजाइनर फाइल्सिलो (अंक 264)। नोट: पहली बार उपयोगकर्ताओं को फाइल्सिलो का उपयोग करने के लिए पंजीकरण करना होगा।

01. वर्कस्पेस सेट करें [5 9]
में / वेबसाइट-टेम्पलेट निर्देशिका आपको स्थैतिक नोटेपी वेबपृष्ठ मिलेगा जिसमें हम सीएसएस चर और वेब स्टोरेज एपीआई का उपयोग करके वेबसाइट थीमिंग को कार्यान्वित करेंगे। निर्देशिका को अपने पसंदीदा पाठ संपादक में खोलें।

02. हमारे CSS Variables सेट अप करें [5 9]

में main.css , आपको प्रोजेक्ट के अधिकांश सीएसएस मिलेगा। शीर्ष पर, एक ब्लॉक लक्ष्यीकरण बनाएँ जड़ छद्म वर्ग। इसके भीतर नीचे दिए गए स्निपेट में वैरिएबल को परिभाषित करें। इस रूट ब्लॉक में वैश्विक चर शामिल हैं जो किसी भी नियमित सीएसएस संपत्ति की तरह हमारे स्टाइलशीट के माध्यम से नीचे आएंगे।

: रूट {
  - प्राइमरी: # 2 एफ 353 ई;
  - सेकेंडरी: # 2 बी 9 बीसीए;
  --टररी: # एफ 3583 एफ;
  - वैकल्पिक: # e0e1e2;
  - उद्धरण: #ffffffffffffffffffff
}

03. चर के साथ रंग बदलें [5 9]

स्टाइलशीट के माध्यम से, या तो मैन्युअल रूप से या ढूंढें / प्रतिस्थापित करें, और किसी भी स्थिर रंग हेक्स कोड को अपने संबंधित चर के साथ रूट ब्लॉक से स्वैप करें। ऐसा करने के लिए, उपयोग करें वर फ़ंक्शन और वैरिएबल का नाम पास करें। यह ब्राउज़र को उस चर के मान को संदर्भित करने के लिए कहता है। उदाहरण के लिए:

 .c-header {
  पृष्ठभूमि-रंग: वार (प्राथमिक);
  रंग: var (- quary);
}

04. आइकन के लिए इनलाइन एसवीजी का पता लगाएं [5 9]
खुला हुआ index.html और पहली चीजों में से एक जो आप देखते हैं वह एक बड़ा एसवीजी तत्व है। इसमें सभी पृष्ठ के आइकन के लिए पथ शामिल हैं, प्रत्येक को प्रतीक तत्व में लपेटा गया है, और एक अद्वितीय आईडी दिया गया है। इन प्रतीकों को तब संदर्भित किया जाता है जहां के साथ आवश्यक है प्रयोग करें तत्व, एसवीजी कोड के बिना किसी डुप्लिकेशन के आइकन के पुन: उपयोग की अनुमति देता है।

05. SVG में CSS Variables जोड़ें [5 9]
एक .svg फ़ाइल के बजाय इनलाइन एसवीजी का उपयोग करने का एक लाभ यह है कि सीएसएस अपनी आंतरिक संरचना तक पहुंच सकता है। इसका मतलब है कि हमारे सीएसएस चर (ब्राउज़र समर्थन की जांच करें) [9 3] यहां

)। में index.html , एसवीजी के स्टाइल ब्लॉक को नीचे दिए गए स्निपेट के साथ बदलें। अब एसवीजी के रंगों में से प्रत्येक को हमारे सीएसएस वैरिएबल्स के मूल्यों से जोड़ा जाता है।

 & lt; शैली & gt;
  .primary {
  भरें: var (-प्रिमिरी, # 2F353E);
  }
  Secondary {
  भरें: var (----सेमरी, # 2 बी 9 बीसीए);
  }
& lt; / शैली & gt;

06. एक कॉलम चर बनाएँ [5 9]

हम रंग के अलावा अन्य गुणों के लिए सीएसएस चर का भी उपयोग कर सकते हैं। रूट ब्लॉक में एक नया चर बनाएं, इसे कॉल करें कॉलम , और इसे 3 का मान दें। यह डिफ़ॉल्ट मान से मेल खाना चाहिए कॉलम पृष्ठ पर यूआई घटक। कार्यात्मक होने पर, यह घटक कॉलम की संख्या को टॉगल करेगा।

: रूट {
  - प्राइमरी: # 2 एफ 353 ई;
  - सेकेंडरी: # 2 बी 9 बीसीए;
  --टररी: # F3583F;
  - वैकल्पिक: # e0e1e2;
  - उद्धरण: #ffffffffffffffffffff
  - Columns: 3;
}

07. एक कॉलम टॉगल को लागू करें [5 9]

हमारे नए कॉलम चर का उपयोग करके और कैल्क () फ़ंक्शन, हम अब गणना करेंगे कि कॉलम की सही संख्या बनाने के लिए प्रत्येक नोट घटक कितना चौड़ा होना चाहिए। उदाहरण के लिए, यदि कॉलम 4 पर सेट हो जाते हैं, तो प्रत्येक नोट में 25% की चौड़ाई होनी चाहिए।

 .C- नोट {
  चौड़ाई: कैल्क (100% / var (- कॉलम));
}

08. जेएस कक्षाएं और डेटा विशेषताओं को जोड़ें [5 9]

जेएस व्यवहार को एक डीओएम तत्व में लागू करते समय, जेएस उपसर्ग के साथ कक्षा के माध्यम से इसमें हुक करें। यह सीएसएस से एक तत्व के कार्यात्मक पहलुओं को डिकुण करता है। चलो एक जोड़ें जेएस-अद्यतन-चर क्लास टू ऑल कलर और रेडियो इनपुट के साथ-साथ ए आंकड़ा गुण अद्यतन करने के लिए संबंधित चर का संदर्भ।

 & lt; इनपुट प्रकार = "रंग" मान = "# 2F353E"
कक्षा = "जेएस-अपडेट-वैरिएबल यू-हिडन-नेत्रहीन"
डेटा-वैरिएबल = "प्राथमिक" और जीटी;

09. CSS Variables को अपडेट करने के लिए JS जोड़ें [5 9]

खुला हुआ Main.js और नीचे स्निपेट जोड़ें। यह हमारे सभी के माध्यम से loops जेएस-अद्यतन-चर इनपुट और तर्क जोड़ता है, इसलिए परिवर्तन पर, इसके डेटा-वैरिएबल विशेषता में संदर्भित चर इनपुट मूल्य के साथ अद्यतन किया जाता है। रंग स्विच और कॉलम टॉगल अब काम करना चाहिए!

 var vartrig = दस्तावेज़
.क्वेसेल्टरल ("। जेएस-अपडेट-वेरिएबल");
के लिए (var i = 0; i & lt; vartrig.length; i ++) {
Vartrig [i]
.addeventlistener ("परिवर्तन", फ़ंक्शन () {
दस्तावेज़। DocumentElement.Style
.setproperty ("-" + this.dataset.variable,
this.value);
});
}

10. एक जेएस वर्ग को सहेजें बटन पर संलग्न करें [5 9]

यह केवल उपयोगकर्ता की रंग योजना को सहेजने के लिए समझ में आता है जब वे सहेजें बटन पर क्लिक करते हैं, क्योंकि इससे उन्हें विषयों के साथ प्रयोग करने की अनुमति मिलती है जितना वे स्वचालित रूप से वर्तमान को ओवरराइड किए बिना चाहते हैं। शुरू करने के लिए, जोड़ें .जेएस-सेव-रंग तक सहेजें हमारे जेएस हुक के रूप में कार्य करने के लिए बटन।

 & lt; बटन वर्ग = "सी-बटन जेएस-सेव-रंग"
डेटा-मोडल = "जेएस-मोडल" डेटा-मोडल
-कंटेंट = "जेएस-रंग-मोडल-सामग्री" & gt;
सहेजें & lt; / बटन & gt;

11. रंग सरणी बनाएँ [5 9]

पीठ में Main.js , एक नया चर घोषित करें रंग की और इसे एक नया सरणी असाइन करें जिसमें सहेजें बटन पर क्लिक करने के बाद हम सभी रंग चर को सहेजना चाहते हैं।

 var रंग = [
  "प्राथमिक",
  "माध्यमिक",
  "तृतीयक",
  "quaternary",
  "quinary"
];

12. सहेजें बटन ईवेंट श्रोता बनाएँ [5 9]

रंग सरणी के नीचे, के लिए एक क्लिक घटना श्रोता बनाएँ जेएस-सेव-रंग कक्षा जिसे हमने पहले सेव बटन में जोड़ा था। इसके अंदर एक नया चर कहा जाता है htmlstyles और इसे रूट HTML तत्व की गणना गुण असाइन करें। हम अपने सीएसएस चर तक पहुंचने के लिए इसका उपयोग करेंगे।

 दस्तावेज़। प्रश्नोत्तरीक्टर ("जेएस-सेव-रंग")
.addeventlistener ("क्लिक", फ़ंक्शन () {
var htmlstyles = विंडो
.getComputedStyle (दस्तावेज़)
.क्वेसेक्टर ("एचटीएमएल")),
}),

13. रिकॉर्ड सीएसएस रंग चर [5 9]

इसके बाद, घटना श्रोता के भीतर, एक नया चर बनाएँ कलोरस्टोसव और इसे एक खाली वस्तु सौंपें। अगला, एक बनाएँ के लिये लूप का उपयोग कर रंग की चरण 11 से सरणी। इसके भीतर, हम वर्णित चर का एक पूर्ण कुंजी / मूल्य रिकॉर्ड जोड़ देंगे रंग की सरणी कलोरस्टोसव वस्तु।

 'colourstosave' वस्तु के लिए सरणी।
Colourstosave = नई वस्तु;
के लिए (var i = 0; i & lt; colours.length; i ++) {
Colourstosave [रंग [i]] = htmlstyles
.getpropertyvalue ("-" + रंग [i]);
}

14. स्थानीय स्टोरेज के लिए Colourstosave भेजें [5 9]

अब हमारे पास सभी रंग चर हैं कलोरस्टोसव , हम इसे स्थानीय स्टोरेज नामक वेब स्टोरेज एपीआई के एक घटक पर भेज देंगे। यह अनिवार्य रूप से एक वस्तु है जो सत्रों में बनी रहती है। हम इसके भीतर अन्य वस्तुओं को स्टोर कर सकते हैं सेटिटम () तरीका। आइए इसे भेजें कलोरस्टोसव वस्तु।

 localstorage.setitem ("रंग",
Json.stringify (colourstosave));

15. कॉलम में एक जेएस क्लास जोड़ें [5 9]

रंगों के अलावा, हम यह भी सुनिश्चित करना चाहते हैं कि हमारे चुने हुए कॉलम संख्या सत्रों में भी बनी रहती है। इस की ओर पहला कदम जोड़ना होगा जेएस-अद्यतन-कॉलम कॉलम घटक के भीतर सभी रेडियो इनपुट के लिए।

 & lt; इनपुट प्रकार = "रेडियो" नाम = "कॉलम" वर्ग
= "जेएस-अपडेट-वेरिएबल जेएस-अपडेट-कॉलम
यू-छुपा-दृश्यमान "मान =" 1 "
डेटा-वैरिएबल = "कॉलम" & gt;

16. कॉलम को स्थानीय स्टोरेज में भेजें [5 9]

प्रत्येक के लिए जेएस-अद्यतन-कॉलम , हम अगले इवेंट श्रोताओं को परिवर्तनों के लिए देखने के लिए असाइन करेंगे। पहचान पर, हम वर्तमान मूल्य भेज देंगे कॉलम के लिए चर स्थानीय भंडार , फिर से इसका उपयोग कर सेटिटम () तरीका। रंगों के विपरीत, हमें इस मान को मुद्रित करने की आवश्यकता नहीं है क्योंकि यह कोई वस्तु नहीं है।

 var colinputs = दस्तावेज़
.क्वेसेलिएटरल ("। जेएस-अपडेट-कॉलम");
के लिए (var i = 0; i & lt; colinputs; i ++) {
Colinputs [i] .AddeventListener ("परिवर्तन",
समारोह () {var htmlstyles = खिड़की
.getComputedStyle (दस्तावेज़)
.क्वेसेक्टर ("एचटीएमएल"));
localstorage.setitem ("कॉलम",
htmlstyles.getpropertyvalue ("- कॉलम"));
});}

17. नए सत्रों को संभालें [5 9]

यदि उपयोगकर्ता पहले रंग और कॉलम वरीयता चुनने के बाद लौटता है, तो हमें तर्क बनाने की आवश्यकता होती है, इसलिए यह सहेजा गया डेटा वापस सीएसएस चर में बदल जाता है। पहला कदम एक को परिभाषित करना है DomcontentLoaded घटना श्रोता, और फिर एक अगर किसी भी सहेजे गए डेटा को स्थानीय स्टोरेज में इसकी जांच करने का विवरण वस्तु ले आओ() तरीका।

 document.addeventlistener
("DomcontentLoaded", फ़ंक्शन () {
यदि (localstorage.getitem ("रंग")) {
}
यदि (localstorage.getitem ("कॉलम")) {
}
});

18. संशोधन रंग चर [5 9]

रंगों में अगर वक्तव्य, एक नया चर बनाएँ savedcolours और इसे पार्स किए गए रंग ऑब्जेक्ट का मान असाइन करें स्थानीय भंडार । इसका उपयोग करना अंदर के लिए लूप के साथ savedcolours , प्रत्येक रंग कुंजी / मान जोड़ी को पकड़ो और इसे सीएसएस चर के रूप में रूट एचटीएमएल तत्व में संलग्न करें।

 var savedcolours = json.parse
(localstorage.getitem ("रंग"));
के लिए (savedcolours में रंग) {
document.documentelement.style.setproperty
("-" + रंग, savedcolours [रंग]); }

19. स्तंभ वैरिएबल डेटा को इकट्ठा करें [5 9]

इससे पहले कि हम कॉलम वैरिएबल में संशोधन कर सकें, हमें पहले सहेजे गए डेटा के संदर्भों को पकड़ना होगा स्थानीय भंडार और इसके भीतर रेडियो इनपुट भी कॉलम घटक। उत्तरार्द्ध इसलिए है कि हम यह सुनिश्चित करने के लिए अपने राज्य को अपडेट कर सकते हैं कि सही संख्या पूर्व-चयनित है।

 var कॉलम = लोकलस्टोरेज
.getItem ("कॉलम"),
CondumTriggers = दस्तावेज़।
क्वेरीसेक्टरल ("। जेएस-अपडेट-कॉलम");

20. परिवर्तनीय और राज्य संशोधित करें [5 9]

अंत में, हम अपने सहेजे गए कॉलम CSS चर को अपडेट करेंगे स्थानीय भंडार समकक्ष और प्रासंगिक रेडियो इनपुट के चेक किए गए विशेषता को सेट करें कॉलम सत्य के लिए घटक। कॉलम - 1 इस तथ्य की भरपाई करना है कि कॉलम नोडलिस्ट शून्य-आधारित है।

 Document.DocumentElement.Style
.SetProperty ("- कॉलम", कॉलम);
कॉलम ट्रिगर्स [कॉलम - 1]। चेक = सत्य;

21. तैयार उत्पाद का परीक्षण करें [5 9]

तैयार उत्पाद: मॉक नोटएप पेज पर सब कुछ अब काम करना चाहिए
[2 9 0]
इतना ही! नकली नोटेपी पेज पर सबकुछ अब काम करना चाहिए। आप स्वैच पर क्लिक करके अपनी खुद की रंग योजना बना सकते हैं और फिर इसे प्रतिबद्ध कर सकते हैं स्थानीय भंडार सहेजें बटन के माध्यम से। यदि आप दिखाए गए कॉलम की मात्रा को टॉगल करना चाहते हैं, तो कॉलम घटक में उचित संख्या पर क्लिक करें।

और याद रखें, यह हमेशा आपके उन्नयन के लायक है घन संग्रहण एक नई परियोजना के आगे, इसलिए यह उन फ़ाइलों को संभाल सकता है जिन्हें आप फेंकते हैं।

यह लेख मूल रूप से वेब डिजाइनर पत्रिका अंक 264 में दिखाई दिया। यहां सदस्यता लें ।

अधिक पढ़ें:

15 वास्तव में उपयोगी उत्तरदायी वेब डिजाइन ट्यूटोरियल

सैस के साथ कैसे शुरू करें

वेब पर बेहतर रंग का प्रबंधन करने के लिए 7 युक्तियाँ

How to set up site theming with CSS variables

कैसे करना है - सर्वाधिक लोकप्रिय लेख

मैक पर एक स्क्रीनशॉट कैसे लें

वास्तविकता कैप्चर के साथ 3 डी स्कैन कैसे बनाएं

Add SVG filters with CSS

Get started with Assets in Affinity Designer

How to make and use a mahlstick for painting

Create ghostly textures with mixed-media techniques

Create portrait art in Corel Painter

The pro guide to creating 3D textures

श्रेणियाँ