איך להוסיף Dark Mode ב-React עם Tailwind CSS ו-Zustand תוך 20 שניות
במדריך הזה תוכל ללמוד איך להוסיף Dark Mode בצורה פשוטה ויעילה לפרויקט React שלך, תוך שימוש ב-Tailwind CSS, ShadCN ו-Zustand. תוכל לשנות בין מצבים בעזרת קומפוננטות מוכנות והגדרות CSS מוכנות מראש. קוד קל, חיסכון בזמן, ויכולת עיצוב מלאה!
הוספת dark theme לReact בפחות מ20 שניות. חתיכת קליקביט הא? חשבת על זה לבד יא נוכל? וואלה כן 😄 ועכשיו לתוכן 😏 נקדים שהתחלתי איזה פרויקט חימום עם כל מיני טכנולוגיות, (בזמני החופשי בוס 😎) שאני רוצה לבדוק ביסודיות לצורך הטמעה בפרויקטים אמיתיים בעתיד. אז מה יש לנו בקליינט? 🙂 (עוד נגיע לסרבר אל דאגה) 0. נקודת מוצא - TypeScript (גם בגלל שהAi הרבה יותר חד עם זה). 1. הבסיס - React + Vite . 2. עיצוב - Tailwind css. 3. ספריות עיצוב - Shadcn ו Aceternity. 4. ניהול סטייטים - Zustand. 5. עוזרים אישיים - Claude וGpt. השלבים שיקחו אתכם אל הארץ המובטחת: 🥳 1. העתקה ושיבוץ קטעי קוד לפי המדריך הבא:
https://ui.shadcn.com/docs/dark-mode/vite2. תהנו בשביל זה כל האכילת ראש? 😶 אז בואו נפרט קצת יותר! 1. אז shadcn מגיע עם ערכות נושא שתוכלו לראות ולבחור
https://ui.shadcn.com/themesהעיקרון פשוט - משתני css מוכנים שאתם מעתיקים לindex.css שלכם וזהו. וכאן יש קאצ' - המשתנים משתנים כשיש class של "dark". 2. כדי להחליף בין האופציות Shadcn נותנים לכם הוק מבוסס Context api מוכן - כדי שתוכלו לשנות את הmode מכל מקום באתר, וקומפוננטה חמודה שבה תחליפו את המצבים על ידי ההוק. וכאן הבונוס מגיע: 🤠 לטעמי השימוש בcontext במקרה הזה מאריך בהמון ממש את הפיתרון. אז ביקשתי מקלודי להחליף לי לzustand, לצערי הוא עשה עבודה קצת איך לומר - מזופתת. אז יצרתי בעצמי את הגרסא הקלילה הבאה:
https://github.com/yosefus/animals-store-client/blob/master/src/components/theme.tsx* דיסקליימר קטנטן - הגירסא לא מטפלת בכמה מקרי קצה, אבל היא קלילה ופשוטה להבנה בקטע מוגזם אז לטעמי זה שווה את זה. בונוס נוסף: 😎
https://animals-store-client.vercel.app/כאן תראו את המערכת עובדת אם בא לכם להציץ
שתף את המאמר
נכתב על ידי
Yosefus Flavius
מתכנת מוכשר בחסד עליון ככה אומרים עלי כולם - לפחות בפרצוף שלי, אני אוהב ומעולה בלטייל ולתכנן טיולים בעיקר במדינות מגניבות, ואני צלם חובב כבר מעל 10 שנים.
עקבו באינסטגרם