איך להשתמש ב-has() ב-CSS להחלת Dark Mode בצורה פשוטה
בפוסט הזה נלמד איך להשתמש ב-has() ב-CSS להחלת dark mode על אתר, בעזרת משתני CSS. גלו איך לבצע את ה-toggle של dark mode בצורה פשוטה ויעילה בעזרת pseudo-class חדש שמהפך את העבודה עם עיצובים דינמיים.
מאז שאי שם ב2023 יצא הhas והצטרף לis וnot כולנו השתמשנו בהם השווצנו ורווינו נחת. 🤓 ואם אין לכם מושג על מה אני מדבר אני בהחלט קצת מקנא בכם - 😎 החיים שלכם בטח נטולי דאגות והדבר היחיד שמטריד את מנוחתכם זה האם יגמר החלב סויה בטעם קרמל מלוח מהצרכניה ליד הוילה שלכם בקיסריה. 🥱 ולמרות שניסינו להרגיע טיפה עם הפוסטי css, ההכרח לא יגונה שתיחשפו סוף סוף לשימוש קצת פחות נישתי (?) בpseudo-class הנ"ל. 🦄 אז הcodepen בתגובות יראה שימוש פשוט ביותר לtoggle של dark-mode בעזרת משתני css וhas. * ביקשתי מclaude שיכתוב את הקוד למטה - ולמרות שכיוונתי אותו מספר פעמים בעזרת זפטות הגונות יש לי המון השגות על הדרך בה הוא עשה את הtoggle 🙄 ועם כל הכבוד לai. בנתיים לתוצאה ספציפית בcss בדרך שאני רוצה, לא משנה כמה אני מסביר הם לא מצליחים להגיע מעבר לציון 90% (לשם ההגינות אני עם החינמיים). * אני עוד אעלה תכנים על ריאקט ועוד מלא טכנולוגיות חמודות שאני משחק בהם כרגע - אל תדאגו.
שתף את המאמר
נכתב על ידי
Yosefus Flavius
מתכנת מוכשר בחסד עליון ככה אומרים עלי כולם - לפחות בפרצוף שלי, אני אוהב ומעולה בלטייל ולתכנן טיולים בעיקר במדינות מגניבות, ואני צלם חובב כבר מעל 10 שנים.
עקבו באינסטגרם