سی ایس ایس میں روشنی یا سیاہ طریقوں کو کیسے لاگو کرنے کے لئے

Sep 14, 2025
کيسے
Use light and dark mode in CSS

سی ایس ایس کی تفصیلات کبھی تیار کی جاتی ہے. سی ایس ایس میں نئی ​​خصوصیات کو لاگو کرنے کے عمل پیچیدہ ہے، لیکن آسان ورژن یہ ہے کہ سی ایس ایس ورکنگ گروپ نئے عناصر پر فیصلہ کرنے میں شامل ہونے کا فیصلہ کرتا ہے. اس کے بعد یہ نئے عناصر کو لاگو کرنے کے لئے براؤزرز تک ہے، اور براؤزر ان کو لاگو کرنے کے لۓ اس کا انتخاب کرتے ہیں، لہذا اب ہم نئی خصوصیات کے لئے حمایت کی خرابی رکھتے ہیں. جبکہ یہ وقت پر پریشان ہوسکتا ہے، یہ مکمل تفصیلات پر عمل درآمد براؤزرز کے مقابلے میں ایسا کرنے کا ایک بہت اچھا طریقہ ہے، جیسا کہ ہم نے ویب کے ابتدائی دنوں میں دیکھا. اگر آپ اپنی سائٹ کے بارے میں فکر مند ہیں تو اس کی مکمل صلاحیت پر کام کرنا، ایک معاونت کی حمایت میں شامل ہے ویب میزبانی سروس.

یہ سب کچھ بہت زیادہ کام کرتا ہے؟ چیزوں کے ساتھ سادہ رکھیں ویب سائٹ بلڈر .

سی ایس ایس ورکنگ گروپ تمام بڑے براؤزر وینڈرز اور ایپل اور ایڈوب جیسے دیگر ٹیکنالوجی کمپنیوں سے اراکین سے بنا ہے. ایپل، حال ہی میں ماکو کے اپنے نئے ورژن کا آغاز کیا، براؤزر میں اس کے snazzy نئے سیاہ موڈ کا پتہ لگانے کا ایک طریقہ چاہتا تھا. ایسا کرنے کے لئے، ایپل نے ایک نئی سطح 5 میڈیا سوال کے لئے تفصیلات کو ایک سفارش کو دھکا دیا. 

 media (پہلے سے رنگ سکیم: روشنی | سیاہ)
{...}

اس میڈیا کے سوال کا استعمال کرتے ہوئے، ہم اس وقت پتہ لگ سکتے ہیں کہ صارف فی الحال OS میں روشنی یا سیاہ موڈ کا استعمال کر رہا ہے. اس وقت یہ صرف صفاری ٹیکنالوجی پیش نظارہ 69 اور اس سے اوپر کی طرف سے حمایت کی جاتی ہے، لیکن دوسرے براؤزر کو پیچھے نہیں ہونا چاہئے.

  • سی ایس ایس کے طریقوں کے لئے ایک ویب ڈیزائنر کا گائیڈ

اس کی جانچ کرنے کے لئے آپ کو MoJave 10.14 (MacOS) میں اپ گریڈ کرنے کی ضرورت ہوگی اور نظام کی ترجیحات میں سیاہ ظہور منتخب کیا جائے. کچھ طریقوں سے ہم مختلف موضوعات کو لاگو کرنے کے لئے اس نئے میڈیا سوال کا استعمال کرسکتے ہیں. ہم اب اس سبق میں ان میں سے کچھ تلاش کریں گے.

01. صفحہ سیٹ کریں

شروع کرنے کے لئے، ہمیں سٹائل میں کچھ ایچ ٹی ایم ایل عناصر پیدا کرنے کی ضرورت ہے، لہذا ہم کوڈپین پر ایک نیا قلم بنانا شروع کریں گے اور کچھ عناصر شامل کریں گے. ہم اس کے مرکز، اور کچھ عنوانات اور متن کے لۓ، ہم اپنے مواد کے لئے ایک کنٹینر شامل کریں گے. سی ایس ایس میں گھوںسلا استعمال کرنے کے لئے ہم سی ایس ایس کو استعمال کرنے کے لئے سی ایس ایس کو استعمال کریں گے. 

 & lt؛ ڈوی کلاس = "مواد کنٹینر" اور جی ٹی؛
& lt؛ h1 & gt؛ ایک & lt؛ / h1 & gt؛
& lt؛ h2 & gt؛ دو & lt؛ / h2 & gt؛
& lt؛ hr & gt؛
& lt؛ p & gt؛ ... & lt؛ / p & gt؛
& lt؛ p & gt؛ ... & lt؛ / p & gt؛
& lt؛ / div & gt؛

02. انداز بنیادی عناصر

اگلا ہم کچھ بنیادی شیلیوں کو شامل کریں گے اور Google سے کچھ فونٹ شامل کریں تاکہ ہمارے صفحے کو تھوڑا سا اچھا لگے. ہم اپنے تمام بنیادی عناصر کو اندازہ کریں گے، نئے فونٹ کے سائز، رنگوں اور فونٹ کو لاگو کرتے ہیں. 

 جسم {
فونٹ-خاندان: 'میریریویر'، سیرف؛
پس منظر کا رنگ: #ededed؛
رنگ: # 212121؛
Padding: 1.618rem؛
لائن اونچائی: 1.618؛
فونٹ سائز: 16px؛
}

03. ہالی ووڈ کنٹینر

CSS light and dark: style container

آرام دہ اور پرسکون لائن کی لمبائی کے ساتھ ایک کنٹینر کی تعمیر کریں

اگلا ہم اپنے کنٹینر کو پڑھنے کے لئے آرام دہ اور پرسکون لائن کی لمبائی کو بنانے کے لئے اپنے کنٹینر کو انداز کریں گے. ہم ایک پس منظر کا رنگ بھی شامل کریں گے اور شیڈو ڈراپ کریں گے. صفحے میں مواد کے باکس کو مرکز کرنے کے لئے، ہم مطلوبہ الفاظ 'آٹو' کو مارجن پراپرٹیز کے بائیں اور دائیں اقدار پر استعمال کریں گے. 

. کنٹینٹ کنٹینر {
Padding: 1.618rem 3.236rem؛
زیادہ سے زیادہ چوڑائی: 48.54
مارجن: 3.236 ایم ایم آٹو؛
پس منظر کا رنگ: #FFF؛
باکس سائے: 0 0 12px 6px RGBA (0،0،0،0.05)؛
سرحدی ردعمل: .269666667rem؛
}

04. نمایاں رنگ شامل کریں

CSS light and dark: highlight colour

ایک خاص رنگ منتخب کریں اور اس کے لئے ایک سٹائل بنائیں

زیادہ تر ویب سائٹس کہیں کہیں رنگ کا استعمال کرتے ہیں، اور اس وقت ہم صرف سفید اور گرے ہیں، لہذا اب ہم ایک خاص رنگ کا انتخاب کرتے ہیں اور اس رنگ کو لاگو کرنے کے لئے ایک سٹائل بناتے ہیں. ہم ایک اسپین ٹیگ کا استعمال کرتے ہوئے رنگ کو لاگو کریں گے، اور ہمارے مواد میں کچھ اجاگر کرنے کے لئے اسے استعمال کریں گے. 

 اور ایل ٹی؛ اسپین کلاس = "متن - الفا" اور جی ٹی؛ Lorem ipsum & lt؛ / span & gt؛
.text - الفا {
رنگ: # C3423F؛
}

05. میڈیا سوال کو لاگو کریں

CSS light and dark: highlight colour

اب آپ کے پاس کچھ شیلیوں ہیں، آپ میڈیا کے سوال کو لاگو کرسکتے ہیں

اب ہمارے پاس کچھ بنیادی شیلیوں کے ساتھ ایک صفحہ ہے، ہم ایسے طریقوں کو دیکھتے ہیں جو ہم میڈیا کے سوال کو نافذ کرسکتے ہیں. آئیے اس میں شامل ہیں اور ہماری کچھ شیلیوں کو ختم کرنا شروع کریں. ہم جسم کی شیلیوں کے ساتھ شروع کریں گے. 

 media (مثالی رنگ سکیم: سیاہ)
{
جسم {
پس منظر کا رنگ: # 111؛
}
}

06. باقی شیلیوں کو اوور کریں

CSS light and dark: override styles

اب آپ باقی شیلیوں کو اوور کر سکتے ہیں

اب ہم دیکھ سکتے ہیں کہ میڈیا کا سوال کام کر رہا ہے اور ہمارے جسم کے پس منظر کا رنگ بدل گیا ہے، ہمیں اپنے تمام باقی شیلیوں کو اوور کرنے کی ضرورت ہے. 

. کنٹینٹ کنٹینر
{
رنگین: وائٹ؛
پس منظر کا رنگ: # 212121؛
}
.text - الفا {
رنگ: # 50A8D8؛
}

07. برقرار رکھنا

جبکہ ہم نے صرف ہمارے ڈیمو کے لئے بالکل اچھی طرح سے کام کیا ہے اور چھوٹے ویب سائٹس پر برقرار رکھا جا سکتا ہے، یہ طریقہ ایک بڑی منصوبے پر منظم کرنے کے لئے ایک خوفناک ہو گا، بہت سے مختلف عناصر کے ساتھ جو سب کو ختم کرنے کی ضرورت ہے. ہم اوپر ہمارے مثال میں جھگڑا کے بھاری استعمال بھی کر رہے ہیں، جبکہ تمام عناصر کو نشانہ بنانے کے لئے ایک بڑے نظام زیادہ خاصیت کی ضرورت ہوسکتی ہے.

08. ایک اور نقطہ نظر لے لو

CSS light and dark: another approach

فوری اور گندی سیاہ موڈ کے لئے، صرف 'Invert' کا استعمال کریں ...

تو ہم کس طرح مسئلہ سے نمٹنے کے لئے کر سکتے ہیں؟ آئیے سی ایس ایس فلٹرز کو دیکھتے ہیں. ہم سی ایس ایس کے فلٹرز پر استعمال کرتے ہوئے اقدار میں سے ایک 'خراب' ہے، لہذا ہم صرف ایچ ٹی ایم ایل پر لاگو کرسکتے ہیں اور تمام رنگوں کو تبدیل کر سکتے ہیں، ہمیں ایک 'گہرا موڈ' دیتے ہیں. 

 media (پہلے سے رنگ سکیم: سیاہ) {
ایچ ٹی ایم ایل {
فلٹر: انور (100٪)؛
}
}

09. تصاویر شامل کریں

CSS light and dark: images

... بالکل، آپ کی تصاویر اس طرح نظر آئیں گے

جبکہ فلٹر کا طریقہ ہمارا دستاویز میں موجود مواد کے ساتھ کام کرتا ہے جبکہ ہم ابھی تک بہت اچھا نظر نہیں آتے ہیں - مثال کے طور پر، ہمارے باکس سائے، مثال کے طور پر، جو بھی بہت عجیب لگ رہا ہے. ہم نے شیلیوں پر کنٹرول کھو دیا ہے، جو آپ کے پس منظر میں رنگا رنگ ہے جب بھی بڑی مسئلہ بن جاتی ہے. تصاویر میں ملوث ہونے پر غور کرنے کے لئے ہمارے پاس ایک نئی نئی مسئلہ بھی ہے. آتے ہیں کہ جب ہم اپنے صفحے پر ایک تصویر شامل کرتے ہیں تو کیا ہوتا ہے.

10. اپنی مرضی کے مطابق خصوصیات کا استعمال کریں

ہم نے ابھی تک دریافت کیا ہے کہ ہم اس شیلیوں پر کنٹرول کھو دیں یا اس بات کا یقین کرنے کے لئے بہت سے بحالی کی ضرورت ہوتی ہے تاکہ اس بات کا یقین کرنے کے لئے کہ سب کچھ سیاہ موڈ میں اپ ڈیٹ کیا جائے. ایک اور طریقہ یہ ہے کہ ہم اس سے رابطہ کر سکتے ہیں: ہم اپنے رنگوں کی وضاحت کرنے کے لئے اپنی مرضی کے مطابق خصوصیات استعمال کرسکتے ہیں اور پھر میڈیا کے سوال کا استعمال کرتے ہوئے انہیں اوورائڈ کرسکتے ہیں.

11. اپنی مرضی کے مطابق خصوصیات بنائیں

اپنی مرضی کے مطابق خصوصیات کو استعمال کرنے کے لئے، ہم ان کے اندر اندر ہمارے سی ایس ایس کے سب سے اوپر کی وضاحت کرتے ہیں ' جڑ عنصر. جڑ عنصر ایچ ٹی ایم ایل کے طور پر ایک ہی گنجائش ہے لہذا عالمی سطح پر دستیاب ہو جائے گا. ہمیں متغیر ناموں پر فیصلہ کرنے کی ضرورت ہے اور ان کی اقدار کی وضاحت کرنا ہے. 

: جڑ {
- بیکار رنگ رنگ: #ededed؛
- پیج پس منظر: #FFF؛
- ٹیکسٹ رنگ: # 212121؛
- رنگ الفا: # C3423F؛
}

12. اپنی مرضی کے مطابق خصوصیات کو لاگو کریں

اب ہمارے پاس کچھ اپنی مرضی کے مطابق خصوصیات ہیں جو ہم ان کو اپنے سی ایس ایس میں استعمال کرسکتے ہیں. ہم جسم کے ساتھ شروع کریں گے اور پس منظر اور متن کے رنگ کو لاگو کریں گے. ایک اپنی مرضی کے مطابق جائیداد کا استعمال کرنے کے لئے ہم ' وار (- اپنی مرضی کے مطابق جائیداد کا نام) 'نحو. 

 جسم {
پس منظر کا رنگ: وار (- پس منظر کا رنگ)؛
رنگین: VAR (- متن رنگ)؛
}

13. باقی خصوصیات کو لاگو کریں

اسی طریقہ کا استعمال کرتے ہوئے، ہم اپنے کنٹینر اور 'رنگ' کے 'پس منظر کا رنگ' بھی اپ ڈیٹ کر سکتے ہیں ' متن الفا 'ہماری اپنی مرضی کے مطابق خصوصیات کو استعمال کرنے کے لئے کلاس. ہمارے صفحے میں تمام رنگوں کو اب اپنی مرضی کے مطابق خصوصیات کا استعمال کرتے ہوئے کنٹرول کیا جاتا ہے. 

. کنٹینٹ کنٹینر {
پس منظر رنگ: VAR (- صفحہ پس منظر)؛
}
.text - الفا {
رنگ: وار (- رنگ الفا)؛
}

14. میڈیا سوالات کو دوبارہ شامل کریں

اب ہم میڈیا کے سوال کو دوبارہ شامل کر سکتے ہیں، لیکن اس بار ہم اپنی مرضی کے مطابق جائیداد کے اقدار کو اوور کر سکتے ہیں جو اس کے اندر اندر ہیں. ہم اصل جڑ کی تعریف کے بعد یہ حق رکھیں گے، اور ذرائع ابلاغ کے سوال کے اندر ہم اب ہمارے تمام رنگ اپنی مرضی کے مطابق خصوصیات کے لئے نئے اقدار کا انتخاب کرسکتے ہیں. 

 media (پہلے سے رنگ سکیم: سیاہ) {
جڑ {
- بیک بیک رنگ رنگ: # 111؛
- پیج پس منظر: # 212121؛
- ٹیکسٹ رنگ: #ededed؛
- رنگ الفا: # 50A8D8؛
}
}

15. مکمل کنٹرول لے لو

اپنی مرضی کے مطابق خصوصیات ہمیں کونسا رنگ اور دیگر خصوصیات کو تبدیل کرنے اور استعمال کرتے ہیں منتخب کرنے کے لئے مکمل کنٹرول فراہم کرتے ہیں. سیاہ موڈ کا استعمال کرتے وقت اپنے صفحے کے کنٹینر پر باکس شیڈو کو اپ ڈیٹ کریں. ایسا کرنے کے لئے ہمیں صفحہ شیڈو کے لئے ایک نئی اپنی مرضی کے مطابق جائیداد پیدا کرنے کی ضرورت ہے. 

: جڑ {
...
- پیج-سائے: 0 0 12px 6px RGBA.
(0،0،0،0.05)؛
}

16. سائے کو لاگو کریں

اب ہم نے ایک اور اپنی مرضی کے مطابق جائیداد کو تخلیق کیا ہے جو ہمیں اس صفحے پر صحیح عنصر پر لاگو کرنے کی ضرورت ہے. شفافیت کو کم کرنے کے لئے ہم اپنے جڑ عنصر کے اندر قیمت کو اوور کر سکتے ہیں. 

 media (پہلے سے رنگ سکیم: سیاہ) {
جڑ {
...
پیج - سائے:
0 0 12px 6px RGBA (0،0،0،0.33)
؛
}
}
کنٹینر کنٹینر {
...
باکس سائے: وار (- صفحہ سایہ)؛
}

17. ایک تصویر شامل کریں

CSS light and dark: images

ایک تصویر شامل کریں اور مواد کے آگے اسے پھینک دیں

اب ہم ایک تصویر واپس ہماری مواد میں شامل کرتے ہیں، اور پھر ہم مواد کے آگے تصویر کو فلوٹ کرنے کے لئے کچھ بنیادی شیلیوں کو شامل کرسکتے ہیں. 

 img {
چوڑائی: 100٪؛
اونچائی: آٹو؛
فلوٹ: بائیں؛
زیادہ سے زیادہ چوڑائی: 300px؛
مارجن دائیں: 1.618rem؛
مارجن-نیچے: 1.618rem؛
}

جیسا کہ ہم دیکھ سکتے ہیں، چونکہ ہم کسی بھی فلٹر استعمال نہیں کر رہے ہیں اس تصویر کو دو موضوعات کے درمیان تبدیل نہیں کیا جاتا ہے.

18. مزید اجزاء شامل کریں

اب ہم اپنی اپنی مرضی کے مطابق خصوصیات حاصل کر چکے ہیں. ہم عناصر کو صفحہ میں شامل کر سکتے ہیں اور ان کے متغیرات کے ساتھ ان کو اسٹائل کرسکتے ہیں. چلو ایک بٹن کلاس بنائیں اور ہمارے صفحے پر ایک بٹن شامل کریں. 

 .button {
ڈسپلے: ان لائن-فلیکس؛
فونٹ - خاندان: وارث؛
پس منظر رنگ: VAR (- رنگ الفا)؛
رنگین: VAR (- متن رنگ)؛
Padding: 1.618rem 3.236rem؛
سرحد: 0 کوئی بھی نہیں
سرحدی ردعمل: 0.25 ملین؛
متن سجاوٹ: کوئی بھی نہیں؛
}

19. بٹن ہور شیلیوں بنائیں

اسی متغیرات کا استعمال کرتے ہوئے، ہم ایک ہور سٹائل بھی بنا سکتے ہیں جو دونوں موضوعات کے لئے استعمال کیا جا سکتا ہے. اس کو حاصل کرنے کے لئے، ہم رنگوں کو تبدیل کردیں گے جب صارف کو بٹن پر چلتا ہے اور ان خصوصیات کو منتقلی کے لۓ کم جرائم کا سامنا کرنا پڑتا ہے. 

 .button {
...
منتقلی: پس منظر کا رنگ 150ms،
رنگ 150ms؛
& amp؛: hover {
پس منظر رنگ: VAR (- متن رنگ)؛
رنگ: وار (- رنگ الفا)؛
}
}

20. بٹن اپنی مرضی کے مطابق خصوصیات بنائیں

اپنی مرضی کے مطابق خصوصیات باقاعدگی سے سی ایس ایس عناصر کے طور پر ایک ہی گنجائش ہے؛ اس کا مطلب یہ ہے کہ ہم انہیں زیادہ مخصوص انتخاب کنندہ کا استعمال کرتے ہوئے استعمال کر سکتے ہیں. ہم اس کا فائدہ اٹھا سکتے ہیں اور کچھ متغیر بنا سکتے ہیں جو ہمارے بٹن پر گراؤنڈ ہیں. 

 .button {
- بٹٹن پس منظر: وار (- رنگ الفا)؛
- بٹٹن متن: وار (- پس منظر کا رنگ)؛
پس منظر رنگ: VAR (- بٹن پس منظر)؛
رنگ: وار (بٹن متن)؛
...
}

21. دائرہ کار کا استعمال کریں

CSS light and dark: scope

اپنے بٹن کے لئے مختلف شیلیوں اور بات چیت پیدا کرنے کے لئے گنجائش کا استعمال کریں

ہم اس گنجائش کو مختلف شیلیوں اور سیاہ اور ہلکے موضوعات میں ہمارے بٹن کے لئے بات چیت کرنے کے لئے اس گنجائش کو استعمال کرسکتے ہیں. ہم میڈیا کے سوال یا عنصر کی حالت پر مبنی ہمارے متغیرات کی قدر کو تبدیل کر سکتے ہیں، اس کے بجائے جائیداد کو دوبارہ کرنے کے بجائے ہم عام طور پر نئی قیمت کے ساتھ دوبارہ بھیجنے کے بجائے. 

 .button {
...
& amp؛: hover {
- بٹٹن پس منظر: # AE3937؛
media (پہلے سے رنگ سکیم: سیاہ) {
- بٹٹن پس منظر: # 2E98D1؛
- بٹٹن متن: وار (- پس منظر-
رنگ)؛
}
}
}

ایک ٹیم کے ساتھ تعمیر پر کام کرنا؟ اپنے عمل کو مہذب کے ساتھ ہم آہنگی رکھیں کلاؤڈ اسٹوریج .

Generate, the award winning conference for web designers, returns to NYC on April 24-25! To book tickets visit www.generateconf.com

پیدا، ویب ڈیزائنرز کے لئے ایوارڈ جیتنے والی کانفرنس، 24-25 اپریل کو NYC پر واپس آتی ہے! ٹکٹوں کا دورہ کرنے کے لئے www.generateconf.com.

یہ مضمون اصل میں تخلیقی ویب ڈیزائن میگزین کے مسئلہ 283 میں شائع کیا گیا تھا ویب ڈیزائنر . مسئلہ 283 خریدیں یا یہاں ویب ڈیزائنر کو سبسکرائب کریں .

متعلقہ مضامین:

  • سی ایس ایس آرٹ کے ساتھ شروع کرو
  • 12 عظیم سی ایس ایس حرکت پذیری وسائل
  • کیا سی ایس ایس فریم ورک آپ کو استعمال کرنا چاہئے؟

کيسے - انتہائی مشہور مضامین

میک پر ایک اسکرین شاٹ کیسے لے لو

کيسے Sep 14, 2025

(تصویری کریڈٹ: تخلیقی بلق) اگر آپ اپنی پوری اسکرین، ایک ونڈو، یا ص..

8 حیرت انگیز نیا گرافک ڈیزائن سبق

کيسے Sep 14, 2025

چاہے آپ صرف گرافک ڈیزائن یا ایک موسمی پرو میں شروع ہو رہے ہیں، اگر آپ کھیل سے پہلے رہنا چاہتے ہیں تو سیکھنے..

انفینٹی ڈیزائنر: رکاوٹوں کا استعمال کیسے کریں

کيسے Sep 14, 2025

انفینٹی ڈیزائنر ایک مقبول ہے ویکٹر آرٹ آلے اس کے ساتھ سات..

ایک ساخت میں متحرک تحریک بنائیں

کيسے Sep 14, 2025

اپنے ڈرائنگ کو شروع کرنے سے پہلے یہ فیصلہ کرنا ضروری ہے کہ آپ کس قسم کی ت..

VR میں ایک کردار کو کس طرح مجسمہ

کيسے Sep 14, 2025

صفحہ 1 کا 2: صفحہ 1 صفحہ 1 ..

آپ کے اپنے کینوس بورڈز کیسے بنائیں

کيسے Sep 14, 2025

اپنے اپنے کینوس کے بورڈ بنانا مزہ، جلدی اور آپ کو پیسہ بچا سکتا ہے. یہ آپ..

اثرات کے بعد Illustrator گرافکس تیار کرنے کے لئے

کيسے Sep 14, 2025

میں آپ کو بتانا شروع نہیں کر سکتا ایڈوب Illustrator. فائلوں کو مجھے ح�..

سنیما 4 ڈی میں بال کیسے بنائیں

کيسے Sep 14, 2025

کارلوس Ortega Elizalde اور Lois Van Baarle کے تصوراتی، بہترین کردار آرٹ کی طرف سے حوص�..

اقسام