איך להוסיף Dark Mode ב-React עם Tailwind CSS ו-Zustand תוך 20 שניות

הוספת 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/vite

2. תהנו בשביל זה כל האכילת ראש? 😶 אז בואו נפרט קצת יותר! 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/

כאן תראו את המערכת עובדת אם בא לכם להציץ