Mentor note:

This task is now being handled by @Fauwaz

To avoid duplicate effort, please do not start or continue work on this task unless coordinated with the mentor.

Updates, questions, demos, and submissions for this task should come from @Fauwaz only.

Thank you for your cooperation.

— Ali (Mentor)

Country Theme Selector

Overview

The Country Theme Selector allows users to change the application's color scheme and background based on selected African countries. When Ghana is selected, a custom background image is displayed on all pages. For other countries, the UI uses gradient backgrounds based on their flag colors.

What I Did

• Implemented a theme system using React Context API to manage country-based themes
• Added 36 African countries (22 West African + 14 East African countries)
• Created dynamic color schemes that change based on each country's flag colors
• Special background handling for Ghana - displays a custom background image on all pages
• Gradient backgrounds for all other countries based on their flag colors
• Theme persistence - selected theme is saved to localStorage

For End Users

1. Open the theme selector - Click on the country flag/name in the header (top right)
2. Select a country - Choose from the dropdown list of 36 African countries
3. Theme applies automatically - The entire UI updates with the selected country's colors
4. Ghana special feature - When Ghana is selected, a background image appears on all pages
5. Theme persists - Your selection is saved and will be remembered on your next visit

Available Countries

West Africa (22 countries):
Ghana, Nigeria, Senegal, Côte d'Ivoire, Mali, Burkina Faso, Niger, Guinea, Sierra Leone, Liberia, Togo, Benin, Gambia, Guinea-Bissau, Cape Verde, Cameroon, Equatorial Guinea, Gabon, Congo, Central African Republic, Chad, São Tomé and Príncipe

East Africa (14 countries):
Kenya, Tanzania, Uganda, Rwanda, Burundi, Ethiopia, Eritrea, Djibouti, Somalia, South Sudan, Madagascar, Seychelles, Comoros, Mauritius

Technical Details

• Theme Context: client/src/contexts/ThemeContext.tsx
• Theme Switcher Component: client/src/components/ThemeSwitcher.tsx
• CSS Variables: Dynamic colors are applied via CSS custom properties
• Background Image: Ghana uses hammer-gave234649.jpg from client/src/Assets/

The Three Main Files

Attached is a readme to explain the implementation

Few images

Demo Link

Demo Link

GitHub URL

GitHub Link

Task Completed please review

Mentor Review & Approval

This task was fully implemented by @Fauwaz.

The multi-country theme system is complete, well-documented, and backed by code, screenshots, and GitHub commits.

All requirements have been satisfied and the implementation is audit-safe.

Proceeding with approval.

— Ali (Mentor)