டெவலப்பர்கள் விரைவான வெற்றிகளை விரும்புகிறார்கள். ஒரு டிக்கெட்டில் "dark mode சேர்க்கவும்" என்று சொல்லப்பட்டால், மிக எளிதான வழி தெளிவாகத் தெரியும்: light.css எழுதுங்கள், dark.css எழுதுங்கள், மேலும் அவற்றுக்கிடையே மாறி மாறிப் பயன்படுத்துங்கள் (toggle). இது சுத்தமாகத் தோன்றும். இது வேகமாகச் செய்து முடிக்க முடியும். மூன்று கூறுகளைக் கொண்ட ஒரு சிறிய பக்கத் திட்டத்திற்கு (side project), இது சரியாக இருக்கலாம். ஆனால் உங்கள் பயன்பாடு சில தொகுதிகளைத் தாண்டி வளரும்போது, அந்த இரண்டாவது கோப்பு ஒரு சொத்தாக (asset) இருப்பதற்குப் பதிலாக, இரட்டிப்பாகப் பராமரிக்க வேண்டிய ஒரு சுமையாக (liability) மாறிவிடும்.

இரண்டு-கோப்பு பொறி (The Two-File Trap)

ஆரம்பத்தில் இந்தத் தர்க்கம் சரியாகத் தோன்றலாம். பணிகளைப் பிரித்தல் (Separation of concerns), இல்லையா? வெளிச்சமான விஷயங்கள் இங்கே, இருட்டான விஷயங்கள் அங்கே. உங்கள் எடிட்டரில் இரண்டு பஃபர்களைத் (buffers) திறக்கிறீர்கள். வெளிச்சமான கோப்பிலிருந்து கார்டு ஸ்டைல்களை (card styles) இருண்ட கோப்பிற்கு நகலெடுக்கிறீர்கள், #ffffff-க்கு பதிலாக #1a1a1a-வை மாற்றுகிறீர்கள், வேலையை முடித்துவிடுகிறீர்கள்.

பிரச்சனை முதல் வாரத்தில் இல்லை. பிரச்சனை ஆறாவது மாதத்தில் வரும், ஒரு வடிவமைப்பாளர் (designer) முதன்மை பொத்தானில் (primary button) சற்று மாறுபட்ட border radius-ஐக் கேட்கும்போது, அல்லது தயாரிப்புக் குழு (product team) செக்அவுட் படிவத்தில் (checkout form) ஒரு புதிய எச்சரிக்கை நிலையை (warning state) விரும்பும்போது பிரச்சனை வரும். நீங்கள் light stylesheet-ஐப் புதுப்பிக்கிறீர்கள். dark stylesheet-ஐ மேலோட்டமாகப் பார்க்கிறீர்கள். ஒருவேளை அந்த மாற்றத்தை நகலெடுக்க நினைவில் இருக்கலாம். அல்லது மறக்கலாம். அந்த இடைவெளியில்தான் தரம் குறைகிறது. நீங்கள் இனி ஒரு இடைமுகத்தை (interface) மட்டும் பராமரிக்கவில்லை. ஒரே HTML கட்டமைப்பைப் பகிர்ந்து கொள்ளும் இரண்டு இணையான இடைமுகங்களைப் பராமரிக்கிறீர்கள்.

Theme Drift தவிர்க்க முடியாதது

இந்த இடைவெளியை முன்பக்கக் குழுக்கள் (frontend teams) அடையாளம் காணத் தொடங்கியுள்ள ஒரு பெயர் உண்டு: theme drift. உங்கள் இரண்டு ஸ்டைல்ஷீட்களும் வெவ்வேறு வேகத்தில் வளரும்போது இது நிகழ்கிறது. இங்கே ஒரு padding சரிசெய்தல். அங்கே ஒரு shadow மாற்றம். இருண்ட கோப்பு கவனிக்கப்படாத ஒரு சகோதரனாக மாறிவிடுகிறது. அல்லது அதைவிட மோசமாக, அது ஒரு பயத்தின் ஆதாரமாக மாறுகிறது. டெவலப்பர்கள் மாற்றங்களைத் தவிர்க்கத் தொடங்குகிறார்கள், ஏனெனில் ஒரு தீம் (theme) மாற்றமடையும் போது, மற்றொரு கோப்பிலும் அதே வேலையைத் திரும்பச் செய்யத் தேட வேண்டியுள்ளது.

புரிந்துகொள்ளும் சிரமம் (cognitive overhead) வேகமாக அதிகரிக்கிறது. நீங்கள் CSS-ஐ ஒருமுறை எழுத விரும்பினீர்கள். அதற்குப் பதிலாக நீங்கள் அதை இருமுறை எழுதினீர்கள், இப்போது டிசைன் சிஸ்டம் (design system) மாற마다 அந்தத் தவறுக்கான வட்டியைக் கட்டிக் கொண்டிருக்கிறீர்கள். யாரோ ஒருவர் light file-இல் flex gap-ஐப் புதுப்பித்துவிட்டு, அதை dark file-இல் செய்ய மறந்ததால், dark mode-இல் ஐகான்கள் (icons) வரிசை மாறுகின்றன. ஒரு புதிய அணுகல்தன்மை விதி (accessibility rule) ஒரு ஷீட்டில் மட்டுமே சேர்க்கப்பட்டதால், focus rings மறைந்துவிடுகின்றன. UI தவறாகத் தெரிவது மட்டுமல்ல, அது உடைந்துவிட்டது போன்ற உணர்வையும் தருகிறது.

Semantic Tokens-ஐப் பயன்படுத்துங்கள்

இதற்கான தீர்வு சிறந்த diff கருவி அல்லது கடுமையான code review அல்ல. தீர்வு என்பது நிறத்தைப் பற்றிய ஒரு மாறுபட்ட சிந்தனை முறைதான். உங்கள் ஸ்டைல்களை அவற்றின் தோற்றத்தைக் கொண்டு வகைப்படுத்துவதை நிறுத்திவிட்டு, அவற்றின் நோக்கத்தைக் கொண்டு வகைப்படுத்தத் தொடங்குங்கள். இங்கேயே semantic tokens பயன்படுகின்றன.

ஒரு கார்டுக்கு வெள்ளை பின்னணியை (white background) ஒதுக்குவதற்குப் பதிலாக, அதற்கு ஒரு surface background-ஐ ஒதுக்குங்கள். உரையில் (text) கருப்பு அல்லது ஆஃப்-ஒயிட் (off-white) ஆகியவற்றில் ஒன்றைத் தேர்ந்தெடுப்பதற்குப் பதிலாக, ஒரு text color-ஐத் தேர்ந்தெடுங்கள். பயனர் வெளிச்சமான அல்லது இருட்டான முறையை விரும்புகிறாரா என்பதை அந்தத் தொகுதி (component) அறியாது அல்லது கவலைப்படாது. அது தனது பணிக்குத் தேவையான டோக்கனை (token) மட்டும் கேட்கிறது.

ஒரு சாதாரண பொத்தானைப் (button) பற்றிச் சிந்தியுங்கள். இரண்டு-கோப்பு உலகில், .btn என்பது light stylesheet-இல் வெள்ளை பின்னணி மற்றும் இருண்ட பார்டர் (border) உடன் இருக்கும். அதன் இரட்டைப் பிரதி dark stylesheet-இல் கருப்பு போன்ற பின்னணி மற்றும் வெளிச்சமான பார்டர் உடன் இருக்கும். ஒரு பொத்தானுக்காக இருமுறை குறியீடு (code) எழுதப்படுகிறது. டோக்கன்களுடன், .btn-க்கு ஒரே ஒரு அறிவிப்பு (declaration) மட்டுமே இருக்கும்: பின்னணி var(--color-surface-secondary) மற்றும் பார்டர் var(--color-border-default). மதிப்புகள் (values) ரூட்டில் (root) இருக்கும். தளம் light mode-இல் இருக்கும்போது, --color-surface-secondary என்பது #f8f9fa போன்ற ஒரு மதிப்பிற்கு மாறும். dark mode-இல், அதே டோக்கன் #2d2d2d என மாறும். பொத்தான் தொகுதி (button component) ஒருபோதும் மாறாது. அதன் அடியில் உள்ள தரவு (data) மட்டுமே மாறுகிறது.

அமைப்புக்கும் (structure) தரவுக்கும் (data) இடையிலான இந்த வேறுபாடு நுட்பமானது ஆனால் சக்தி வாய்ந்தது. உங்கள் கார்டு தொகுதி (card component) layout, spacing, typography மற்றும் elevation ஆகியவற்றை ஒருமுறை வரையறுக்கிறது. உங்கள் தீம் அடுக்கு (theme layer) வண்ணத் தொகுப்பை (palette) வரையறுக்கிறது. அந்தப் பிரிவே CSS custom properties உருவாக்கப்படக் காரணமானதாகும்.

கட்டமைப்பு எவ்வாறு மாறுகிறது

இந்த அணுகுமுறை நீங்கள் ஸ்டைல்களை எழுதும் முறையை அடிப்படையாக மாற்றியமைக்கிறது.

பழைய முறை பொதுவாக இவ்வாறு இருக்கும்:

  • padding, radius, background, text color மற்றும் shadow ஆகியவற்றை வரையறுக்கும் ஒரு light card stylesheet.
  • வண்ணங்களை மாற்றுவதற்காக அதே பண்புகளை மீண்டும் வரையறுக்கும் ஒரு dark card stylesheet.
  • எந்த ஸ்டைல்ஷீட்டை ஏற்ற வேண்டும் அல்லது body-யில் எந்த வகுப்பை (class) மாற்ற வேண்டும் என்று தீர்மானிக்கும் ஒரு logic layer.

புதிய முறை இவ்வாறு இருக்கும்:

  • layout மற்றும் semantic tokens-களை ஒதுக்கும் ஒரு card stylesheet.
  • light சூழலில் அந்த டோக்கன்கள் எதைக் குறிக்கின்றன என்பதை வரையறுக்கும் ஒரு theme file.
  • dark சூழலில் அந்த டோக்கன்கள் எதைக் குறிக்கின்றன என்பதை வரையறுக்கும் ஒரு theme file, அல்லது அதே கோப்பில் உள்ள ஒரு பகுதி.
  • component layer-ஐ தொடாமல், value layer-ஐ மாற்றும் ஒரு ஒற்றை attribute swap.

நீங்கள் அமைப்பை (setup) நிலையாக வைத்திருக்கிறீர்கள். நீங்கள் தரவை (data) மட்டுமே மாற்றுகிறீர்கள். வடிவமைப்பாளர் (designer) ஒரு மூன்றாவது கருப்பொருளை (theme) அறிமுகப்படுத்த விரும்பும்போது, உதாரணமாக ஒரு உயர்-மாறுபாடு பயன்முறை (high-contrast mode) அல்லது மிட்நைட் ப்ளூ மாறுபாட்டை (midnight blue variant), நீங்கள் கார்டை (card) மீண்டும் எழுதத் தேவையில்லை. டோக்கன் மேப்பில் (token map) நீங்கள் இன்னும் ஒரு ஒதுக்கீட்டைச் சேர்த்தால் போதும். அந்த காம்போனென்ட் (component) எளியதாகவும் மகிழ்ச்சியாகவும் இருக்கும். அதற்கு இன்னும் ஒரு மேற்பரப்பு நிறம் (surface color) தேவைப்படும். எந்த மேற்பரப்பு நிறத்தைப் பயன்படுத்த வேண்டும் என்பதை அந்தத் தீம் (theme) சொல்லும்.

டேட்டா அட்ரிபியூட் மாற்றம்

செயல்படுத்தல் (Implementation) எளிமையாகவும் வாசிக்கக்கூடியதாகவும் இருக்கலாம். உங்கள் HTML டேக்கிற்கு (tag) data-theme="dark" போன்ற ஒரு டேட்டா அட்ரிபியூட்டைப் (data attribute) பயன்படுத்துங்கள், மேலும் உங்கள் டோக்கன் வரையறைகளை (token definitions) அதன் கீழ் வரச் செய்யுங்கள்.

ஜாவாஸ்கிரிப்ட் (JavaScript) இயங்குவதற்கு முன்பே பக்கம் சரியாகத் தெரியும்படி, லைட் எக்ஸ்பீரியன்ஸிற்காக (light experience) :root-இல் உங்கள் இயல்புநிலை மதிப்புகளை (defaults) அமைக்கவும். பின்னர் [data-theme="dark"]-இன் கீழ் டோக்கன் மதிப்புகளை மாற்றியமைக்கவும் (override). ஒரு சிறிய ஸ்கிரிப்ட் (script) டோகிள் கிளிக் (toggle click) செய்வதைக் கண்காணித்து, அட்ரிபியூட்டைப் புதுப்பிக்கும், இதனால் பக்கத்தில் உள்ள ஒவ்வொரு காம்போனென்ட்டும் உடனடியாகப் பதிலளிக்கும். தனித்தனி எலிமெண்ட்களில் (elements) கிளாஸ் மாற்றங்கள் (class thrashing) தேவையில்லை. ரெண்டரிங் (render) நின்ற இடத்திலேயே முற்றிலும் வேறொரு ஸ்டைல்ஷீட்டை (stylesheet) இறக்குமதி செய்ய வேண்டிய அவசியமில்லை. பிரவுசரின் (browser) நினைவகத்தில் ஏற்கனவே மாறிகள் (variables) இருக்கும்; அது புதிய மதிப்புகளுடன் மீண்டும் வரைந்துவிடும் (repaints).

இது உங்கள் குறியீட்டை (code) மிகவும் நடைமுறை ரீதியாகத் தூய்மையாக வைத்திருக்கும். .card-ன் ஒவ்வொரு இடத்தையும் கண்டறிய நீங்கள் இரண்டு கோப்பகங்களில் (directories) தேட வேண்டியதில்லை. ஒரே நோடில் (node) அடுக்கி வைக்கப்பட்டிருக்கும் போட்டியிடும் தீம் கிளாஸ்களுக்கு (theme classes) இடையிலான ஸ்பெசிபிசிட்டிப் போர்களைப் (specificity wars) பற்றி நீங்கள் கவலைப்படத் தேவையில்லை. உங்கள் HTML வாசிக்கக்கூடியதாக இருக்கும். உங்கள் CSS மையப்படுத்தப்பட்டதாகவும் (centralized) தேடக்கூடியதாகவும் (searchable) இருக்கும்.

இது மதிப்புகளைப் பற்றியது, பதிப்புகளைப் பற்றியது அல்ல

டார்க் மோட் (Dark mode) என்பது மதிப்புகளைப் பற்றியது. இது உங்கள் UI-ன் இரண்டாவது பதிப்பல்ல. இரவில் உங்கள் கார்டின் மூலைகள் அதிக வளைவுடன் இருக்காது. உங்கள் கிரிட் (grid) வேறு வடிவத்திற்கு மாறாது. உங்கள் டைப் ஸ்கேலுக்கு (type scale) புதிய தாளம் தேவையில்லை. நிறங்கள் மட்டுமே மாறும், சில நேரங்களில் நிழல்கள் (shadows) சற்று ஆழமாகத் தெரியும். டார்க் மோடை ஒரு முழுமையான ரீஸ்கின் (reskin) ஆகக் கருதுவது பராமரிப்புச் சிக்கல்களை (maintenance nightmares) உருவாக்கும் ஒரு அதிகப்படியான இன்ஜினியரிங் (over-engineering) ஆகும்.

இதைச் சரியாகச் செய்யும் குழுக்கள் தங்கள் டிசைன் சிஸ்டத்தை (design system) ஒரு டேட்டாபேஸ் (database) போலக் கருதுகிறார்கள். காம்போனென்ட்கள் பெயரின் மூலம் பண்புகளைத் (properties) தேடுகின்றன (query). தீம்கள் அந்தத் தரவுகளை (records) வழங்குகின்றன. லைட்டிலிருந்து டார்க்கிற்கு மாறுவது என்பது ஒரு குயரி பாராமீட்டர் (query parameter) மாற்றம் மட்டுமே, ஸ்கீமா ரீரைட் (schema rewrite) அல்ல.

அந்த மனநிலைதான் உங்களை தீம் டிரிஃப்ட் (theme drift) என்பதிலிருந்து காப்பாற்றுகிறது. ஒரு கார்டு. ஒரு பட்டன். இடைவெளி (spacing) மற்றும் அளவிற்கான (sizing) ஒரே உண்மை ஆதாரம் (source of truth). வண்ணத் தொகுப்பு (palette) ஒரே இடத்தில், தர்க்கரீதியாக மேப் செய்யப்பட்டு (logically mapped), பயனர் விரும்பும் எந்தச் சூழலுக்கும் தயாராக இருக்கும்.

உண்மையான கருத்து

நீங்கள் லைட் மற்றும் டார்க் மோடுக்காக இரண்டு CSS கோப்புகளைப் பராமரித்தால், நீங்கள் தீமிங் (theming) செய்யவில்லை; நீங்கள் நகலெடுக்கிறீர்கள் (cloning). செமாண்டிக் டோக்கன்களுக்கு (semantic tokens) மாறுங்கள், அவற்றை ரூட்-லெவல் டேட்டா அட்ரிபியூட்டுடன் (root-level data attribute) இணைக்கவும், மேலும் உங்கள் காம்போனென்ட்கள் தோற்றத்தை நேரடியாகக் குறியீட்டில் எழுதாமல் (hardcoding appearances), அவற்றின் பங்குகளைக் (roles) கேட்கட்டும். ஆரம்பக்கட்ட ரீஃபாக்டரிங் (refactor) முயற்சி தேவைப்படலாம், ஆனால் அதற்குப் பதிலாகச் செய்ய வேண்டியது இணையாக இருக்கும் ஸ்டைல்ஷீட்களில் (parallel stylesheets) முடிவில்லாத போராட்டமாகும். ஒரே கார்டை இரண்டு முறை எழுதுவதற்கு வாழ்க்கை மிகவும் சிறியது.