اپنی ویب سائٹ یا ایپ میں Dark Mode کیسے شامل کریں (سفید جھلک کے بغیر)

Dark mode شامل کرنے کے لیے اپنے رنگوں کو نام دیے گئے ٹوکنز کے طور پر بیان کریں (background، text، surface، border، accent)، سیدھے کوڈ میں لکھی گئی قیمتوں کے بجائے۔ ہر ٹوکن کی ایک light اور ایک dark قدر دیں، اور CSS prefers-color-scheme میڈیا فیچر سے ان کے درمیان بدلیں تاکہ سائٹ وزیٹر کی سسٹم سیٹنگ کی پیروی کرے۔ اگر آپ دستی ٹوگل بھی چاہتے ہیں تو انتخاب براؤزر میں محفوظ کریں اور صفحے کے head میں ایک چھوٹے inline اسکرپٹ سے لاگو کریں، تاکہ لوڈ پر سفید جھلک نہ آئے۔ پھر دونوں themes میں کنٹراسٹ، تصاویر اور چارٹس چیک کریں۔ AI ایپ بلڈر میں ایک واضح پرامپٹ اس کا زیادہ تر کام کر دیتا ہے؛ معیار کی اصل جانچ میں آتا ہے۔

دو طریقے

زیادہ تر ایپس دوسرے طریقے سے بہتر چلتی ہیں: ڈیفالٹ میں سسٹم کا احترام کریں، اور لوگوں کو اسے بدلنے دیں۔

رنگ ٹوکنز سے شروع کریں

Dark mode اس وقت تکلیف دہ ہوتا ہے جب رنگ white، #333 اور gray-100 کی طرح کوڈ میں بکھرے ہوں۔ یہ آسان ہو جاتا ہے جب ہر رنگ نام دیے گئے چند ٹوکنز سے آئے:

ہر کمپوننٹ ٹوکن کے نام استعمال کرتا ہے۔ تو تھیم بدلنے کا مطلب ہے رنگوں کا ایک سیٹ بدلنا، ہر کمپوننٹ کو ایڈٹ کرنا نہیں۔

Dark پیلیٹ کے لیے اشارے:

• بڑے علاقوں میں خالص سیاہ اور خالص سفید سے بچیں؛ بہت گہرا خاکستری اور آف وائٹ پڑھنے میں آسان ہیں۔
• گہرائی ہلکی سطحوں سے دکھائیں، سایوں سے نہیں؛ سائے گہرے پس منظر پر مشکل سے نظر آتے ہیں۔
• چمکدار برانڈ رنگوں کو تھوڑا کم سیر کریں؛ گہرے پس منظر پر وہ تکلیف دہ طور پر چمک سکتے ہیں۔
• کنٹراسٹ پڑھنے کے قابل رکھیں۔ WCAG کی AA سطح عام متن کے لیے کم از کم 4.5:1 کنٹراسٹ مانگتی ہے۔ دھندلا خاکستری متن dark themes میں اکثر اس پر پورا نہیں اترتا۔

Tailwind CSS کے ساتھ

Tailwind کئی AI سے بنی ایپس میں ڈیفالٹ اسٹائلنگ ٹول ہے۔ Tailwind کی dark mode دستاویزات کے مطابق dark: variant بطور ڈیفالٹ prefers-color-scheme استعمال کرتا ہے، تو bg-white dark:bg-gray-900 جیسی کلاسیں بغیر کسی اضافی کام کے سسٹم سیٹنگ کی پیروی کرتی ہیں۔

Tailwind v4 میں دستی ٹوگل کے لیے، دستاویزات دکھاتی ہیں کہ variant کو parent عنصر پر ایک کلاس سے کیسے بدلا جائے:

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

پھر ایپ root عنصر پر dark کلاس شامل یا ہٹاتی ہے۔ دستاویزات head میں ایک inline اسکرپٹ بھی تجویز کرتی ہیں جو صفحہ رنگ دکھانے سے پہلے محفوظ انتخاب (یا سسٹم سیٹنگ) لاگو کرے، اور یہی وہ طریقہ ہے جس سے جھلک سے بچا جاتا ہے۔

سفید جھلک سے بچنا

جھلک اس لیے آتی ہے کہ صفحہ پہلے light mode میں رنگ دیتا ہے، پھر JavaScript لوڈ ہو کر محفوظ انتخاب پڑھتا ہے اور dark پر جاتا ہے۔ حل یہ ہے:

1. head میں ایک چھوٹا inline اسکرپٹ رکھیں جو محفوظ theme پڑھے اور کچھ رینڈر ہونے سے پہلے root عنصر پر کلاس مقرر کرے۔
2. ہر theme کے لیے color-scheme CSS property مقرر کریں تاکہ براؤزر کے بنائے ہوئے حصے (اسکرول بارز، فارم کنٹرولز) میچ کریں۔
3. دونوں themes میں صفحے کا واضح background رنگ دیں۔
4. اگر ایپ سرور پر رینڈر ہوتی ہے تو یقینی بنائیں کہ سرور اور براؤزر ابتدائی theme پر متفق ہوں، ورنہ صفحہ دوبارہ رینڈر ہو کر ٹمٹما سکتا ہے۔

مثالی پرامپٹس

مکمل سیٹ اپ:

Dark mode شامل کرو۔ پہلے سخت کوڈ شدہ رنگوں کو theme tokens سے بدلو (background، surface، text، muted text، border، accent) جن کی light اور dark قدریں ہوں۔ ڈیفالٹ میں وزیٹر کی سسٹم سیٹنگ رکھو۔ ہیڈر میں Light، Dark اور System آپشنز والا theme سوئچ شامل کرو، انتخاب کو localStorage میں یاد رکھو، اور اسے head کے inline اسکرپٹ سے لاگو کرو تاکہ لوڈ پر سفید جھلک نہ آئے۔ ہر theme کے لیے color-scheme مقرر کرو۔ موجودہ light ڈیزائن بالکل ویسا ہی رہے۔

باقی رہ جانے والی چیزیں ٹھیک کرنا:

dark mode میں ہر صفحہ چیک کرو اور ٹھیک کرو: کم کنٹراسٹ والا متن (کم از کم 4.5:1 کا ہدف)، سخت کوڈ شدہ سفید backgrounds، وہ borders جو غائب ہو جاتی ہیں، گہرے پس منظر پر گہرے متن والے چارٹس، اور وہ لوگوز جو غائب ہو جاتے ہیں۔ light theme کو نہ بدلو۔

تصاویر اور چارٹس:

dark mode میں لوگو کا ہلکا ورژن استعمال کرو۔ چارٹ کے محور، گرڈ لائنز اور لیبلز theme tokens استعمال کریں۔ dark mode میں اسکرین شاٹس پر ہلکا سا border دو تاکہ وہ پس منظر میں گھل نہ جائیں۔

مرحلہ وار طریقہ

1. رنگوں کا آڈٹ کریں۔ سخت کوڈ شدہ رنگ تلاش کریں اور انہیں tokens سے بدلیں۔ زیادہ تر کام یہی ہے۔
2. ہر token کے لیے dark قدریں مقرر کریں۔
3. prefers-color-scheme سے سسٹم کی پیروی کریں (یا Tailwind کا ڈیفالٹ dark:)۔
4. اگر چاہیں تو ٹوگل شامل کریں: Light، Dark، System۔ انتخاب براؤزر میں محفوظ کریں؛ لاگ اِن ایپس میں آپ اسے صارف کے پروفائل میں بھی محفوظ کر سکتے ہیں۔
5. inline head اسکرپٹ اور color-scheme سے جھلک روکیں۔
6. مشکل حصے چیک کریں: لوگوز، آئیکنز، سفید پس منظر والی تصاویر، چارٹس، کوڈ بلاکس، نقشے، embeds، ای میلز۔
7. دونوں themes کی جانچ کریں، ڈیسک ٹاپ اور فون پر، سسٹم کو light اور dark پر رکھ کر، اور ہارڈ ری فریش کے بعد۔

عام غلطیاں

• ہر چیز کو الٹا کرنا۔ رنگ الٹنے والا فلٹر تصاویر اور برانڈ رنگ خراب کر دیتا ہے۔
• سخت کوڈ شدہ رنگ پیچھے رہ جانا۔ ایک سفید کارڈ گہرے صفحے پر فوراً نمایاں ہو جاتا ہے۔
• کم کنٹراسٹ والا خاکستری متن۔ دیکھنے میں خوبصورت لگتا ہے مگر پڑھنے میں ناکام۔
• لوڈ پر سفید جھلک۔ خاص طور پر رات کو فون پر نمایاں۔
• تھرڈ پارٹی embeds کو بھول جانا۔ نقشے، ویڈیوز اور ویجٹس روشن رہ سکتے ہیں؛ دیکھیں کہ ان کا dark آپشن ہے یا نہیں۔
• صرف دو حالتوں والا ٹوگل۔ ایک بار کسی نے اسے دبایا تو وہ واپس سسٹم کی پیروی پر نہیں جا سکتا۔
• light theme کو خراب کرنا۔ اپنے پرامپٹ میں واضح لکھیں کہ light ڈیزائن ویسا ہی رہے۔

چیک لسٹ

• تمام رنگ theme tokens سے آتے ہیں
• ڈیفالٹ میں سسٹم سیٹنگ کی پیروی ہوتی ہے
• Light، Dark اور System والا اختیاری ٹوگل، جو یاد رہتا ہے
• لوڈ یا ری فریش پر کوئی سفید جھلک نہیں
• color-scheme مقرر ہے تاکہ فارم کنٹرولز اور اسکرول بارز میچ کریں
• دونوں themes میں متن کا کنٹراسٹ کم از کم 4.5:1 ہے
• dark mode میں لوگوز، تصاویر، چارٹس اور embeds چیک ہو چکے ہیں
• light theme تبدیل نہیں ہوا
• ڈیسک ٹاپ اور فون پر جانچ ہو چکی ہے

Mythex کے ساتھ dark mode

Mythex پر بنی ایپس ڈیفالٹ میں Vite، React، TypeScript اور Tailwind استعمال کرتی ہیں، اس لیے اوپر کا Tailwind طریقہ براہ راست لاگو ہوتا ہے: مکمل سیٹ اپ والا پرامپٹ چیٹ میں چسپاں کریں، پھر دونوں themes میں اور فون سائز پر Preview چیک کریں۔ Mythex کا ڈیزائن پرامپٹنگ مشورہ یہ ہے کہ بتائیں کیا بدلنا ہے اور کیا برقرار رکھنا ہے، اور یہاں یہ اہم ہے؛ واضح لکھیں کہ light theme ویسا ہی رہے۔ دیکھیں Design اور UI پرامپٹس، اور اگر کوئی پاس غلط ہو جائے تو checkpoint سے واپس جائیں۔

لُک ٹھیک کرنے کے بارے میں مزید کے لیے دیکھیں AI سے اچھی نظر آنے والی ایپ کیسے ڈیزائن کریں اور AI ایپ بلڈرز کے لیے پرامپٹس کیسے لکھیں۔

سوالات