ਆਪਣੀ ਵੈੱਬਸਾਈਟ ਜਾਂ ਐਪ ਵਿੱਚ ਡਾਰਕ ਮੋਡ ਕਿਵੇਂ ਜੋੜੀਏ (ਚਿੱਟੀ ਝਲਕ ਤੋਂ ਬਿਨਾਂ)

ਡਾਰਕ ਮੋਡ ਜੋੜਨ ਲਈ, ਆਪਣੇ ਰੰਗਾਂ ਨੂੰ ਨਾਮ ਵਾਲੇ ਟੋਕਨਾਂ ਵਜੋਂ ਪਰਿਭਾਸ਼ਿਤ ਕਰੋ (ਬੈਕਗ੍ਰਾਊਂਡ, ਟੈਕਸਟ, ਸਰਫੇਸ, ਬਾਰਡਰ, ਐਕਸੈਂਟ), ਹਾਰਡ-ਕੋਡ ਕੀਤੀਆਂ ਕੀਮਤਾਂ ਦੀ ਥਾਂ। ਹਰ ਟੋਕਨ ਨੂੰ ਲਾਈਟ ਅਤੇ ਡਾਰਕ ਮੁੱਲ ਦਿਓ, ਅਤੇ CSS prefers-color-scheme ਮੀਡੀਆ ਵਿਸ਼ੇਸ਼ਤਾ ਨਾਲ ਦੋਵਾਂ ਵਿਚਕਾਰ ਬਦਲੋ ਤਾਂ ਕਿ ਸਾਈਟ ਵਿਜ਼ਿਟਰ ਦੀ ਸਿਸਟਮ ਸੈਟਿੰਗ ਫਾਲੋ ਕਰੇ। ਜੇ ਤੁਸੀਂ ਹੱਥੀਂ ਟੌਗਲ ਵੀ ਚਾਹੁੰਦੇ ਹੋ, ਤਾਂ ਚੋਣ ਬ੍ਰਾਊਜ਼ਰ ਵਿੱਚ ਸੇਵ ਕਰੋ ਅਤੇ ਪੇਜ ਦੇ head ਵਿੱਚ ਇੱਕ ਛੋਟੀ ਇਨਲਾਈਨ ਸਕ੍ਰਿਪਟ ਨਾਲ ਲਾਗੂ ਕਰੋ, ਤਾਂ ਕਿ ਲੋਡ ਵੇਲੇ ਚਿੱਟੀ ਝਲਕ ਨਾ ਆਵੇ। ਫਿਰ ਦੋਵਾਂ ਥੀਮਾਂ ਵਿੱਚ ਕੰਟ੍ਰਾਸਟ, ਤਸਵੀਰਾਂ ਅਤੇ ਚਾਰਟ ਜਾਂਚੋ। AI ਐਪ ਬਿਲਡਰ ਵਿੱਚ ਇੱਕ ਸਾਫ਼ ਪ੍ਰੋਂਪਟ ਜ਼ਿਆਦਾਤਰ ਕੰਮ ਕਰ ਦਿੰਦਾ ਹੈ; ਕੁਆਲਟੀ ਦੀ ਅਸਲ ਪਰਖ ਜਾਂਚ ਵਿੱਚ ਹੁੰਦੀ ਹੈ।

ਦੋ ਤਰੀਕੇ

ਜ਼ਿਆਦਾਤਰ ਐਪਾਂ ਦੂਜੇ ਨਾਲ ਸਭ ਤੋਂ ਵਧੀਆ ਚੱਲਦੀਆਂ ਹਨ: ਡਿਫ਼ਾਲਟ ਵਿੱਚ ਸਿਸਟਮ ਦਾ ਸਨਮਾਨ ਕਰੋ, ਅਤੇ ਲੋਕਾਂ ਨੂੰ ਇਸਨੂੰ ਬਦਲਣ ਦਿਓ।

ਰੰਗ ਟੋਕਨਾਂ ਨਾਲ ਸ਼ੁਰੂ ਕਰੋ

ਡਾਰਕ ਮੋਡ ਉਦੋਂ ਔਖਾ ਹੁੰਦਾ ਹੈ ਜਦੋਂ ਰੰਗ ਕੋਡ ਵਿੱਚ white, #333 ਅਤੇ gray-100 ਵਾਂਗ ਖਿੰਡੇ ਹੋਣ। ਇਹ ਆਸਾਨ ਹੁੰਦਾ ਹੈ ਜਦੋਂ ਹਰ ਰੰਗ ਨਾਮ ਵਾਲੇ ਛੋਟੇ ਸੈੱਟ ਟੋਕਨਾਂ ਤੋਂ ਆਵੇ:

ਹਰ ਕੰਪੋਨੈਂਟ ਟੋਕਨ ਨਾਮ ਵਰਤਦਾ ਹੈ। ਥੀਮ ਬਦਲਣ ਦਾ ਮਤਲਬ ਫਿਰ ਹਰ ਕੰਪੋਨੈਂਟ ਨੂੰ ਸੋਧਣਾ ਨਹੀਂ, ਸਗੋਂ ਮੁੱਲਾਂ ਦਾ ਇੱਕ ਸੈੱਟ ਬਦਲਣਾ ਹੁੰਦਾ ਹੈ।

ਡਾਰਕ ਪੈਲੇਟ ਲਈ ਸੁਝਾਅ:

• ਵੱਡੇ ਖੇਤਰਾਂ ਲਈ ਸ਼ੁੱਧ ਕਾਲੇ ਅਤੇ ਸ਼ੁੱਧ ਚਿੱਟੇ ਤੋਂ ਬਚੋ; ਬਹੁਤ ਗੂੜ੍ਹਾ ਸਲੇਟੀ ਅਤੇ ਆਫ-ਵਾਈਟ ਪੜ੍ਹਨ ਵਿੱਚ ਸੌਖੇ ਹਨ।
• ਡੂੰਘਾਈ ਹਲਕੀਆਂ ਸਤਹਾਂ ਨਾਲ ਦਿਖਾਓ, ਪਰਛਾਵਿਆਂ ਨਾਲ ਨਹੀਂ; ਗੂੜ੍ਹੇ ਬੈਕਗ੍ਰਾਊਂਡਾਂ 'ਤੇ ਪਰਛਾਵੇਂ ਲਗਭਗ ਦਿਖਦੇ ਹੀ ਨਹੀਂ।
• ਚਮਕਦਾਰ ਬ੍ਰਾਂਡ ਰੰਗਾਂ ਨੂੰ ਥੋੜ੍ਹਾ ਫਿੱਕਾ ਕਰੋ; ਗੂੜ੍ਹੇ ਬੈਕਗ੍ਰਾਊਂਡ 'ਤੇ ਉਹ ਅਸਹਿਜ ਤੌਰ 'ਤੇ ਚਮਕ ਸਕਦੇ ਹਨ।
• ਕੰਟ੍ਰਾਸਟ ਪੜ੍ਹਨ ਯੋਗ ਰੱਖੋ। WCAG ਦਾ AA ਪੱਧਰ ਆਮ ਟੈਕਸਟ ਲਈ ਘੱਟੋ-ਘੱਟ 4.5:1 ਕੰਟ੍ਰਾਸਟ ਮੰਗਦਾ ਹੈ। ਹਲਕਾ ਸਲੇਟੀ ਟੈਕਸਟ ਡਾਰਕ ਥੀਮਾਂ ਵਿੱਚ ਅਕਸਰ ਇਸ ਵਿੱਚ ਫੇਲ੍ਹ ਹੁੰਦਾ ਹੈ।

Tailwind CSS ਨਾਲ

Tailwind ਬਹੁਤ ਸਾਰੀਆਂ AI ਨਾਲ ਬਣੀਆਂ ਐਪਾਂ ਵਿੱਚ ਡਿਫ਼ਾਲਟ ਸਟਾਈਲਿੰਗ ਟੂਲ ਹੈ। Tailwind ਦੇ ਡਾਰਕ ਮੋਡ ਦਸਤਾਵੇਜ਼ਾਂ ਅਨੁਸਾਰ, dark: ਵੇਰੀਐਂਟ ਡਿਫ਼ਾਲਟ ਵਿੱਚ prefers-color-scheme ਵਰਤਦਾ ਹੈ, ਇਸ ਲਈ bg-white dark:bg-gray-900 ਵਰਗੀਆਂ ਕਲਾਸਾਂ ਬਿਨਾਂ ਵਾਧੂ ਕੰਮ ਦੇ ਸਿਸਟਮ ਸੈਟਿੰਗ ਫਾਲੋ ਕਰਦੀਆਂ ਹਨ।

Tailwind v4 ਵਿੱਚ ਹੱਥੀਂ ਟੌਗਲ ਲਈ, ਦਸਤਾਵੇਜ਼ ਵੇਰੀਐਂਟ ਨੂੰ ਇੱਕ ਪੇਰੈਂਟ ਐਲੀਮੈਂਟ 'ਤੇ ਕਲਾਸ ਵਿੱਚ ਬਦਲਣਾ ਦਿਖਾਉਂਦੇ ਹਨ:

@import "tailwindcss";
@custom-variant dark (&:where(.dark, .dark *));

ਫਿਰ ਐਪ ਰੂਟ ਐਲੀਮੈਂਟ ਤੋਂ dark ਕਲਾਸ ਜੋੜਦੀ ਜਾਂ ਹਟਾਉਂਦੀ ਹੈ। ਦਸਤਾਵੇਜ਼ ਇਹ ਵੀ ਸੁਝਾਉਂਦੇ ਹਨ ਕਿ head ਵਿੱਚ ਇੱਕ ਇਨਲਾਈਨ ਸਕ੍ਰਿਪਟ ਸੇਵ ਕੀਤੀ ਚੋਣ (ਜਾਂ ਸਿਸਟਮ ਸੈਟਿੰਗ) ਪੇਜ ਪੇਂਟ ਹੋਣ ਤੋਂ ਪਹਿਲਾਂ ਲਾਗੂ ਕਰੇ, ਅਤੇ ਇਹੀ ਝਲਕ ਤੋਂ ਬਚਣ ਦਾ ਤਰੀਕਾ ਹੈ।

ਚਿੱਟੀ ਝਲਕ ਤੋਂ ਬਚਣਾ

ਝਲਕ ਇਸ ਲਈ ਆਉਂਦੀ ਹੈ ਕਿਉਂਕਿ ਪੇਜ ਲਾਈਟ ਮੋਡ ਵਿੱਚ ਪੇਂਟ ਹੁੰਦਾ ਹੈ, ਫਿਰ JavaScript ਲੋਡ ਹੁੰਦਾ ਹੈ, ਸੇਵ ਕੀਤੀ ਚੋਣ ਪੜ੍ਹਦਾ ਹੈ ਅਤੇ ਡਾਰਕ ਵਿੱਚ ਬਦਲਦਾ ਹੈ। ਹੱਲ:

1. Head ਵਿੱਚ ਇੱਕ ਛੋਟੀ ਇਨਲਾਈਨ ਸਕ੍ਰਿਪਟ ਰੱਖੋ ਜੋ ਸੇਵ ਕੀਤੀ ਥੀਮ ਪੜ੍ਹੇ ਅਤੇ ਕੁਝ ਵੀ ਰੈਂਡਰ ਹੋਣ ਤੋਂ ਪਹਿਲਾਂ ਰੂਟ ਐਲੀਮੈਂਟ 'ਤੇ ਕਲਾਸ ਸੈੱਟ ਕਰੇ।
2. ਹਰ ਥੀਮ ਲਈ color-scheme CSS ਵਿਸ਼ੇਸ਼ਤਾ ਸੈੱਟ ਕਰੋ, ਤਾਂ ਕਿ ਬ੍ਰਾਊਜ਼ਰ ਵੱਲੋਂ ਬਣਾਏ ਹਿੱਸੇ (ਸਕ੍ਰੋਲਬਾਰ, ਫਾਰਮ ਕੰਟਰੋਲ) ਮੇਲ ਖਾਣ।
3. ਦੋਵਾਂ ਥੀਮਾਂ ਵਿੱਚ ਪੇਜ ਨੂੰ ਸਾਫ਼ ਬੈਕਗ੍ਰਾਊਂਡ ਰੰਗ ਦਿਓ।
4. ਜੇ ਐਪ ਸਰਵਰ-ਰੈਂਡਰ ਹੁੰਦੀ ਹੈ, ਤਾਂ ਯਕੀਨੀ ਬਣਾਓ ਕਿ ਸਰਵਰ ਅਤੇ ਬ੍ਰਾਊਜ਼ਰ ਸ਼ੁਰੂਆਤੀ ਥੀਮ 'ਤੇ ਸਹਿਮਤ ਹੋਣ, ਨਹੀਂ ਤਾਂ ਪੇਜ ਮੁੜ ਰੈਂਡਰ ਹੋ ਕੇ ਝਲਕ ਸਕਦਾ ਹੈ।

ਉਦਾਹਰਣ ਪ੍ਰੋਂਪਟ

ਪੂਰੀ ਸੈੱਟਅੱਪ:

ਡਾਰਕ ਮੋਡ ਜੋੜੋ। ਪਹਿਲਾਂ ਹਾਰਡ-ਕੋਡ ਕੀਤੇ ਰੰਗਾਂ ਨੂੰ ਥੀਮ ਟੋਕਨਾਂ (background, surface, text, muted text, border, accent) ਨਾਲ ਬਦਲੋ, ਹਰ ਇੱਕ ਦੇ ਲਾਈਟ ਅਤੇ ਡਾਰਕ ਮੁੱਲ ਨਾਲ। ਵਿਜ਼ਿਟਰ ਦੀ ਸਿਸਟਮ ਸੈਟਿੰਗ ਨੂੰ ਡਿਫ਼ਾਲਟ ਬਣਾਓ। ਹੈਡਰ ਵਿੱਚ Light, Dark ਅਤੇ System ਵਿਕਲਪਾਂ ਵਾਲਾ ਥੀਮ ਸਵਿੱਚ ਜੋੜੋ, ਚੋਣ ਨੂੰ localStorage ਵਿੱਚ ਯਾਦ ਰੱਖੋ, ਅਤੇ head ਵਿੱਚ ਇਨਲਾਈਨ ਸਕ੍ਰਿਪਟ ਨਾਲ ਲਾਗੂ ਕਰੋ ਤਾਂ ਕਿ ਲੋਡ ਵੇਲੇ ਚਿੱਟੀ ਝਲਕ ਨਾ ਆਵੇ। ਹਰ ਥੀਮ ਲਈ color-scheme ਸੈੱਟ ਕਰੋ। ਮੌਜੂਦਾ ਲਾਈਟ ਡਿਜ਼ਾਈਨ ਬਿਲਕੁਲ ਉਵੇਂ ਰੱਖੋ।

ਜੋ ਬਚਿਆ ਹੈ ਉਸਨੂੰ ਠੀਕ ਕਰਨਾ:

ਡਾਰਕ ਮੋਡ ਵਿੱਚ ਹਰ ਪੇਜ ਜਾਂਚੋ ਅਤੇ ਠੀਕ ਕਰੋ: ਘੱਟ ਕੰਟ੍ਰਾਸਟ ਵਾਲਾ ਟੈਕਸਟ (ਘੱਟੋ-ਘੱਟ 4.5:1 ਦਾ ਟੀਚਾ), ਹਾਰਡ-ਕੋਡ ਕੀਤੇ ਚਿੱਟੇ ਬੈਕਗ੍ਰਾਊਂਡ, ਗਾਇਬ ਹੁੰਦੇ ਬਾਰਡਰ, ਗੂੜ੍ਹੇ ਬੈਕਗ੍ਰਾਊਂਡ 'ਤੇ ਗੂੜ੍ਹੇ ਟੈਕਸਟ ਵਾਲੇ ਚਾਰਟ, ਅਤੇ ਗਾਇਬ ਹੁੰਦੇ ਲੋਗੋ। ਲਾਈਟ ਥੀਮ ਨਾ ਬਦਲੋ।

ਤਸਵੀਰਾਂ ਅਤੇ ਚਾਰਟ:

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

ਕਦਮ ਦਰ ਕਦਮ

1. ਰੰਗਾਂ ਦੀ ਆਡਿਟ ਕਰੋ। ਹਾਰਡ-ਕੋਡ ਕੀਤੇ ਰੰਗ ਲੱਭੋ ਅਤੇ ਟੋਕਨਾਂ ਨਾਲ ਬਦਲੋ। ਇਹ ਜ਼ਿਆਦਾਤਰ ਕੰਮ ਹੈ।
2. ਹਰ ਟੋਕਨ ਲਈ ਡਾਰਕ ਮੁੱਲ ਤੈਅ ਕਰੋ।
3. ਸਿਸਟਮ ਫਾਲੋ ਕਰੋ prefers-color-scheme ਨਾਲ (ਜਾਂ Tailwind ਦੇ ਡਿਫ਼ਾਲਟ dark: ਨਾਲ)।
4. ਜੇ ਚਾਹੋ ਤਾਂ ਟੌਗਲ ਜੋੜੋ: Light, Dark, System। ਚੋਣ ਬ੍ਰਾਊਜ਼ਰ ਵਿੱਚ ਸੇਵ ਕਰੋ; ਲੌਗਇਨ ਵਾਲੀਆਂ ਐਪਾਂ ਲਈ ਇਸਨੂੰ ਯੂਜ਼ਰ ਦੀ ਪ੍ਰੋਫਾਈਲ ਵਿੱਚ ਵੀ ਸੇਵ ਕਰ ਸਕਦੇ ਹੋ।
5. ਝਲਕ ਰੋਕੋ head ਵਾਲੀ ਇਨਲਾਈਨ ਸਕ੍ਰਿਪਟ ਅਤੇ color-scheme ਨਾਲ।
6. ਮੁਸ਼ਕਲ ਹਿੱਸੇ ਜਾਂਚੋ: ਲੋਗੋ, ਆਈਕਨ, ਚਿੱਟੇ ਬੈਕਗ੍ਰਾਊਂਡ ਵਾਲੀਆਂ ਤਸਵੀਰਾਂ, ਚਾਰਟ, ਕੋਡ ਬਲਾਕ, ਨਕਸ਼ੇ, ਏਮਬੈੱਡ ਅਤੇ ਈਮੇਲਾਂ।
7. ਦੋਵੇਂ ਥੀਮਾਂ ਨੂੰ ਟੈਸਟ ਕਰੋ ਡੈਸਕਟਾਪ ਅਤੇ ਫ਼ੋਨ 'ਤੇ, ਸਿਸਟਮ ਨੂੰ ਲਾਈਟ ਅਤੇ ਡਾਰਕ ਦੋਵਾਂ 'ਤੇ ਸੈੱਟ ਕਰਕੇ, ਅਤੇ ਹਾਰਡ ਰਿਫ੍ਰੈਸ਼ ਤੋਂ ਬਾਅਦ।

ਆਮ ਗਲਤੀਆਂ

• ਸਭ ਕੁਝ ਉਲਟਾਉਣਾ। ਰੰਗ ਉਲਟਾਉਣ ਵਾਲਾ ਫਿਲਟਰ ਫੋਟੋਆਂ ਅਤੇ ਬ੍ਰਾਂਡ ਰੰਗ ਖਰਾਬ ਕਰ ਦਿੰਦਾ ਹੈ।
• ਹਾਰਡ-ਕੋਡ ਕੀਤੇ ਰੰਗ ਛੁੱਟ ਜਾਣਾ। ਗੂੜ੍ਹੇ ਪੇਜ ਵਿੱਚ ਇੱਕ ਚਿੱਟਾ ਕਾਰਡ ਤੁਰੰਤ ਵੱਖਰਾ ਦਿਸਦਾ ਹੈ।
• ਘੱਟ ਕੰਟ੍ਰਾਸਟ ਵਾਲਾ ਸਲੇਟੀ ਟੈਕਸਟ। ਸਟਾਈਲਿਸ਼ ਲੱਗਦਾ ਹੈ, ਪਰ ਪੜ੍ਹਨਯੋਗਤਾ ਵਿੱਚ ਫੇਲ੍ਹ ਹੁੰਦਾ ਹੈ।
• ਲੋਡ 'ਤੇ ਚਿੱਟੀ ਝਲਕ। ਖਾਸ ਕਰਕੇ ਰਾਤ ਨੂੰ ਫ਼ੋਨਾਂ 'ਤੇ ਧਿਆਨ ਖਿੱਚਦੀ ਹੈ।
• ਤੀਜੀ ਧਿਰ ਏਮਬੈੱਡਾਂ ਨੂੰ ਭੁੱਲਣਾ। ਨਕਸ਼ੇ, ਵੀਡੀਓ ਅਤੇ ਵਿਜੇਟ ਲਾਈਟ ਰਹਿ ਸਕਦੇ ਹਨ; ਜਾਂਚੋ ਕਿ ਉਨ੍ਹਾਂ ਦਾ ਡਾਰਕ ਵਿਕਲਪ ਹੈ ਜਾਂ ਨਹੀਂ।
• ਸਿਰਫ਼ ਦੋ ਸਥਿਤੀਆਂ ਵਾਲਾ ਟੌਗਲ। ਇੱਕ ਵਾਰ ਕਿਸੇ ਨੇ ਕਲਿੱਕ ਕੀਤਾ, ਤਾਂ ਉਹ ਸਿਸਟਮ ਫਾਲੋ ਕਰਨ 'ਤੇ ਵਾਪਸ ਨਹੀਂ ਜਾ ਸਕਦਾ।
• ਲਾਈਟ ਥੀਮ ਤੋੜਨਾ। ਆਪਣੇ ਪ੍ਰੋਂਪਟ ਵਿੱਚ ਸਾਫ਼ ਕਹੋ ਕਿ ਲਾਈਟ ਡਿਜ਼ਾਈਨ ਉਵੇਂ ਰਹਿਣਾ ਚਾਹੀਦਾ ਹੈ।

ਚੈੱਕਲਿਸਟ

• ਸਾਰੇ ਰੰਗ ਥੀਮ ਟੋਕਨਾਂ ਤੋਂ ਆਉਂਦੇ ਹਨ
• ਡਿਫ਼ਾਲਟ ਵਿੱਚ ਸਿਸਟਮ ਸੈਟਿੰਗ ਫਾਲੋ ਕਰਦਾ ਹੈ
• Light, Dark ਅਤੇ System ਵਾਲਾ ਵਿਕਲਪਿਕ ਟੌਗਲ, ਯਾਦ ਰੱਖਿਆ ਜਾਂਦਾ ਹੈ
• ਲੋਡ ਜਾਂ ਰਿਫ੍ਰੈਸ਼ 'ਤੇ ਕੋਈ ਚਿੱਟੀ ਝਲਕ ਨਹੀਂ
• ਫਾਰਮ ਕੰਟਰੋਲ ਅਤੇ ਸਕ੍ਰੋਲਬਾਰ ਮੇਲ ਖਾਂਦੇ ਹਨ ਕਿਉਂਕਿ color-scheme ਸੈੱਟ ਹੈ
• ਦੋਵਾਂ ਥੀਮਾਂ ਵਿੱਚ ਟੈਕਸਟ ਦਾ ਕੰਟ੍ਰਾਸਟ ਘੱਟੋ-ਘੱਟ 4.5:1 ਹੈ
• ਡਾਰਕ ਮੋਡ ਵਿੱਚ ਲੋਗੋ, ਤਸਵੀਰਾਂ, ਚਾਰਟ ਅਤੇ ਏਮਬੈੱਡ ਜਾਂਚੇ ਗਏ ਹਨ
• ਲਾਈਟ ਥੀਮ ਨਹੀਂ ਬਦਲਿਆ
• ਡੈਸਕਟਾਪ ਅਤੇ ਫ਼ੋਨ 'ਤੇ ਟੈਸਟ ਕੀਤਾ ਗਿਆ ਹੈ

Mythex ਨਾਲ ਡਾਰਕ ਮੋਡ

Mythex 'ਤੇ ਬਣੀਆਂ ਐਪਾਂ ਡਿਫ਼ਾਲਟ ਵਿੱਚ Vite, React, TypeScript ਅਤੇ Tailwind ਵਰਤਦੀਆਂ ਹਨ, ਇਸ ਲਈ ਉੱਪਰ ਦਾ Tailwind ਤਰੀਕਾ ਸਿੱਧਾ ਲਾਗੂ ਹੁੰਦਾ ਹੈ: ਪੂਰੀ ਸੈੱਟਅੱਪ ਵਾਲਾ ਪ੍ਰੋਂਪਟ ਚੈਟ ਵਿੱਚ ਪੇਸਟ ਕਰੋ, ਫਿਰ ਦੋਵਾਂ ਥੀਮਾਂ ਵਿੱਚ ਅਤੇ ਫ਼ੋਨ ਆਕਾਰ 'ਤੇ Preview ਜਾਂਚੋ। Mythex ਦੀ ਡਿਜ਼ਾਈਨ ਪ੍ਰੋਂਪਟਿੰਗ ਸਲਾਹ ਇਹ ਦੱਸਣਾ ਹੈ ਕਿ ਕੀ ਬਦਲਣਾ ਹੈ ਅਤੇ ਕੀ ਰੱਖਣਾ ਹੈ, ਜੋ ਇੱਥੇ ਮਾਇਨੇ ਰੱਖਦਾ ਹੈ: ਲਾਈਟ ਥੀਮ ਨੂੰ ਉਵੇਂ ਹੀ ਰਹਿਣ ਲਈ ਕਹੋ। ਦੇਖੋ Design & UI prompts, ਅਤੇ ਜੇ ਕੋਈ ਪਾਸ ਗਲਤ ਹੋ ਜਾਵੇ ਤਾਂ ਚੈੱਕਪੁਆਇੰਟ ਨਾਲ ਵਾਪਸ ਜਾਓ।

ਦਿੱਖ ਨੂੰ ਸਹੀ ਕਰਨ ਬਾਰੇ ਹੋਰ ਲਈ, ਦੇਖੋ AI ਨਾਲ ਚੰਗੀ ਦਿੱਖ ਵਾਲੀ ਐਪ ਕਿਵੇਂ ਡਿਜ਼ਾਈਨ ਕਰੀਏ ਅਤੇ AI ਐਪ ਬਿਲਡਰਾਂ ਲਈ ਪ੍ਰੋਂਪਟ ਕਿਵੇਂ ਲਿਖੀਏ।

ਸਵਾਲ