Developers love a quick win. When the ticket says "add dark mode," the path of least resistance looks obvious: write , w

ਡੈਵਲਪਰਾਂ ਨੂੰ ਜਲਦੀ ਮਿਲਣ ਵਾਲੀ ਸਫਲਤਾ ਪਸੰਦ ਹੁੰਦੀ ਹੈ। ਜਦੋਂ ਟਿਕਟ ਵਿੱਚ "ਡਾਰਕ ਮੋਡ ਜੋੜੋ" ਲਿਖਿਆ ਹੁੰਦਾ ਹੈ, ਤਾਂ ਸਭ ਤੋਂ ਸੌਖਾ ਰਸਤਾ ਸਾਫ਼ ਦਿਖਾਈ ਦਿੰਦਾ ਹੈ: light.css ਲਿਖੋ, dark.css ਲਿਖੋ, ਅਤੇ ਉਹਨਾਂ ਵਿਚਕਾਰ ਟੌਗਲ ਕਰੋ। ਇਹ ਸਾਫ਼ ਲੱਗਦਾ ਹੈ। ਇਹ ਤੇਜ਼ੀ ਨਾਲ ਸ਼ਿਪ ਹੁੰਦਾ ਹੈ। ਤਿੰਨ ਕੰਪੋਨੈਂਟਾਂ ਵਾਲੇ ਇੱਕ ਛੋਟੇ ਸਾਈਡ ਪ੍ਰੋਜੈਕਟ ਲਈ, ਇਹ ਸ਼ਾਇਦ ਚੱਲ ਵੀ ਜਾਵੇ। ਪਰ ਇੱਕ ਵਾਰ ਜਦੋਂ ਤੁਹਾਡੀ ਐਪਲੀਕੇਸ਼ਨ ਕੁਝ ਮੋਡਿਊਲਾਂ ਤੋਂ ਵੱਧ ਵਧ ਜਾਂਦੀ ਹੈ, ਤਾਂ ਉਹ ਦੂਜੀ ਫਾਈਲ ਇੱਕ ਸੰਪਤੀ (asset) ਰਹਿਣ ਦੀ ਬਜਾਏ ਇੱਕ ਬੋਝ ਬਣ ਜਾਂਦੀ ਹੈ ਜਿਸ ਨੂੰ ਤੁਹਾਨੂੰ ਦੋਹਰਾ ਰੱਖਣਾ ਪੈਂਦਾ ਹੈ।

ਦੋ-ਫਾਈਲ ਵਾਲਾ ਜਾਲ (The Two-File Trap)

ਪਹਿਲੀ ਨਜ਼ਰ ਵਿੱਚ ਤਰਕ ਸਹੀ ਲੱਗਦਾ ਹੈ। ਕੰਮਾਂ ਦੀ ਵੰਡ (Separation of concerns), ਹੈ ਨਾ? ਹਲਕੀਆਂ ਚੀਜ਼ਾਂ ਇੱਧਰ, ਹਨੇਰੀਆਂ ਚੀਜ਼ਾਂ ਉੱਧਰ। ਤੁਸੀਂ ਆਪਣੇ ਐਡੀਟਰ ਵਿੱਚ ਦੋ ਬਫਰ ਖੋਲ੍ਹਦੇ ਹੋ। ਤੁਸੀਂ ਹਲਕੀ ਫਾਈਲ ਤੋਂ ਕਾਰਡ ਸਟਾਈਲ ਨੂੰ ਹਨੇਰੀ ਫਾਈਲ ਵਿੱਚ ਕਾਪੀ ਕਰਦੇ ਹੋ, #ffffff ਨੂੰ #1a1a1a ਨਾਲ ਬਦਲਦੇ ਹੋ, ਅਤੇ ਆਪਣਾ ਕੰਮ ਖਤਮ ਕਰ ਲੈਂਦੇ ਹੋ।

ਸਮੱਸਿਆ ਪਹਿਲੇ ਹਫ਼ਤੇ ਵਿੱਚ ਨਹੀਂ ਹੁੰਦੀ। ਸਮੱਸਿਆ ਛੇਵੇਂ ਮਹੀਨੇ ਵਿੱਚ ਹੁੰਦੀ ਹੈ, ਜਦੋਂ ਇੱਕ ਡਿਜ਼ਾਈਨਰ ਪ੍ਰਾਇਮਰੀ ਬਟਨ 'ਤੇ ਥੋੜ੍ਹਾ ਵੱਖਰਾ ਬਾਰਡਰ ਰੇਡੀਅਸ ਮੰਗਦਾ ਹੈ, ਜਾਂ ਜਦੋਂ ਪ੍ਰੋਡਕਟ ਟੀਮ ਚੈੱਕਆਊਟ ਫਾਰਮ 'ਤੇ ਇੱਕ ਨਵਾਂ ਵਾਰਨਿੰਗ ਸਟੇਟ ਚਾਹੁੰਦੀ ਹੈ। ਤੁਸੀਂ ਹਲਕੀ ਸਟਾਈਲਸ਼ੀਟ ਨੂੰ ਅਪਡੇਟ ਕਰਦੇ ਹੋ। ਤੁਸੀਂ ਹਨੇਰੀ ਸਟਾਈਲਸ਼ੀਟ ਨੂੰ ਅੰਦਾਜ਼ੇ ਨਾਲ ਦੇਖਦੇ ਹੋ। ਸ਼ਾਇਦ ਤੁਹਾਨੂੰ ਬਦਲਾਅ ਨੂੰ ਕਾਪੀ ਕਰਨਾ ਯਾਦ ਰਹੇ। ਸ਼ਾਇਦ ਨਾ ਰਹੇ। ਉਹੀ ਖਾਲੀ ਥਾਂ ਹੈ ਜਿੱਥੇ ਕੁਆਲਿਟੀ ਖਤਮ ਹੋ ਜਾਂਦੀ ਹੈ। ਤੁਸੀਂ ਹੁਣ ਇੱਕ ਇੰਟਰਫੇਸ ਨੂੰ ਮੇਨਟੇਨ ਨਹੀਂ ਕਰ ਰਹੇ। ਤੁਸੀਂ ਦੋ ਸਮਾਨਾਂਤਰ (parallel) ਇੰਟਰਫੇਸਾਂ ਨੂੰ ਮੇਨਟੇਨ ਕਰ ਰਹੇ ਹੋ ਜੋ ਇੱਕੋ HTML ਸਕੇਲੇਟਨ ਸਾਂਝਾ ਕਰਦੇ ਹਨ।

ਥੀਮ ਡ੍ਰਿਫਟ (Theme Drift) ਅਟੱਲ ਹੈ

ਇਸ ਖਾਲੀ ਥਾਂ ਦਾ ਇੱਕ ਨਾਮ ਹੈ ਜਿਸ ਨੂੰ ਫਰੰਟਐਂਡ ਟੀਮਾਂ ਪਛਾਣਨਾ ਸ਼ੁਰੂ ਕਰ ਰਹੀਆਂ ਹਨ: ਥੀਮ ਡ੍ਰਿਫਟ (theme drift)। ਇਹ ਉਦੋਂ ਹੁੰਦਾ ਹੈ ਜਦੋਂ ਤੁਹਾਡੀਆਂ ਦੋਵੇਂ ਸਟਾਈਲਸ਼ੀਟਾਂ ਵੱਖ-ਵੱਖ ਗਤੀ ਨਾਲ ਵਿਕਸਿਤ ਹੁੰਦੀਆਂ ਹਨ। ਇੱਥੇ ਪੈਡਿੰਗ ਐਡਜਸਟਮੈਂਟ। ਉੱਥੇ ਸ਼ੈਡੋ ਵਿੱਚ ਬਦਲਾਅ। ਹਨੇਰੀ ਫਾਈਲ ਇੱਕ ਅਣਗੌਲੀ ਭੈਣ ਬਣ ਜਾਂਦੀ ਹੈ। ਜਾਂ ਇਸ ਤੋਂ ਵੀ ਮਾੜਾ, ਇਹ ਡਰ ਦਾ ਕਾਰਨ ਬਣ ਜਾਂਦੀ ਹੈ। ਡੈਵਲਪਰ ਬਦਲਾਅ ਕਰਨ ਤੋਂ ਬਚਣ ਲੱਗਦੇ ਹਨ ਕਿਉਂਕਿ ਇੱਕ ਥੀਮ ਨੂੰ ਛੇੜਨ ਦਾ ਮਤਲਬ ਹੈ ਕੰਮ ਨੂੰ ਦੁਹਰਾਉਣ ਲਈ ਦੂਜੀ ਫਾਈਲ ਵਿੱਚ ਲੱਭਣਾ।

ਮਾਨਸਿਕ ਬੋਝ (cognitive overhead) ਤੇਜ਼ੀ ਨਾਲ ਵਧਦਾ ਹੈ। ਤੁਸੀਂ CSS ਨੂੰ ਇੱਕ ਵਾਰ ਲਿਖਣਾ ਚਾਹੁੰਦੇ ਸੀ। ਇਸ ਦੀ ਬਜਾਏ ਤੁਸੀਂ ਇਸ ਨੂੰ ਦੋ ਵਾਰ ਲਿਖਿਆ, ਅਤੇ ਹੁਣ ਤੁਸੀਂ ਹਰ ਵਾਰ ਡਿਜ਼ਾਈਨ ਸਿਸਟਮ ਬਦਲਣ 'ਤੇ ਉਸ ਕਰਜ਼ੇ 'ਤੇ ਵਿਆਜ ਦੇ ਰਹੇ ਹੋ। ਡਾਰਕ ਮੋਡ ਵਿੱਚ ਆਈਕਨ ਗਲਤ ਦਿਖਾਈ ਦਿੰਦੇ ਹਨ ਕਿਉਂਕਿ ਕਿਸੇ ਨੇ ਹਲਕੀ ਫਾਈਲ ਵਿੱਚ flex gap ਨੂੰ ਅਪਡੇਟ ਕੀਤਾ ਅਤੇ ਉਸ ਨੂੰ ਦੁਹਰਾਉਣਾ ਭੁੱਲ ਗਿਆ। ਫੋਕਸ ਰਿੰਗਸ ਗਾਇਬ ਹੋ ਜਾਂਦੇ ਹਨ ਕਿਉਂਕਿ ਇੱਕ ਨਵਾਂ ਐਕਸੈਸਬਿਲਿਟੀ ਨਿਯਮ ਸਿਰਫ ਇੱਕ ਸ਼ੀਟ ਵਿੱਚ ਹੀ ਸ਼ਾਮਲ ਹੋਇਆ ਸੀ। UI ਸਿਰਫ ਗਲਤ ਨਹੀਂ ਲੱਗਦਾ। ਇਹ ਟੁੱਟਿਆ ਹੋਇਆ ਮਹਿਸੂਸ ਹੋਣ ਲੱਗਦਾ ਹੈ।

ਸੈਮੈਂਟਿਕ ਟੋਕਨਜ਼ (Semantic Tokens) ਦੀ ਵਰਤੋਂ ਕਰੋ

ਇਸ ਦਾ ਹੱਲ ਕੋਈ ਬਿਹਤਰ diff ਟੂਲ ਜਾਂ ਸਖ਼ਤ ਕੋਡ ਰਿਵਿਊ ਨਹੀਂ ਹੈ। ਹੱਲ ਰੰਗ ਬਾਰੇ ਸੋਚਣ ਦਾ ਇੱਕ ਵੱਖਰਾ ਤਰੀਕਾ ਹੈ। ਆਪਣੀਆਂ ਸਟਾਈਲਜ਼ ਨੂੰ ਸਿਰਫ ਦਿਖਾਵੇ ਦੇ ਆਧਾਰ 'ਤੇ ਸੰਗਠਿਤ ਕਰਨਾ ਬੰਦ ਕਰੋ ਅਤੇ ਉਹਨਾਂ ਨੂੰ ਉਦੇਸ਼ (purpose) ਦੇ ਆਧਾਰ 'ਤੇ ਸੰਗਠਿਤ ਕਰਨਾ ਸ਼ੁਰੂ ਕਰੋ। ਇੱਥੇ ਸੈਮੈਂਟਿਕ ਟੋਕਨਜ਼ ਕੰਮ ਆਉਂਦੇ ਹਨ।

ਕਿਸੇ ਕਾਰਡ ਨੂੰ ਚਿੱਟੇ ਬੈਕਗ੍ਰਾਊਂਡ ਦੇਣ ਦੀ ਬਜਾਏ, ਉਸ ਨੂੰ ਇੱਕ 'ਸਰਫੇਸ ਬੈਕਗ੍ਰਾਊਂਡ' (surface background) ਦਿਓ। ਟੈਕਸਟ ਲਈ ਕਾਲੇ ਅਤੇ ਆਫ-ਵਾਈਟ ਵਿੱਚੋਂ ਚੁਣਨ ਦੀ ਬਜਾਏ, ਇੱਕ 'ਟੈਕਸਟ ਕਲਰ' ਚੁਣੋ। ਕੰਪੋਨੈਂਟ ਨੂੰ ਇਹ ਨਹੀਂ ਪਤਾ ਹੁੰਦਾ ਜਾਂ ਉਹਨੂੰ ਕੋਈ ਫਰਕ ਨਹੀਂ ਪੈਂਦਾ ਕਿ ਉਪਭੋਗਤਾ ਹਲਕਾ ਮੋਡ ਪਸੰਦ ਕਰਦਾ ਹੈ ਜਾਂ ਡਾਰਕ। ਇਹ ਸਿਰਫ ਉਸ ਟੋਕਨ ਦੀ ਮੰਗ ਕਰਦਾ ਹੈ ਜੋ ਇਸਦੇ ਕੰਮ ਨਾਲ ਮੇਲ ਖਾਂਦਾ ਹੈ।

ਇੱਕ ਸਟੈਂਡਰਡ ਬਟਨ ਬਾਰੇ ਸੋਚੋ। ਦੋ-ਫਾਈਲ ਵਾਲੀ ਦੁਨੀਆ ਵਿੱਚ, .btn ਹਲਕੀ ਸਟਾਈਲਸ਼ੀਟ ਵਿੱਚ ਚਿੱਟੇ ਬੈਕਗ੍ਰਾਊਂਡ ਅਤੇ ਡਾਰਕ ਬਾਰਡਰ ਦੇ ਨਾਲ ਰਹਿੰਦਾ ਹੈ। ਇਸ ਦਾ ਜੁੜਵਾਂ ਹਨੇਰੀ ਸਟਾਈਲਸ਼ੀਟ ਵਿੱਚ ਲਗਭਗ ਕਾਲੇ ਬੈਕਗ੍ਰਾਊਂਡ ਅਤੇ ਹਲਕੇ ਬਾਰਡਰ ਦੇ ਨਾਲ ਰਹਿੰਦਾ ਹੈ। ਇੱਕ ਬਟਨ ਲਈ ਇਹ ਦੋਹਰਾ ਕੋਡ ਹੈ। ਟੋਕਨਜ਼ ਦੇ ਨਾਲ, .btn ਦਾ ਇੱਕ ਹੀ ਐਲਾਨ (declaration) ਹੁੰਦਾ ਹੈ: ਬੈਕਗ੍ਰਾਊਂਡ var(--color-surface-secondary) ਹੈ ਅਤੇ ਬਾਰਡਰ var(--color-border-default) ਹੈ। ਇਹਨਾਂ ਦੀਆਂ ਕੀਮਤਾਂ (values) ਰੂਟ (root) 'ਤੇ ਹੁੰਦੀਆਂ ਹਨ। ਜਦੋਂ ਸਾਈਟ ਹਲਕੇ ਮੋਡ ਵਿੱਚ ਹੁੰਦੀ ਹੈ, ਤਾਂ --color-surface-secondary ਕੁਝ #f8f9fa ਵਰਗਾ ਹੁੰਦਾ ਹੈ। ਡਾਰਕ ਮੋਡ ਵਿੱਚ, ਉਹੀ ਟੋਕਨ #2d2d2d ਬਣ ਜਾਂਦਾ ਹੈ। ਬਟਨ ਕੰਪੋਨੈਂਟ ਕਦੇ ਨਹੀਂ ਬਦਲਦਾ। ਸਿਰਫ ਇਸ ਦੇ ਹੇਠਾਂ ਦਾ ਡਾਟਾ ਬਦਲਦਾ ਹੈ।

ਸਟ੍ਰਕਚਰ ਅਤੇ ਡਾਟਾ ਵਿਚਕਾਰ ਇਹ ਅੰਤਰ ਸੂਖਮ ਪਰ ਸ਼ਕਤੀਸ਼ਾਲੀ ਹੈ। ਤੁਹਾਡਾ ਕਾਰਡ ਕੰਪੋਨੈਂਟ ਲੇਆਉਟ, ਸਪੇਸਿੰਗ, ਟਾਈਪੋਗ੍ਰਾਫੀ, ਅਤੇ ਐਲੀਵੇਸ਼ਨ ਨੂੰ ਇੱਕ ਵਾਰ ਪਰਿਭਾਸ਼ਿਤ ਕਰਦਾ ਹੈ। ਤੁਹਾਡੀ ਥੀਮ ਲੇਅਰ ਪੈਲੇਟ ਨੂੰ ਪਰਿਭਾਸ਼ਿਤ ਕਰਦੀ ਹੈ। ਇਹ ਵੱਖਰੇਵਾਂ ਲਈ ਹੀ CSS ਕਸਟਮ ਪ੍ਰਾਪਰਟੀਜ਼ ਬਣਾਈਆਂ ਗਈਆਂ ਸਨ।

ਆਰਕੀਟੈਕਚਰ ਕਿਵੇਂ ਬਦਲਦਾ ਹੈ

ਇਹ ਪਹੁੰਚ ਮੂਲ ਰੂਪ ਵਿੱਚ ਤੁਹਾਡੇ ਸਟਾਈਲ ਲਿਖਣ ਦੇ ਤਰੀਕੇ ਨੂੰ ਮੁੜ-ਸੰਗਠਿਤ ਕਰਦੀ ਹੈ।

ਪੁਰਾਣਾ ਤਰੀਕਾ ਆਮ ਤੌਰ 'ਤੇ ਅਜਿਹਾ ਦਿਖਾਈ ਦਿੰਦਾ ਹੈ:

• ਇੱਕ ਹਲਕੀ ਕਾਰਡ ਸਟਾਈਲਸ਼ੀਟ ਜੋ ਪੈਡਿੰਗ, ਰੇਡੀਅਸ, ਬੈਕਗ੍ਰਾਊਂਡ, ਟੈਕਸਟ ਕਲਰ, ਅਤੇ ਸ਼ੈਡੋ ਨੂੰ ਪਰਿਭਾਸ਼ਿਤ ਕਰਦੀ ਹੈ।
• ਇੱਕ ਹਨੇਰੀ ਕਾਰਡ ਸਟਾਈਲਸ਼ੀਟ ਜੋ ਸਿਰਫ ਰੰਗ ਬਦਲਣ ਲਈ ਜ਼ਿਆਦਾਤਰ ਉਹੀ ਪ੍ਰਾਪਰਟੀਜ਼ ਨੂੰ ਦੁਬਾਰਾ ਪਰਿਭਾਸ਼ਿਤ ਕਰਦੀ ਹੈ।
• ਇੱਕ ਲੌਜਿਕ ਲੇਅਰ ਜੋ ਫੈਸਲਾ ਕਰਦੀ ਹੈ ਕਿ ਕਿਹੜੀ ਸਟਾਈਲਸ਼ੀਟ ਲੋਡ ਕਰਨੀ ਹੈ ਜਾਂ ਬਾਡੀ 'ਤੇ ਕਿਹੜੀ ਕਲਾਸ ਟੌਗਲ ਕਰਨੀ ਹੈ।

ਨਵਾਂ ਤਰੀਕਾ ਅਜਿਹਾ ਦਿਖਾਈ ਦਿੰਦਾ ਹੈ:

• ਇੱਕ ਕਾਰਡ ਸਟਾਈਲਸ਼ੀਟ ਜੋ ਲੇਆਉਟ ਨੂੰ ਪਰਿਭਾਸ਼ਿਤ ਕਰਦੀ ਹੈ ਅਤੇ ਸੈਮੈਂਟਿਕ ਟੋਕਨਜ਼ ਅਸਾਈਨ ਕਰਦੀ ਹੈ।
• ਇੱਕ ਥੀਮ ਫਾਈਲ ਜੋ ਪਰਿਭਾਸ਼ਿਤ ਕਰਦੀ ਹੈ ਕਿ ਹਲਕੇ ਸੰਦਰਭ (light context) ਵਿੱਚ ਉਹਨਾਂ ਟੋਕਨਜ਼ ਦਾ ਕੀ ਮਤਲਬ ਹੈ।
• ਇੱਕ ਥੀਮ ਫਾਈਲ, ਜਾਂ ਸਿਰਫ ਇੱਕੋ ਫਾਈਲ ਵਿੱਚ ਇੱਕ ਬਲਾਕ, ਜੋ ਪਰਿਭਾਸ਼ਿਤ ਕਰਦੀ ਹੈ ਕਿ ਹਨੇਰੇ ਸੰਦਰਭ (dark context) ਵਿੱਚ ਉਹਨਾਂ ਟੋਕਨਜ਼ ਦਾ ਕੀ ਮਤਲਬ ਹੈ।
• ਇੱਕ ਸਿੰਗਲ ਐਟਰੀਬਿਊਟ ਸਵੈਪ ਜੋ ਕੰਪੋਨੈਂਟ ਲੇਅਰ ਨੂੰ ਛੇੜੇ ਬਿਨਾਂ ਵੈਲਯੂ ਲੇਅਰ ਨੂੰ ਬਦਲ ਦਿੰਦਾ ਹੈ।

ਤੁਸੀਂ ਸੈੱਟਅੱਪ ਨੂੰ ਸਥਿਰ ਰੱਖਦੇ ਹੋ। ਤੁਸੀਂ ਸਿਰਫ਼ ਡੇਟਾ ਬਦਲਦੇ ਹੋ। ਜਦੋਂ ਡਿਜ਼ਾਈਨਰ ਇੱਕ ਤੀਜੀ ਥੀਮ ਪੇਸ਼ ਕਰਨਾ ਚਾਹੁੰਦਾ ਹੈ, ਸ਼ਾਇਦ ਇੱਕ ਹਾਈ-ਕੰਟਰਾਸਟ ਮੋਡ ਜਾਂ ਮਿਡਨਾਈਟ ਬਲੂ ਵੇਰੀਐਂਟ, ਤਾਂ ਤੁਸੀਂ ਕਾਰਡ ਨੂੰ ਦੁਬਾਰਾ ਨਹੀਂ ਲਿਖਦੇ। ਤੁਸੀਂ ਟੋਕਨ ਮੈਪ ਵਿੱਚ ਇੱਕ ਹੋਰ ਅਸਾਈਨਮੈਂਟ ਜੋੜਦੇ ਹੋ। ਕੰਪੋਨੈਂਟ ਬਿਨਾਂ ਕਿਸੇ ਗੁੰਝਲਦਾਰ ਤਰਕ ਦੇ ਸੌਖਾ ਰਹਿੰਦਾ ਹੈ। ਇਸਨੂੰ ਅਜੇ ਵੀ ਸਰਫੇਸ ਕਲਰ (surface color) ਚਾਹੀਦਾ ਹੈ। ਥੀਮ ਇਸਨੂੰ ਦੱਸਦੀ ਹੈ ਕਿ ਕਿਹੜਾ ਸਰਫੇਸ ਕਲਰ ਵਰਤਣਾ ਹੈ।

ਡੇਟਾ ਐਟਰੀਬਿਊਟ ਸਵਿੱਚ (The Data Attribute Switch)

ਇੰਪਲੀਮੈਂਟੇਸ਼ਨ ਨੂੰ ਸਰਲ ਅਤੇ ਪੜ੍ਹਨਯੋਗ ਰੱਖਿਆ ਜਾ ਸਕਦਾ ਹੈ। ਆਪਣੇ HTML ਟੈਗ 'ਤੇ ਇੱਕ ਡੇਟਾ ਐਟਰੀਬਿਊਟ ਲਗਾਓ, ਜਿਵੇਂ ਕਿ data-theme="dark", ਅਤੇ ਆਪਣੇ ਟੋਕਨ ਡੈਫੀਨੇਸ਼ਨਜ਼ ਨੂੰ ਇਸ ਦੇ ਅਧੀਨ ਰੱਖੋ।

ਲਾਈਟ ਐਕਸਪੀਰੀਅੰਸ ਲਈ :root 'ਤੇ ਆਪਣੇ ਡਿਫੌਲਟਸ ਸੈੱਟ ਕਰੋ ਤਾਂ ਜੋ JavaScript ਚੱਲਣ ਤੋਂ ਪਹਿਲਾਂ ਪੇਜ ਸਹੀ ਤਰ੍ਹਾਂ ਰੈਂਡਰ ਹੋ ਸਕੇ। ਫਿਰ [data-theme="dark"] ਦੇ ਅਧੀਨ ਟੋਕਨ ਵੈਲਯੂਜ਼ ਨੂੰ ਓਵਰਰਾਈਡ ਕਰੋ। ਇੱਕ ਛੋਟਾ ਜਿਹਾ ਸਕ੍ਰਿਪਟ ਟੌਗਲ ਕਲਿੱਕ 'ਤੇ ਨਜ਼ਰ ਰੱਖਦਾ ਹੈ, ਐਟਰੀਬਿਊਟ ਨੂੰ ਅਪਡੇਟ ਕਰਦਾ ਹੈ, ਅਤੇ ਪੇਜ 'ਤੇ ਹਰ ਕੰਪੋਨੈਂਟ ਤੁਰੰਤ ਪ੍ਰਤੀਕਿਰਿਆ ਦਿੰਦਾ ਹੈ। ਵੱਖ-ਵੱਖ ਐਲੀਮੈਂਟਸ 'ਤੇ ਕਲਾਸਾਂ ਦੀ ਭੱਜ-ਦੌੜ ਦੀ ਲੋੜ ਨਹੀਂ। ਰੈਂਡਰਿੰਗ ਦੇ ਦੌਰਾਨ ਕੋਈ ਵੱਖਰੀ ਸ਼ੀਟ ਇੰਪੋਰਟ ਕਰਨ ਦੀ ਲੋੜ ਨਹੀਂ। ਬ੍ਰਾਊਜ਼ਰ ਕੋਲ ਪਹਿਲਾਂ ਹੀ ਵੇਰੀਏਬਲਜ਼ ਮੈਮੋਰੀ ਵਿੱਚ ਹੁੰਦੇ ਹਨ; ਇਹ ਸਿਰਫ਼ ਨਵੀਆਂ ਵੈਲਯੂਜ਼ ਨਾਲ ਰੀਪੇਂਟ ਕਰਦਾ ਹੈ।

ਇਹ ਤੁਹਾਡੇ ਕੋਡ ਨੂੰ ਬਹੁਤ ਹੀ ਵਿਹਾਰਕ ਤਰੀਕੇ ਨਾਲ ਸਾਫ਼ ਰੱਖਦਾ ਹੈ। ਤੁਹਾਨੂੰ .card ਦੇ ਹਰ ਹਵਾਲੇ ਨੂੰ ਲੱਭਣ ਲਈ ਦੋ ਡਾਇਰੈਕਟਰੀਆਂ ਵਿੱਚ ਗ੍ਰੇਪ (grep) ਕਰਨ ਦੀ ਲੋੜ ਨਹੀਂ ਪਵੇਗੀ। ਤੁਹਾਨੂੰ ਇੱਕੋ ਨੋਡ 'ਤੇ ਲਗਾਈਆਂ ਗਈਆਂ ਮੁਕਾਬਲੇਬਾਜ਼ ਥੀਮ ਕਲਾਸਾਂ ਵਿਚਕਾਰ ਸਪੈਸੀਫਿਟੀ (specificity) ਦੀਆਂ ਲੜਾਈਆਂ ਬਾਰੇ ਚਿੰਤਾ ਕਰਨ ਦੀ ਲੋੜ ਨਹੀਂ ਹੈ। ਤੁਹਾਡਾ HTML ਪੜ੍ਹਨਯੋਗ ਰਹਿੰਦਾ ਹੈ। ਤੁਹਾਡਾ CSS ਕੇਂਦਰੀਕ੍ਰਿਤ ਅਤੇ ਸਰਚ ਕਰਨ ਯੋਗ ਰਹਿੰਦਾ ਹੈ।

ਇਹ ਵੈਲਯੂਜ਼ ਬਾਰੇ ਹੈ, ਵਰਜ਼ਨਾਂ ਬਾਰੇ ਨਹੀਂ

ਡਾਰਕ ਮੋਡ ਵੈਲਯੂਜ਼ ਬਾਰੇ ਹੈ। ਇਹ ਤੁਹਾਡੇ UI ਦਾ ਦੂਜਾ ਵਰਜ਼ਨ ਨਹੀਂ ਹੈ। ਰਾਤ ਨੂੰ ਤੁਹਾਡੇ ਕਾਰਡ ਦੇ ਕੋਨੇ ਜ਼ਿਆਦਾ ਗੋਲ ਨਹੀਂ ਹੋ ਜਾਂਦੇ। ਤੁਹਾਡਾ ਗਰਿੱਡ ਕਿਸੇ ਵੱਖਰੇ ਰੂਪ ਵਿੱਚ ਨਹੀਂ ਬਦਲਦਾ। ਤੁਹਾਡੇ ਟਾਈਪ ਸਕੇਲ ਨੂੰ ਕਿਸੇ ਨਵੇਂ ਲੈਅ ਦੀ ਲੋੜ ਨਹੀਂ ਹੁੰਦੀ। ਸਿਰਫ਼ ਰੰਗ ਬਦਲਦੇ ਹਨ, ਅਤੇ ਕਦੇ-ਕਦੇ ਪਰਛਾਵੇਂ ਥੋੜ੍ਹੇ ਡੂੰਘੇ ਹੋ ਜਾਂਦੇ ਹਨ। ਡਾਰਕ ਮੋਡ ਨੂੰ ਪੂਰੀ ਤਰ੍ਹਾਂ 'ਰੀਸਕਿਨ' (reskin) ਵਜੋਂ ਮੰਨਣਾ ਇੱਕ ਅਜਿਹੀ ਓਵਰ-ਇੰਜੀਨੀਅਰਿੰਗ ਹੈ ਜੋ ਰੱਖ-ਰਖਾਅ ਦੀਆਂ ਮੁਸ਼ਕਲਾਂ ਪੈਦਾ ਕਰਦੀ ਹੈ।

ਜੋ ਟੀਮਾਂ ਇਸ ਨੂੰ ਸਹੀ ਤਰੀਕੇ ਨਾਲ ਸਮਝਦੀਆਂ ਹਨ, ਉਹ ਆਪਣੇ ਡਿਜ਼ਾਈਨ ਸਿਸਟਮ ਨੂੰ ਇੱਕ ਡੇਟਾਬੇਸ ਵਾਂਗ ਮੰਨਦੀਆਂ ਹਨ। ਕੰਪੋਨੈਂਟਸ ਨਾਮ ਰਾਹੀਂ ਪ੍ਰਾਪਰਟੀਜ਼ ਲਈ ਕੁਐਰੀ ਕਰਦੇ ਹਨ। ਥੀਮਜ਼ ਰਿਕਾਰਡ ਪ੍ਰਦਾਨ ਕਰਦੀਆਂ ਹਨ। ਲਾਈਟ ਤੋਂ ਡਾਰਕ ਵਿੱਚ ਬਦਲਣਾ ਇੱਕ ਕੁਐਰੀ ਪੈਰਾਮੀਟਰ ਬਦਲਾਅ ਹੈ, ਨਾ ਕਿ ਸਕੀਮਾ ਰੀ-ਰਾਈਟ।

ਇਹੀ ਮਾਨਸਿਕਤਾ ਤੁਹਾਨੂੰ ਥੀਮ ਡ੍ਰਿਫਟ (theme drift) ਤੋਂ ਬਚਾਉਂਦੀ ਹੈ। ਇੱਕ ਕਾਰਡ। ਇੱਕ ਬਟਨ। ਸਪੇਸਿੰਗ ਅਤੇ ਸਾਈਜ਼ਿੰਗ ਲਈ ਸੱਚ ਦਾ ਇੱਕੋ ਇੱਕ ਸਰੋਤ। ਪੈਲੇਟ ਇੱਕੋ ਜਗ੍ਹਾ 'ਤੇ ਹੁੰਦਾ ਹੈ, ਤਰਕਪੂਰਨ ਤਰੀਕੇ ਨਾਲ ਮੈਪ ਕੀਤਾ ਹੋਇਆ, ਅਤੇ ਉਪਭੋਗਤਾ ਦੀ ਪਸੰਦ ਦੇ ਅਨੁਸਾਰ ਕਿਸੇ ਵੀ ਮਾਹੌਲ ਲਈ ਤਿਆਰ।

ਅਸਲ ਸਿੱਖਿਆ (The Real Takeaway)

ਜੇਕਰ ਤੁਸੀਂ ਲਾਈਟ ਅਤੇ ਡਾਰਕ ਲਈ ਦੋ CSS ਫਾਈਲਾਂ ਨੂੰ ਬਣਾਈ ਰੱਖ ਰਹੇ ਹੋ, ਤਾਂ ਤੁਸੀਂ ਥੀਮਿੰਗ ਨਹੀਂ ਕਰ ਰਹੇ। ਤੁਸੀਂ ਕਲੋਨਿੰਗ ਕਰ ਰਹੇ ਹੋ। ਸੈਮੈਂਟਿਕ ਟੋਕਨਜ਼ ਵੱਲ ਵਧੋ, ਉਹਨਾਂ ਨੂੰ ਰੂਟ-ਲੈਵਲ ਡੇਟਾ ਐਟਰੀਬਿਊਟ ਨਾਲ ਸਕੋਪ ਕਰੋ, ਅਤੇ ਆਪਣੇ ਕੰਪੋਨੈਂਟਸ ਨੂੰ ਦਿੱਖ ਨੂੰ ਹਾਰਡਕੋਡ ਕਰਨ ਦੀ ਬਜਾਏ ਰੋਲ ਮੰਗਣ ਦਿਓ। ਸ਼ੁਰੂਆਤੀ ਰੀਫੈਕਟਰ ਵਿੱਚ ਮਿਹਨਤ ਲੱਗਦੀ ਹੈ, ਪਰ ਇਸ ਦਾ ਵਿਕਲਪ ਪੈਰਲਲ ਸ਼ੀਟਸਟਾਈਲਜ਼ ਵਿੱਚ 'ਵੈਕ-ਏ-ਮੋਲ' (whack-a-mole) ਵਰਗਾ ਇੱਕ ਅੰਤਹੀਣ ਖੇਡ ਹੈ। ਇੱਕੋ ਕਾਰਡ ਨੂੰ ਦੋ ਵਾਰ ਲਿਖਣ ਲਈ ਜ਼ਿੰਦਗੀ ਬਹੁਤ ਛੋਟੀ ਹੈ।