कई लाइनों में साइट के लिए सीएसएस चर और रंग विषय

आज सीएसएस चर का उपयोग करने का एक तरीका है

एक साइट बनाएं जो गतिशील रूप से प्रकाश, अंधेरे और रंग विषयों का समर्थन करती है।

इंटरएक्टिव डेमो

एक आधार रंग बनाएं जो बदल जाएगा। इसे html में data-theme पर बाँधें।

कोड उदाहरण कम / scss सिंटैक्स से & का उपयोग करते हैं

html[data-theme='green'] { --theme-color: 110; } 

अब हमें खुद रंगों की जरूरत है। या बल्कि उनकी चमक और संतृप्ति। ऐसा करने के लिए, हम hsl योजना का उपयोग करेंगे। हम सभी चर को: मूल में रखते हैं।

 :root { --color: ~'hsl(var(--theme-color), 15%, 44%)'; --background-color: ~'hsl(var(--theme-color), 30%, 10%)'; } 

खैर यहाँ। छोटे के लिए मामला। वांछित तत्व को पकड़ो और हमारे चर को उस पर लागू करें।

 .class-name { color: var(--color); background-color: var(--background-color); } 

अब हम इसके विपरीत परिवर्तन करेंगे। बदलें: रूट के साथ html [विशेषता के साथ]।

 // :root = html html { &[data-theme-style='normal'] { } &[data-theme-style='dark'] { } } 

अब प्रत्येक विषय के लिए हम अपने s, l मान लेते हैं।

 html { &[data-theme-style='normal'] { --color: ~'hsl(var(--theme-color), 15%, 44%)'; --background-color: ~'hsl(var(--theme-color), 30%, 10%)'; } &[data-theme-style='dark'] { --color: ~'hsl(var(--theme-color), 70%, 31%)'; --background-color: ~'hsl(var(--theme-color), 3%, 3%)'; } } 

लिंक:
इंटरएक्टिव डेमो
विचार के लिए धन्यवाद मार्सिन विचारी।