مهارت‌های لازم:

• آشنایی با ReactJS
• آشنایی با ‍‍React Context
• کدخوانی

پروژه اولیه

پروژه اولیه را از این لینک دانلود کنید. ساختار فایل‌های این پروژه به صورت زیر است.

theme-switcher
├── public
│   ├── favicon.ico
│   └── index.html
├── src
│   ├── components
│   │   ├── NameBox.jsx
│   │   └── ThemeSwitcher.jsx
│   ├── constants
│   │   └── index.js
│   ├── data
│   │   └── Styles.js
│   ├── providers
│   │   └── ThemeProvider.jsx
│   ├── App.jsx
│   ├── index.css
│   ├── index.js
│   └── setupTests.js
├── package-lock.json
└── package.json

جزئیات

ظاهر کلی برنامه بدین صورت است:

در این سوال می‌خواهیم با استفاده از context در ری‌اکت برنامه‌ای بنویسیم که بتوانیم بین دو تم dark و light سوییچ کنیم.

مواردی که باید در این سوال رعایت کنید:

• تم برنامه با فعال کردن گزینه Dark mode باید dark و با غیرفعال کردن آن باید light شود.

تغییرات لازم برای هر فایل:

• فایل ThemeProvider.jsx: کد قسمت context را باید در این فایل بنویسید. مقدار اولیه تم باید light باشد.
• فایل ThemeSwitcher.jsx: در این فایل باید کد مربوط به تغییر تم را بزنید. در این فایل نیازی به تغییری قسمت return نیست.
• فایل App.jsx: در این فایل شما باید مقدار کنونی تم را از context بخوانید و به تابع Styles بدهید. در این فایل نیازی به ایجاد تغییرات در کامپوننت App و بخش return هر دو کامپوننت نیست.

نکات

• نام متغیر context خود را ThemeContext و برای تم، themeMode بگذارید.
• شما تنها مجاز به اعمال تغییرات در فایل‌های ThemeProvider.jsx و ThemeSwitcher.jsx و App.jsx هستید.
• دقت کنید فقط بخش return کامپوننت ThemeProvider.jsx نیاز به اعمال تغییرات دارد و برای مابقی کامپوننت‌ها نیازی به تغییری return آن‌ها نیست.
• پس از اعمال تغییرات، پروژه را zip کرده و ارسال کنید.دقت کنید که پوشه‌ی node_modules در فایل ارسالی نباشد.