CSS-in-JS ಇಲ್ಲದೆ ಡೈನಾಮಿಕ್ ಥೆಮಿಂಗ್ (Dynamic Theming Without CSS-in-JS)
ನಾನು styled-components ನ ದೊಡ್ಡ ಅಭಿಮಾನಿಯಾಗಿದ್ದೆ. ಅದರ ನಮ್ಯತೆಯನ್ನು (flexibility) ನಾನು ಇಷ್ಟಪಡುತ್ತಿದ್ದೆ. ನಂತರ ನಾನು ಒಂದು ಅಡೆತಡೆ ಎದುರಿಸಿದೆ.
ಒಂದು ಪ್ರಾಜೆಕ್ಟ್ನಲ್ಲಿ runtime weight ಅನ್ನು ಕಡಿಮೆ ಮಾಡಬೇಕಿತ್ತು. ನಾನು CSS Modules ಮತ್ತು native CSS ಅನ್ನು ಪ್ರಯತ್ನಿಸಲು ನಿರ್ಧರಿಸಿದೆ. ಅದರ ಫಲಿತಾಂಶವು ನನಗೆ ಆಶ್ಚರ್ಯ ತರಿಸಿತು. ನಾನು ನನ್ನ ಪ್ರಾಜೆಕ್ಟ್ಗಳಿಂದ styled-components, Emotion ಮತ್ತು goober ಅನ್ನು ತೆಗೆದುಹಾಕಿದೆ. ನನಗೆ ನಿಜವಾಗಿಯೂ ಬೇಕಾಗಿದ್ದ ಯಾವುದನ್ನೂ ನಾನು ಕಳೆದುಕೊಳ್ಳಲಿಲ್ಲ.
ದೊಡ್ಡ ಗೆಲುವು ಕೇವಲ ಕಾರ್ಯಕ್ಷಮತೆ (performance) ಮಾತ್ರವಾಗಿರಲಿಲ್ಲ. ಅದು 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 ಬಳಸಿ ನೀವು ಥೀಮ್ ಅನ್ನು ಹೇಗೆ ನಿರ್ಮಿಸಬಹುದು ಎಂಬುದು ಇಲ್ಲಿದೆ.
- CSS ಫೈಲ್ನಲ್ಲಿ tokens ಅನ್ನು ವ್ಯಾಖ್ಯಾನಿಸಿ (Define).
:root {
--color-bg: #ffffff;
--color-text: #1a1a1a;
--color-accent: #3c7dc4;
}
[data-theme="dark"] {
--color-bg: #14161a;
--color-text: #f5f5f0;
--color-accent: #6aa6e8;
}
- ನಿಮ್ಮ componentsಗಳಲ್ಲಿ ಆ variables ಗಳನ್ನು ಬಳಸಿ.
.button {
background: var(--color-accent);
color: var(--color-bg);
}
- ಕೇವಲ ಒಂದು attribute ಅನ್ನು ಬದಲಾಯಿಸುವ ಮೂಲಕ themes ಅನ್ನು ಬದಲಾಯಿಸಿ.
function setTheme(theme) {
document.documentElement.dataset.theme = theme;
localStorage.setItem("theme", theme);
}
Components ಗಳಿಗೆ ThemeProvider ಅಗತ್ಯವಿಲ್ಲ. ಅವುಗಳು re-render ಆಗುವ ಅಗತ್ಯವಿಲ್ಲ. ಬ್ರೌಸರ್ cascade ಮೂಲಕ ಅಪ್ಡೇಟ್ ಅನ್ನು ನಿರ್ವಹಿಸುತ್ತದೆ. ಇದು ನಿಮ್ಮ ಅಪ್ಲಿಕೇಶನ್ನ ಹೆಚ್ಚಿನ ಭಾಗವನ್ನು Server Components ನಲ್ಲಿ ಇರಿಸಲು ಸಹಾಯ ಮಾಡುತ್ತದೆ.
ಪೇಜ್ ಲೋಡ್ ಆಗುವಾಗ ತಪ್ಪು ಥೀಮ್ ಕಾಣಿಸಿಕೊಳ್ಳುವ "flash" ಅನ್ನು ತಪ್ಪಿಸಲು, ನಿಮ್ಮ HTML head ನಲ್ಲಿ ಒಂದು ಸಣ್ಣ inline script ಬಳಸಿ:
<script>
const t = localStorage.getItem("theme") ||
(matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light");
document.documentElement.dataset.theme = t;
</script>
Runtime ನಲ್ಲಿ styles ಅನ್ನು ರಚಿಸಲು JS ಬಳಸುವುದು ನಿಲ್ಲಿಸಿ. ನಿಮ್ಮ tokens ಗಾಗಿ native CSS variables ಬಳಸಿ. ಇದು ಕಡಿಮೆ ಕೋಡ್ ಮತ್ತು ವೇಗವಾದ ಲೋಡ್ ಸಮಯಕ್ಕೆ ಕಾರಣವಾಗುತ್ತದೆ.
ಮೂಲ (Source): https://dev.to/kirill_c_7b35589230/dynamic-theming-without-css-in-js-d7e