වෙබ් අඩවි හා මොබයිල් ඇප්ස් වල ඩාර්ක් මෝඩ් දැන් අතිශය ජනප්රියයි. බොහෝ සංවර්ධකයින් එය ක්රියාත්මක කිරීමට styles.css සහ dark.css වැනි දෙකක් භාවිතා කරනවා. එය කුඩා UI එකකට හොඳට පෙනුනත්, පද්ධතිය විශාල වීමත් සමඟ ගැටලු බොහෝ වේ.
දෙවන CSS ගොනුවක් භාවිතා කරන විට, එක් කොම්පෝනෙන්ට් එකක් styles.css තුළ වෙනස් කළහොත්, dark.css හි සම්බන්ධිත නියමය අමතක වීමේ අවදානම ඉහළ යයි. නව hover, focus, disabled වැනි තත්ත්වයන් එකතු කළාම, ඒවායේ ඩාර්ක් මෝඩ් අනුවාදයද අමතක නොවෙයි. මෙය theme drift ලෙස හඳුන්වයි – එමඟින් නවීකරණය කිරීමට වැඩි කාලය හා පරිශීලක අත්දැකීම අඩු වේ.
ඉතා හොඳ විසඳුම නම්, කොම්පෝනෙන්ට් CSS එක semantic tokens භාවිතා කර ලියන්නයි. background, color වැනි අගයන් සෘජුවම #hex වර්ණවලින් නොලියා, var(--color-surface), var(--color-primary) වැනි කේත නාමයන් ලෙස සලකන්න. එවිට තේමාව (light හෝ dark) ඒ නාමයන්ට අදාළ වර්ණයන් පුරවා දෙනවා.
උදාහරණයක් ලෙස, .card කොම්පෝනෙන්ට් එක මෙහෙම ලියයි:
- .card { background: var(--color-surface); color: var(--color-foreground); border: 1px solid var(--color-border); }
මෙහි තේමාව වෙනස් කරන එක :root තුළ token අගයන් වෙනස් කිරීමෙන් පමණි. Light තේමාව සඳහා --color-surface: #ffffff වැනි අගයන් දී, dark තේමාවට --color-surface: #0f172a ලෙස වෙනස් කළ හැකිය. මේ පරිදි එක් CSS ගොනුවක් තුළම සියලු තේමා නියමයන් පාලනය කළ හැකිය.
ශ්රී ලංකාවට ඇති වැදගත්කම
ශ්රී ලංකාවේ තරුණ සංවර්ධකයින්ට මෙය විශාල පසුබැසීමක්. Token‑based theming භාවිතා කරලා ලියන කේතය නියමිතවම අඩු වශයෙන් පවත්වා ගත හැක, එමඟින් දෝෂයන් අඩුවේ, කාලය ඉතිරි වේ. එමෙන්ම, දේශීය තාක්ෂණ සමාගම් සඳහා අඩු පරිපාලන පිරිවැයක් සහිත UI/UX නිර්මාණයක් සපයයි.
ඉතින්, පාඨමාලා, වැඩමුළු, සහ කම්පැනි ඇතුළත් පරිසරයන්ට මෙය අත්යවශ්ය. කේතය එකම ස්ථානයේම නියම කිරීම නිසා, නවතම design system හෝ branding වෙනස්කම් ඉක්මනින් ඇතුළත් කළ හැකිය. එමෙන්ම, ඩාර්ක් මෝඩ් අනුග්රහය සමඟ පරිශීලක අත්දැකීම වැඩි කර, මොබයිල් දත්ත පරිභෝජනය අඩු කරයි.
අවසානයේ, දෙකම CSS ගොනුවක් භාවිතා කිරීමේ පරණ ක්රමයට වඩා, token‑based theming අනුගමනය කිරීම කාලය, සම්පත්, සහ පරිශීලක සතුට තුනක්ම උදව් කරන ලදි.
