CSS-in-JS शिवाय डायनॅमिक थीमिंग (Dynamic Theming Without CSS-in-JS)

मी styled-components चा खूप मोठा चाहता होतो. मला त्याची लवचिकता खूप आवडायची. पण मग मला एका अडचणीचा सामना करावा लागला.

एका प्रोजेक्टमध्ये रनटाइम वेट (runtime weight) कमी करण्याची गरज होती. मी CSS Modules आणि नेटिव्ह CSS वापरून पाहण्याचे ठरवले. निकालाने मला आश्चर्यचकित केले. मी माझ्या प्रोजेक्ट्समधून styled-components, Emotion आणि goober काढून टाकले. मला प्रत्यक्षात आवश्यक असलेल्या कोणत्याही गोष्टीचा अभाव जाणवला नाही.

सर्वात मोठा फायदा फक्त परफॉर्मन्सचा नव्हता. तर स्टायलिंगवरील अवलंबित्व (dependency) कमी करणे हा होता. एका प्रोजेक्टमध्ये, CSS-in-JS रनटाइम क्लायंट बंडलचा (client bundle) ३०% भाग व्यापत होता.

साधे CSS आता प्रगत झाले आहे. या कामांसाठी तुम्हाला आता जड JS लायब्ररीजची गरज नाही:

• Nesting: नेटिव्ह CSS nesting वापरा. • Color shifts: color-mix() वापरा. • Specificity control: @layer वापरा. • Responsive components: container queries वापरा.

फक्त एक फाईल आणि कस्टम प्रॉपर्टीज वापरून तुम्ही थीम कशी तयार करू शकता ते खाली दिले आहे.

१. CSS फाईलमध्ये टोकन्स (tokens) डिफाइन करा.

:root {
  --color-bg: #ffffff;
  --color-text: #1a1a1a;
  --color-accent: #3c7dc4;
}

[data-theme="dark"] {
  --color-bg: #14161a;
  --color-text: #f5f5f0;
  --color-accent: #6aa6e8;
}

२. तुमच्या कंपोनंट्समध्ये त्या व्हेरिएबल्सचा वापर करा.

.button {
  background: var(--color-accent);
  color: var(--color-bg);
}

३. फक्त एक ॲट्रिब्यूट बदलून थीम स्विच करा.

function setTheme(theme) {
  document.documentElement.dataset.theme = theme;
  localStorage.setItem("theme", theme);
}

कंपोनंट्सना ThemeProvider ची गरज नसते. त्यांना री-रेंडर (re-render) करण्याचीही गरज नसते. ब्राउझर 'कॅस्केड' (cascade) द्वारे अपडेट हाताळतो. यामुळे तुमचे बहुतेक ॲप Server Components मध्ये राहते.

पेज लोड होताना चुकीची थीम दिसण्याचा "फ्लॅश" (flash) टाळण्यासाठी, तुमच्या HTML head मध्ये एक छोटा इनलाइन स्क्रिप्ट वापरा:

<script>
  const t = localStorage.getItem("theme") || 
  (matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light");
  document.documentElement.dataset.theme = t;
</script>

रनटाइमला स्टाइल्स जनरेट करण्यासाठी JS वापरणे थांबवा. तुमच्या टोकन्ससाठी नेटिव्ह CSS व्हेरिएबल्स वापरा. यामुळे कोड कमी होतो आणि लोड होण्याचा वेग वाढतो.

स्त्रोत: https://dev.to/kirill_c_7b35589230/dynamic-theming-without-css-in-js-d7e