ಡೆವಲಪರ್‌ಗಳಿಗೆ ಶೀಘ್ರ ಯಶಸ್ಸು (quick win) ಎಂದರೆ ಇಷ್ಟ. "ಡಾರ್ಕ್ ಮೋಡ್ ಸೇರಿಸಿ" ಎಂದು ಟಿಕೆಟ್ ಬಂದಾಗ, ಅತ್ಯಂತ ಸುಲಭವಾದ ಹಾದಿ ಸ್ಪಷ್ಟವಾಗಿ ಕಾಣುತ್ತದೆ: light.css ಬರೆಯಿರಿ, dark.css ಬರೆಯಿರಿ ಮತ್ತು ಅವುಗಳ ನಡುವೆ ಟೋಗಲ್ ಮಾಡಿ. ಇದು ಸ್ವಚ್ಛವಾಗಿ ಕಾಣಿಸುತ್ತದೆ ಮತ್ತು ವೇಗವಾಗಿ ಕೆಲಸ ಮುಗಿಯುತ್ತದೆ. ಮೂರು ಘಟಕಗಳನ್ನು (components) ಹೊಂದಿರುವ ಸಣ್ಣ ಸೈಡ್ ಪ್ರಾಜೆಕ್ಟ್‌ಗೆ ಇದು ನಡೆಯಬಹುದು. ಆದರೆ ನಿಮ್ಮ ಅಪ್ಲಿಕೇಶನ್ ಕೆಲವು ಮಾಡ್ಯೂಲ್‌ಗಳನ್ನು ಮೀರಿದ ನಂತರ, ಆ ಎರಡನೇ ಫೈಲ್ ಒಂದು ಆಸ್ತಿಯಾಗುವ ಬದಲು, ನೀವು ಎರಡೂ ಕಡೆ ಅಳವಡಿಸಬೇಕಾದ ಹೊರೆಯಾಗಿ ಪರಿಣಮಿಸುತ್ತದೆ.

ಎರಡು-ಫೈಲ್ ಬಲೆ (The Two-File Trap)

ಮೊದಲ ನೋಟಕ್ಕೆ ಈ ತರ್ಕವು ಸರಿಯಾಗಿ ಕಾಣಿಸುತ್ತದೆ. ಕಾರ್ಯಗಳ ವಿಭಜನೆ (Separation of concerns), ಅಲ್ವೇ? ಲೈಟ್ ವಿಷಯಗಳು ಇಲ್ಲಿ, ಡಾರ್ಕ್ ವಿಷಯಗಳು ಅಲ್ಲಿ. ನೀವು ನಿಮ್ಮ ಎಡಿಟರ್‌ನಲ್ಲಿ ಎರಡು ಬಫರ್‌ಗಳನ್ನು ತೆರೆಯುತ್ತೀರಿ. ಲೈಟ್ ಫೈಲ್‌ನಿಂದ ಕಾರ್ಡ್ ಸ್ಟೈಲ್‌ಗಳನ್ನು ಡಾರ್ಕ್ ಫೈಲ್‌ಗೆ ಕಾಪಿ ಮಾಡುತ್ತೀರಿ, #ffffff ಬದಲಿಗೆ #1a1a1a ಅನ್ನು ಬದಲಾಯಿಸುತ್ತೀರಿ ಮತ್ತು ಕೆಲಸ ಮುಗಿಸುತ್ತೀರಿ.

ಸಮಸ್ಯೆಯು ಮೊದಲ ವಾರದಲ್ಲಿ ಇರುವುದಿಲ್ಲ. ಸಮಸ್ಯೆ ಆರನೇ ತಿಂಗಳಲ್ಲಿ ಎದುರಾಗುತ್ತದೆ, ಆಗ ಒಬ್ಬ ಡಿಸೈನರ್ ಪ್ರೈಮರಿ ಬಟನ್‌ಗೆ ಸ್ವಲ್ಪ ವಿಭಿನ್ನವಾದ ಬಾರ್ಡರ್ ರೇಡಿಯಸ್ ಕೇಳಿದಾಗ, ಅಥವಾ ಪ್ರಾಡಕ್ಟ್ ತಂಡವು ಚೆಕ್‌ಔಟ್ ಫಾರ್ಮ್‌ನಲ್ಲಿ ಹೊಸ ವಾರ್ನಿಂಗ್ ಸ್ಟೇಟ್ ಅನ್ನು ಬಯಸಿದಾಗ ಸಮಸ್ಯೆ ಕಾಣಿಸಿಕೊಳ್ಳುತ್ತದೆ. ನೀವು ಲೈಟ್ ಸ್ಟೈಲ್‌ಶೀಟ್ ಅನ್ನು ಅಪ್‌ಡೇಟ್ ಮಾಡುತ್ತೀರಿ. ಡಾರ್ಕ್ ಸ್ಟೈಲ್‌ಶೀಟ್ ಅನ್ನು ಕಣ್ಣಾಡಿಸಿ ನೋಡುತ್ತೀರಿ. ಬಹುಶಃ ನೀವು ಆ ಬದಲಾವಣೆಯನ್ನು ಕಾಪಿ ಮಾಡುವುದನ್ನು ನೆನಪಿಟ್ಟುಕೊಳ್ಳಬಹುದು ಅಥವಾ ಮರೆಯಬಹುದು. ಆ ಅಂತರವೇ ಗುಣಮಟ್ಟವನ್ನು ನಾಶಪಡಿಸುತ್ತದೆ. ನೀವು ಇನ್ನು ಮುಂದೆ ಒಂದು ಇಂಟರ್ಫೇಸ್ ಅನ್ನು ನಿರ್ವಹಿಸುತ್ತಿಲ್ಲ; ಬದಲಾಗಿ ಒಂದೇ ರೀತಿಯ HTML ಸ್ಕೆಲೆಟನ್ ಅನ್ನು ಹಂಚಿಕೊಳ್ಳುವ ಎರಡು ಸಮಾಂತರ ಇಂಟರ್ಫೇಸ್‌ಗಳನ್ನು ನಿರ್ವಹಿಸುತ್ತಿದ್ದೀರಿ.

ಥೀಮ್ ಡ್ರಿಫ್ಟ್ ಅನಿವಾರ್ಯ (Theme Drift Is Inevitable)

ಈ ಅಂತರಕ್ಕೆ ಒಂದು ಹೆಸರಿದೆ, ಇದನ್ನು ಫ್ರಂಟ್‌ಎಂಡ್ ತಂಡಗಳು ಗುರುತಿಸಲು ಪ್ರಾರಂಭಿಸಿವೆ: ಥೀಮ್ ಡ್ರಿಫ್ಟ್ (theme drift). ನಿಮ್ಮ ಎರಡು ಸ್ಟೈಲ್‌ಶೀಟ್‌ಗಳು ವಿಭಿನ್ನ ವೇಗದಲ್ಲಿ ವಿಕಸನಗೊಂಡಾಗ ಇದು ಸಂಭವಿಸುತ್ತದೆ. ಇಲ್ಲಿ ಒಂದು ಪ್ಯಾಡಿಂಗ್ ಅಡ್ಜಸ್ಟ್‌ಮೆಂಟ್, ಅಲ್ಲಿ ಒಂದು ಶ್ಯಾಡೋ ಟವೀಕ್. ಡಾರ್ಕ್ ಫೈಲ್ ನಿರ್ಲಕ್ಷಿತ ಸಹೋದರನಂತಾಗುತ್ತದೆ. ಅಥವಾ ಅದಕ್ಕಿಂತ最 ಕೆಟ್ಟದಾಗಿ, ಅದು ಭಯದ ಮೂಲವಾಗುತ್ತದೆ. ಡೆವಲಪರ್‌ಗಳು ಬದಲಾವಣೆಗಳನ್ನು ಮಾಡುವುದನ್ನು ತಪ್ಪಿಸಲು ಪ್ರಾರಂಭಿಸುತ್ತಾರೆ, ಏಕೆಂದರೆ ಒಂದು ಥೀಮ್ ಅನ್ನು ಬದಲಾಯಿಸುವುದು ಎಂದರೆ ಮತ್ತೊಂದು ಫೈಲ್‌ನಲ್ಲಿ ಹುಡುಕಿ ಅದೇ ಕೆಲಸವನ್ನು ಎರಡನೇ ಬಾರಿಗೆ ಮಾಡುವುದು ಎಂದರ್ಥ.

ಇದರಿಂದ ಉಂಟಾಗುವ ಮಾನಸಿಕ ಹೊರೆ (cognitive overhead) ವೇಗವಾಗಿ ಹೆಚ್ಚಾಗುತ್ತದೆ. ನೀವು CSS ಅನ್ನು ಒಮ್ಮೆ ಬರೆಯಬೇಕೆಂದು ಬಯಸಿದ್ದೀರಿ. ಬದಲಾಗಿ ನೀವು ಅದನ್ನು ಎರಡು ಬಾರಿ ಬರೆದಿದ್ದೀರಿ, ಮತ್ತು ಈಗ ಡಿಸೈನ್ ಸಿಸ್ಟಮ್ ಬದಲಾಗಿದ ಪ್ರತಿ ಬಾರಿಯೂ ನೀವು ಆ ಸಾಲದ ಮೇಲಿನ ಬಡ್ಡಿಯನ್ನು ಪಾವತಿಸುತ್ತಿದ್ದೀರಿ. ಲೈಟ್ ಫೈಲ್‌ನಲ್ಲಿ ಯಾರೋ ಫ್ಲೆಕ್ಸ್ ಗ್ಯಾಪ್ (flex gap) ಅನ್ನು ಅಪ್‌ಡೇಟ್ ಮಾಡಿ ಅದನ್ನು ಡಾರ್ಕ್ ಫೈಲ್‌ನಲ್ಲಿ ಮರೆತಿದ್ದರೆ, ಡಾರ್ಕ್ ಮೋಡ್‌ನಲ್ಲಿ ಐಕಾನ್‌ಗಳು ಅಸಮರ್ಪಕವಾಗಿ ಕಾಣಿಸುತ್ತವೆ. ಹೊಸ ಅಕ್ಸೆಸಿಬಿಲಿಟಿ ನಿಯಮವು ಕೇವಲ ಒಂದು ಶೀಟ್‌ನಲ್ಲಿ ಮಾತ್ರ ಅಳವಡಿಸಲ್ಪಟ್ಟಿದ್ದರೆ ಫೋಕಸ್ ರಿಂಗ್‌ಗಳು ಮಾಯವಾಗುತ್ತವೆ. UI ಕೇವಲ ತಪ್ಪಾಗಿ ಕಾಣಿಸುವುದಿಲ್ಲ; ಅದು ಕೆಟ್ಟುಹೋಗಿದಂತೆ ಭಾಸವಾಗುತ್ತದೆ.

ಸೆಮ್ಯಾಂಟಿಕ್ ಟೋಕನ್‌ಗಳನ್ನು ಬಳಸಿ (Use Semantic Tokens)

ಇದಕ್ಕೆ ಪರಿಹಾರ ಉತ್ತಮವಾದ ಡಿಫ್ (diff) ಟೂಲ್ ಅಥವಾ ಕಟ್ಟುನಿಟ್ಟಾದ ಕೋಡ್ ರಿವ್ಯೂ ಅಲ್ಲ. ಪರಿಹಾರವೆಂದರೆ ಬಣ್ಣದ ಬಗ್ಗೆ ಯೋಚಿಸುವ ವಿಭಿನ್ನ ವಿಧಾನ. ನಿಮ್ಮ ಸ್ಟೈಲ್‌ಗಳನ್ನು ಕೇವಲ ನೋಟದ ಆಧಾರದ ಮೇಲೆ ವಿಂಗಡಿಸುವುದನ್ನು ನಿಲ್ಲಿಸಿ ಮತ್ತು ಅವುಗಳ ಉದ್ದೇಶದ ಆಧಾರದ ಮೇಲೆ ವಿಂಗಡಿಸಲು ಪ್ರಾರಂಭಿಸಿ. ಇಲ್ಲೇ ಸೆಮ್ಯಾಂಟಿಕ್ ಟೋಕನ್‌ಗಳು (semantic tokens) ಕೆಲಸಕ್ಕೆ ಬರುತ್ತವೆ.

ಕಾರ್ಡ್‌ಗೆ ಬಿಳಿ ಹಿನ್ನೆಲೆಯನ್ನು (white background) ನೀಡುವ ಬದಲು, ಅದಕ್ಕೆ 'ಸರ್ಫೇಸ್ ಬ್ಯಾಕ್‌ಗ್ರೌಂಡ್' (surface background) ನೀಡಿ. ಪಠ್ಯಕ್ಕಾಗಿ ಕಪ್ಪು ಅಥವಾ ಆಫ್-ವೈಟ್ ನಡುವೆ ಆಯ್ಕೆ ಮಾಡುವ ಬದಲು, ಒಂದು 'ಟೆಕ್ಸ್ಟ್ ಕಲರ್' (text color) ಅನ್ನು ಆಯ್ಕೆ ಮಾಡಿ. ಬಳಕೆದಾರರು ಲೈಟ್ ಅಥವಾ ಡಾರ್ಕ್ ಮೋಡ್ ಅನ್ನು ಇಷ್ಟಪಡುತ್ತಾರೋ ಇಲ್ಲವೋ ಎಂಬುದು ಆ ಕಾಂಪೊನೆಂಟ್‌ಗೆ ತಿಳಿಯಬೇಕಿಲ್ಲ ಅಥವಾ ಅದರ ಅಗತ್ಯವೂ ಇಲ್ಲ. ಅದು ಕೇವಲ ತನ್ನ ಕೆಲಸಕ್ಕೆ ಹೊಂದಿಕೆಯಾಗುವ ಟೋಕನ್ ಅನ್ನು ಕೇಳುತ್ತದೆ.

ಒಂದು ಸ್ಟ್ಯಾಂಡರ್ಡ್ ಬಟನ್ ಬಗ್ಗೆ ಯೋಚಿಸಿ. ಎರಡು-ಫೈಲ್ ಜಗತ್ತಿನಲ್ಲಿ, .btn ಎಂಬುದು ಲೈಟ್ ಸ್ಟೈಲ್‌ಶೀಟ್‌ನಲ್ಲಿ ಬಿಳಿ ಹಿನ್ನೆಲೆ ಮತ್ತು ಕಪ್ಪು ಬಾರ್ಡರ್‌ನೊಂದಿಗೆ ಇರುತ್ತದೆ. ಅದರ ಅವಳಿ ಡಾರ್ಕ್ ಸ್ಟೈಲ್‌ಶೀಟ್‌ನಲ್ಲಿ ಕಪ್ಪು ಹಿನ್ನೆಲೆ ಮತ್ತು ತಿಳಿ ಬಾರ್ಡರ್‌ನೊಂದಿಗೆ ಇರುತ್ತದೆ. ಒಂದು ಬಟನ್‌ಗಾಗಿ ಇದು ಎರಡರಷ್ಟು ಕೋಡ್ ಎಂದರ್ಥ. ಟೋಕನ್‌ಗಳೊಂದಿಗೆ, .btn ಗೆ ಒಂದೇ ಒಂದು ಘೋಷಣೆ ಇರುತ್ತದೆ: ಹಿನ್ನೆಲೆಯು var(--color-surface-secondary) ಮತ್ತು ಬಾರ್ಡರ್ var(--color-border-default). ಈ ಮೌಲ್ಯಗಳು (values) ರೂಟ್‌ನಲ್ಲಿರುತ್ತವೆ. ಸೈಟ್ ಲೈಟ್ ಮೋಡ್‌ನಲ್ಲಿರುವಾಗ, --color-surface-secondary ಎಂಬುದು #f8f9fa ನಂತಹ ಮೌಲ್ಯಕ್ಕೆ ಬದಲಾಗುತ್ತದೆ. ಡಾರ್ಕ್ ಮೋಡ್‌ನಲ್ಲಿ, ಅದೇ ಟೋಕನ್ #2d2d2d ಗೆ ಬದಲಾಗುತ್ತದೆ. ಬಟನ್ ಕಾಂಪೊನೆಂಟ್ ಎಂದಿಗೂ ಬದಲಾಗುವುದಿಲ್ಲ, ಅದರ ಕೆಳಗಿರುವ ಡೇಟಾ ಮಾತ್ರ ಬದಲಾಗುತ್ತದೆ.

ರಚನೆ (structure) ಮತ್ತು ಡೇಟಾ ನಡುವಿನ ಈ ವ್ಯತ್ಯಾಸವು ಸೂಕ್ಷ್ಮವಾಗಿದ್ದರೂ ಶಕ್ತಿಯುತವಾಗಿದೆ. ನಿಮ್ಮ ಕಾರ್ಡ್ ಕಾಂಪೊನೆಂಟ್ ಲೇಔಟ್, ಸ್ಪೇಸಿಂಗ್, ಟೈಪೋಗ್ರಫಿ ಮತ್ತು ಎಲಿವೇಶನ್ ಅನ್ನು ಒಮ್ಮೆ ಮಾತ್ರ ವ್ಯಾಖ್ಯಾನಿಸುತ್ತದೆ. ನಿಮ್ಮ ಥೀಮ್ ಲೇಯರ್ ಪ್ಯಾಲೆಟ್ ಅನ್ನು ವ್ಯಾಖ್ಯಾನಿಸುತ್ತದೆ. CSS ಕಸ್ಟಮ್ ಪ್ರಾಪರ್ಟೀಸ್ (CSS custom properties) ಅನ್ನು ನಿರ್ಮಿಸಲಾಗಿದ್ದೇ ಇದೇ ಕಾರಣಕ್ಕಾಗಿ.

ಆರ್ಕಿಟೆಕ್ಚರ್ ಹೇಗೆ ಬದಲಾಗುತ್ತದೆ

ಈ ವಿಧಾನವು ನೀವು ಸ್ಟೈಲ್‌ಗಳನ್ನು ಬರೆಯುವ ರೀತಿಯನ್ನು ಮೂಲಭೂತವಾಗಿ ಮರುರಚಿಸುತ್ತದೆ.

ಹಳೆಯ ವಿಧಾನ ಸಾಮಾನ್ಯವಾಗಿ ಹೀಗಿರುತ್ತದೆ:

  • ಲೈಟ್ ಕಾರ್ಡ್ ಸ್ಟೈಲ್‌ಶೀಟ್ ដែល ಪ್ಯಾಡಿಂಗ್, ರೇಡಿಯಸ್, ಬ್ಯಾಕ್‌ಗ್ರೌಂಡ್, ಟೆಕ್ಸ್ಟ್ ಕಲರ್ ಮತ್ತು ಶ್ಯಾಡೋವನ್ನು ವ್ಯಾಖ್ಯಾನಿಸುತ್ತದೆ.
  • ಡಾರ್ಕ್ ಕಾರ್ಡ್ ಸ್ಟೈಲ್‌ಶೀಟ್ ដែល ಬಣ್ಣಗಳನ್ನು ಬದಲಾಯಿಸಲು ಬಹುತೇಕ ಅದೇ ಪ್ರಾಪರ್ಟಿಗಳನ್ನು ಮರು ವ್ಯಾಖ್ಯಾನಿಸುತ್ತದೆ.
  • ಯಾವ ಸ್ಟೈಲ್‌ಶೀಟ್ ಅನ್ನು ಲೋಡ್ ಮಾಡಬೇಕು ಅಥವಾ ಬಾಡಿಯಲ್ಲಿ ಯಾವ ಕ್ಲಾಸ್ ಅನ್ನು ಟೋಗಲ್ ಮಾಡಬೇಕು ಎಂದು ನಿರ್ಧರಿಸುವ ಲಾಜಿಕ್ ಲೇಯರ್.

ಹೊಸ ವಿಧಾನ ಹೀಗಿರುತ್ತದೆ:

  • ಲೇಔಟ್ ಅನ್ನು ವ್ಯಾಖ್ಯಾನಿಸುವ ಮತ್ತು ಸೆಮ್ಯಾಂಟಿಕ್ ಟೋಕನ್‌ಗಳನ್ನು ನಿಯೋಜಿಸುವ ಒಂದು ಕಾರ್ಡ್ ಸ್ಟೈಲ್‌ಶೀಟ್.
  • ಲೈಟ್ ಸಂದರ್ಭದಲ್ಲಿ ಆ ಟೋಕನ್‌ಗಳ ಅರ್ಥವೇನು ಎಂಬುದನ್ನು ವ್ಯಾಖ್ಯಾನಿಸುವ ಒಂದು ಥೀಮ್ ಫೈಲ್.
  • ಡಾರ್ಕ್ ಸಂದರ್ಭದಲ್ಲಿ ಆ ಟೋಕನ್‌ಗಳ ಅರ್ಥವೇನು ಎಂಬುದನ್ನು ವ್ಯಾಖ್ಯಾನಿಸುವ ಒಂದು ಥೀಮ್ ಫೈಲ್, ಅಥವಾ ಅದೇ ಫೈಲ್‌ನಲ್ಲಿ ಒಂದು ಬ್ಲಾಕ್.
  • ಕಾಂಪೊನೆಂಟ್ ಲೇಯರ್ ಅನ್ನು ಮುಟ್ಟದೆ ಮೌಲ್ಯದ ಲೇಯರ್ ಅನ್ನು ಬದಲಾಯಿಸುವ ಏಕೈಕ ಅಟ್ರಿಬ್ಯೂಟ್ ಸ್ವಾಪ್ (attribute swap).

ನೀವು ಸೆಟಪ್ ಅನ್ನು ಸ್ಥಿರವಾಗಿಡುತ್ತೀರಿ. ನೀವು ಕೇವಲ ಡೇಟಾವನ್ನು ಮಾತ್ರ ಬದಲಾಯಿಸುತ್ತೀರಿ. ವಿನ್ಯಾಸಕರು ಮೂರನೇ ಥೀಮ್ ಅನ್ನು ಪರಿಚಯಿಸಲು ಬಯಸಿದಾಗ, ಬಹುಶಃ ಹೈ-ಕಾಂಟ್ರಾಸ್ಟ್ ಮೋಡ್ ಅಥವಾ ಮಿಡ್‌ನೈಟ್ ಬ್ಲೂ ವೇರಿಯಂಟ್ ಅನ್ನು, ನೀವು ಕಾರ್ಡ್ ಅನ್ನು ಮತ್ತೆ ಬರೆಯುವ ಅಗತ್ಯವಿಲ್ಲ. ನೀವು ಟೋಕನ್ ಮ್ಯಾಪ್‌ಗೆ ಇನ್ನೊಂದು ಅಸೈನ್‌ಮೆಂಟ್ ಅನ್ನು ಸೇರಿಸುತ್ತೀರಿ. ಕಾಂಪೊನೆಂಟ್ ಯಾವುದೇ ಸಂಕೀರ್ಣತೆ ಇಲ್ಲದೆ ಸುಗಮವಾಗಿ ಕಾರ್ಯನಿರ್ವಹಿಸುತ್ತದೆ. ಅದಕ್ಕೆ ಇನ್ನೂ ಸರ್ಫೇಸ್ ಕಲರ್ ಬೇಕೇ ಬೇಕು. ಯಾವ ಸರ್ಫೇಸ್ ಕಲರ್ ಬಳಸಬೇಕೆಂದು ಥೀಮ್ ಅದನ್ನು ತಿಳಿಸುತ್ತದೆ.

ಡೇಟಾ ಅಟ್ರಿಬ್ಯೂಟ್ ಸ್ವಿಚ್

ಅನುಷ್ಠಾನವು (Implementation) ಸರಳವಾಗಿ ಮತ್ತು ಓದಲು ಸುಲಭವಾಗಿರಬಹುದು. ನಿಮ್ಮ HTML ಟ್ಯಾಗ್‌ಗೆ data-theme="dark" ನಂತಹ ಡೇಟಾ ಅಟ್ರಿಬ್ಯೂಟ್ ಅನ್ನು ಅನ್ವಯಿಸಿ ಮತ್ತು ನಿಮ್ಮ ಟೋಕನ್ ವ್ಯಾಖ್ಯಾನಗಳನ್ನು (token definitions) ಅದರ ಅಡಿಯಲ್ಲಿ ಸ್ಕೋಪ್ ಮಾಡಿ.

ಜಾವಾಸ್ಕ್ರಿಪ್ಟ್ (JavaScript) ರನ್ ಆಗುವ ಮೊದಲು ಪೇಜ್ ಸರಿಯಾಗಿ ಕಾಣಿಸಿಕೊಳ್ಳಲು, ಲೈಟ್ ಎಕ್ಸ್‌ಪೀರಿಯೆನ್ಸ್‌ಗಾಗಿ :root ನಲ್ಲಿ ನಿಮ್ಮ ಡಿಫಾಲ್ಟ್‌ಗಳನ್ನು ಸೆಟ್ ಮಾಡಿ. ನಂತರ [data-theme="dark"] ಅಡಿಯಲ್ಲಿ ಟೋಕನ್ ಮೌಲ್ಯಗಳನ್ನು ಓವರ್‌ರೈಡ್ ಮಾಡಿ. ಒಂದು ಸಣ್ಣ ಸ್ಕ್ರಿಪ್ಟ್ ಟಾಗಲ್ ಕ್ಲಿಕ್ ಅನ್ನು ಗಮನಿಸುತ್ತದೆ, ಅಟ್ರಿಬ್ಯೂಟ್ ಅನ್ನು ಅಪ್‌ಡೇಟ್ ಮಾಡುತ್ತದೆ ಮತ್ತು ಪೇಜ್‌ನಲ್ಲಿರುವ ಪ್ರತಿಯೊಂದು ಕಾಂಪೊನೆಂಟ್ ತಕ್ಷಣವೇ ಪ್ರತಿಕ್ರಿಯಿಸುತ್ತದೆ. ಪ್ರತ್ಯೇಕ ಎಲಿಮೆಂಟ್‌ಗಳ ಮೇಲೆ ಕ್ಲಾಸ್ ಥ್ರ್ಯಾಷಿಂಗ್ (class thrashing) ಮಾಡುವ ಅಗತ್ಯವಿಲ್ಲ. ರೆಂಡರ್ ಆಗುವ ಮಧ್ಯದಲ್ಲಿ ಸಂಪೂರ್ಣವಾಗಿ ಬೇರೆಯದೇ ಸ್ಟೈಲ್‌ಶೀಟ್ ಅನ್ನು ಇಂಪೋರ್ಟ್ ಮಾಡುವ ಅವಶ್ಯಕತೆಯಿಲ್ಲ. ಬ್ರೌಸರ್ ಈಗಾಗಲೇ ವೇರಿಯೇಬಲ್‌ಗಳನ್ನು ಮೆಮೊರಿಯಲ್ಲಿ ಇರಿಸಿಕೊಂಡಿರುತ್ತದೆ; ಅದು ಕೇವಲ ಹೊಸ ಮೌಲ್ಯಗಳೊಂದಿಗೆ ರೀಪೇಂಟ್ ಮಾಡುತ್ತದೆ.

ಇದು ನಿಮ್ಮ ಕೋಡ್ ಅನ್ನು ಅತ್ಯಂತ ಪ್ರಾಯೋಗಿಕವಾಗಿ ಸ್ವಚ್ಛವಾಗಿಡುತ್ತದೆ. .card ನ ಪ್ರತಿಯೊಂದು ಉದಾಹರಣೆಯನ್ನು ಹುಡುಕಲು ನೀವು ಎರಡು ಡೈರೆಕ್ಟರಿಗಳಲ್ಲಿ ಗ್ರೆಪ್ (grep) ಮಾಡುವ ಅಗತ್ಯವಿಲ್ಲ. ಒಂದೇ ನೋಡ್‌ನಲ್ಲಿ ಒಂದರ ಮೇಲೊಂದು ಇರಿಸಲಾದ ಸ್ಪರ್ಧಾತ್ಮಕ ಥೀಮ್ ಕ್ಲಾಸ್‌ಗಳ ನಡುವಿನ ಸ್ಪೆಸಿಫಿಕಾಟಿ ವಾರ್ಸ್ (specificity wars) ಬಗ್ಗೆ ನೀವು ಚಿಂತಿಸುವ ಅಗತ್ಯವಿಲ್ಲ. ನಿಮ್ಮ HTML ಓದಲು ಸುಲಭವಾಗಿರುತ್ತದೆ. ನಿಮ್ಮ CSS ಕೇಂದ್ರೀಕೃತವಾಗಿ ಮತ್ತು ಹುಡುಕಲು ಸುಲಭವಾಗಿರುತ್ತದೆ.

ಇದು ಮೌಲ್ಯಗಳ ಬಗ್ಗೆಯೇ ಹೊರತು ವರ್ಷನ್‌ಗಳ ಬಗ್ಗೆ ಅಲ್ಲ

ಡಾರ್ಕ್ ಮೋಡ್ ಎನ್ನುವುದು ಮೌಲ್ಯಗಳ (values) ಬಗ್ಗೆಯಾಗಿದೆ. ಇದು ನಿಮ್ಮ UI ನ ಎರಡನೇ ವರ್ಷನ್ ಅಲ್ಲ. ರಾತ್ರಿಯ ಸಮಯದಲ್ಲಿ ನಿಮ್ಮ ಕಾರ್ಡ್‌ನ ಮೂಲೆಗಳು ಹೆಚ್ಚು ದುಂಡಗಾಗುವುದಿಲ್ಲ. ನಿಮ್ಮ ಗ್ರಿಡ್ ಬೇರೆ ರೂಪಕ್ಕೆ ಕುಸಿಯುವುದಿಲ್ಲ. ನಿಮ್ಮ ಟೈಪ್ ಸ್ಕೇಲ್‌ಗೆ ಹೊಸ ಲಯದ ಅಗತ್ಯವಿಲ್ಲ. ಕೇವಲ ಬಣ್ಣಗಳು ಬದಲಾಗುತ್ತವೆ ಮತ್ತು ಕೆಲವೊಮ್ಮೆ ನೆರಳುಗಳು (shadows) ಸ್ವಲ್ಪ ಆಳವಾಗಿ ಕಾಣಿಸುತ್ತವೆ. ಡಾರ್ಕ್ ಮೋಡ್ ಅನ್ನು ಸಂಪೂರ್ಣ ರಿಸ್ಕಿನ್ (reskin) ಎಂದು ಪರಿಗಣಿಸುವುದು ಅತಿಯಾದ ಇಂಜಿನಿಯರಿಂಗ್ ಆಗಿದ್ದು, ಇದು ನಿರ್ವಹಣೆಯ (maintenance) ತೊಂದರೆಗಳನ್ನು ಉಂಟುಮಾಡುತ್ತದೆ.

ಇದನ್ನು ಸರಿಯಾಗಿ ಅರ್ಥಮಾಡಿಕೊಂಡ ತಂಡಗಳು ತಮ್ಮ ಡಿಸೈನ್ ಸಿಸ್ಟಮ್ ಅನ್ನು ಡೇಟಾಬೇಸ್‌ನಂತೆ ಪರಿಗಣಿಸುತ್ತವೆ. ಕಾಂಪೊನೆಂಟ್‌ಗಳು ಹೆಸರಿನ ಮೂಲಕ ಪ್ರಾಪರ್ಟಿಗಳಿಗಾಗಿ ಕ್ವೆರಿ (query) ಮಾಡುತ್ತವೆ. ಥೀಮ್‌ಗಳು ರೆಕಾರ್ಡ್‌ಗಳನ್ನು ಒದಗಿಸುತ್ತವೆ. ಲೈಟ್‌ನಿಂದ ಡಾರ್ಕ್‌ಗೆ ಬದಲಾಯಿಸುವುದು ಕೇವಲ ಕ್ವೆರಿ ಪ್ಯಾರಾಮೀಟರ್ ಬದಲಾವಣೆಯಾಗಿದೆ, ಸ್ಕೀಮಾ ರೀರೈಟ್ (schema rewrite) ಅಲ್ಲ.

ಅಂತಹ ಮನೋಭಾವವೇ ನಿಮ್ಮನ್ನು ಥೀಮ್ ಡ್ರಿಫ್ಟ್‌ನಿಂದ (theme drift) ಉಳಿಸುತ್ತದೆ. ಒಂದು ಕಾರ್ಡ್. ಒಂದು ಬಟನ್. ಸ್ಪೇಸಿಂಗ್ ಮತ್ತು ಸೈಸಿಂಗ್‌ಗಾಗಿ ಒಂದು ಮೂಲ ಸತ್ಯ (source of truth). ಪ್ಯಾಲೆಟ್ ಒಂದೇ ಕಡೆ ಇರುತ್ತದೆ, ತಾರ್ಕಿಕವಾಗಿ ಮ್ಯಾಪ್ ಮಾಡಲ್ಪಟ್ಟಿರುತ್ತದೆ ಮತ್ತು ಬಳಕೆದಾರರು ಇಷ್ಟಪಡುವ ಯಾವುದೇ ಪರಿಸರಕ್ಕೆ ಸಿದ್ಧವಾಗಿರುತ್ತದೆ.

ನಿಜವಾದ ಸಾರಾಂಶ

ನೀವು ಲೈಟ್ ಮತ್ತು ಡಾರ್ಕ್ ಮೋಡ್‌ಗಾಗಿ ಎರಡು CSS ಫೈಲ್‌ಗಳನ್ನು ನಿರ್ವಹಿಸುತ್ತಿದ್ದರೆ, ನೀವು ಥೀಮಿಂಗ್ ಮಾಡುತ್ತಿಲ್ಲ. ನೀವು ಕ್ಲೋನಿಂಗ್ ಮಾಡುತ್ತಿದ್ದೀರಿ. ಸೆಮ್ಯಾಂಟಿಕ್ ಟೋಕನ್‌ಗಳಿಗೆ (semantic tokens) ಬದಲಾಗಿ, ಅವುಗಳನ್ನು ರೂಟ್-ಲೆವೆಲ್ ಡೇಟಾ ಅಟ್ರಿಬ್ಯೂಟ್‌ನೊಂದಿಗೆ ಸ್ಕೋಪ್ ಮಾಡಿ ಮತ್ತು ನಿಮ್ಮ ಕಾಂಪೊನೆಂಟ್‌ಗಳು ನೋಟವನ್ನು ಹಾರ್ಡ್‌ಕೋಡ್ ಮಾಡುವ ಬದಲು ರೋಲ್‌ಗಳಿಗಾಗಿ (roles) ಕೇಳುವಂತೆ ಮಾಡಿ. ಆರಂಭಿಕ ರಿಫ್ಯಾಕ್ಟರ್ (refactor) ಪ್ರಯತ್ನವನ್ನು ತೆಗೆದುಕೊಳ್ಳಬಹುದು, ಆದರೆ ಪರ್ಯಾಯವಾಗಿ ನೀವು ಸಮಾಂತರ ಸ್ಟೈಲ್‌ಶೀಟ್‌ಗಳ ನಡುವೆ ಅಂತ್ಯವಿಲ್ಲದ ಹೋರಾಟವನ್ನು ಮಾಡಬೇಕಾಗುತ್ತದೆ. ಒಂದೇ ಕಾರ್ಡ್ ಅನ್ನು ಎರಡು ಬಾರಿ ಬರೆಯಲು ಜೀವನ ತುಂಬಾ ಚಿಕ್ಕದು.