CSS-in-JS లేకుండా డైనమిక్ థీమింగ్

నేను styled-components కి పెద్ద అభిమానిని. దాని ఫ్లెక్సిబిలిటీ నాకు చాలా నచ్చేది. కానీ తర్వాత ఒక సమస్య ఎదురైంది.

ఒక ప్రాజెక్ట్‌లో runtime weight తగ్గించాల్సి వచ్చింది. అందుకే నేను CSS Modules మరియు native CSS ని ప్రయత్నించాలని నిర్ణయించుకున్నాను. ఫలితం నన్ను ఆశ్చర్యపరిచింది. నా ప్రాజెక్ట్‌ల నుండి styled-components, Emotion, మరియు goober లను తొలగించాను. నాకు నిజంగా అవసరమైన ఏదీ కోల్పోలేదు.

అతిపెద్ద విజయం కేవలం పెర్ఫార్మెన్స్ మాత్రమే కాదు. అది స్టైలింగ్ డిపెండెన్సీని (styling dependency) తొలగించడం. ఒక ప్రాజెక్ట్‌లో, CSS-in-JS runtime క్లయింట్ బండిల్ (client bundle) లో 30% వాటాను తీసుకుంది.

Plain CSS ఇప్పుడు చాలా పరిణతి చెందింది. ఈ పనుల కోసం మీకు ఇకపై భారీ JS libraries అవసరం లేదు:

• Nesting: native CSS nesting ని ఉపయోగించండి. • Color shifts: color-mix() ని ఉపయోగించండి. • Specificity control: @layer ని ఉపయోగించండి. • Responsive components: container queries ని ఉపయోగించండి.

కేవలం ఒక ఫైల్ మరియు custom properties ఉపయోగించి థీమ్‌ను ఎలా నిర్మించాలో ఇక్కడ ఉంది.

  1. CSS ఫైల్‌లో tokens ని నిర్వచించండి.
:root {
  --color-bg: #ffffff;
  --color-text: #1a1a1a;
  --color-accent: #3c7dc4;
}

[data-theme="dark"] {
  --color-bg: #14161a;
  --color-text: #f5f5f0;
  --color-accent: #6aa6e8;
}
  1. ఆ variables లను మీ components లో ఉపయోగించండి.
.button {
  background: var(--color-accent);
  color: var(--color-bg);
}
  1. ఒకే ఒక attribute ని మార్చడం ద్వారా థీమ్‌లను మార్చుకోవచ్చు.
function setTheme(theme) {
  document.documentElement.dataset.theme = theme;
  localStorage.setItem("theme", theme);
}

Components కి ThemeProvider అవసరం లేదు. అవి re-render అవ్వాల్సిన అవసరం లేదు. బ్రౌజర్ cascade ద్వారా అప్‌డేట్‌ను నిర్వహిస్తుంది. దీనివల్ల మీ యాప్‌లోని ఎక్కువ భాగం Server Components లోనే ఉంటుంది.

పేజీ లోడ్ అయ్యేటప్పుడు తప్పుడు థీమ్ కనిపించే "flash" ని నివారించడానికి, మీ HTML head లో ఒక చిన్న inline script ని ఉపయోగించండి:

Runtime లో స్టైల్స్‌ను జనరేట్ చేయడానికి JS ని ఉపయోగించడం ఆపండి. మీ tokens కోసం native CSS variables ని ఉపయోగించండి. దీనివల్ల కోడ్ తగ్గుతుంది మరియు లోడ్ టైమ్ వేగంగా ఉంటుంది.

Source: https://dev.to/kirill_c_7b35589230/dynamic-theming-without-css-in-js-d7e