COUNTRY_THEME_README.md
Fauwaz (Fauwaz)
Actions

Authored By

	Fauwaz
	Dec 15 2025, 5:31 PM

Size

2 KB

Referenced Files

None

Subscribers

None

COUNTRY_THEME_README.md
View Options

	# 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 We 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

	## How to Use

	### 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/`

	## Features

	✅ 36 African countries with unique color schemes
	✅ Ghana background image on all pages
	✅ Gradient backgrounds for other countries
	✅ Theme persistence across sessions
	✅ Scrollable dropdown for easy country selection
	✅ Responsive design

File Metadata

Mime Type: text/plain
Storage Engine: blob
Storage Format: Raw Data
Storage Handle: 22736252
Default Alt Text: COUNTRY_THEME_README.md (2 KB)

COUNTRY_THEME_README.mdFauwaz (Fauwaz)Actions

COUNTRY_THEME_README.mdView Options

File Metadata

Event Timeline

COUNTRY_THEME_README.md
Fauwaz (Fauwaz)
Actions

COUNTRY_THEME_README.md
View Options