Page MenuHomePhabricator
Files F71081112

ThemeContext.tsx
Fauwaz (Fauwaz)
Actions

Authored By
Fauwaz
Dec 15 2025, 5:28 PM
Size
49 KB
Referenced Files
None
Subscribers
None

ThemeContext.tsx
View Options

import React, { createContext, useContext, useState, useEffect, ReactNode } from 'react';
import ghanaBackgroundImage from '../Assets/hammer-gave234649.jpg';
// West and East African Countries
export type CountryTheme =
// West Africa
| 'ghana' | 'nigeria' | 'senegal' | 'cote-divoire' | 'mali' | 'burkina-faso' | 'niger'
| 'guinea' | 'sierra-leone' | 'liberia' | 'togo' | 'benin' | 'gambia' | 'guinea-bissau'
| 'cape-verde' | 'cameroon' | 'equatorial-guinea' | 'gabon' | 'congo' | 'central-african-republic'
| 'chad' | 'sao-tome-and-principe'
// East Africa
| 'kenya' | 'tanzania' | 'uganda' | 'rwanda' | 'burundi'
| 'ethiopia' | 'eritrea' | 'djibouti' | 'somalia' | 'south-sudan'
| 'madagascar' | 'seychelles' | 'comoros' | 'mauritius';
export interface ThemeColors {
// Primary colors (main flag color)
primary: string;
primaryLight: string;
primaryDark: string;
primarySubtle: string;
// Accent colors (secondary flag color)
accent: string;
accentLight: string;
accentDark: string;
accentSubtle: string;
// Secondary colors (tertiary flag color)
secondary: string;
secondaryLight: string;
secondaryDark: string;
secondarySubtle: string;
// Additional flag colors for more comprehensive theming
tertiary?: string;
tertiaryLight?: string;
tertiaryDark?: string;
// Legacy aliases for backward compatibility
primaryBlue: string;
primaryBlueLight: string;
primaryBlueDark: string;
secondaryBlue: string;
// Status colors (derived from flag colors)
success: string;
warning: string;
error: string;
info: string;
// Text and UI colors
textPrimary: string;
textSecondary: string;
borderColor: string;
cardBackground: string;
}
export interface BackgroundConfig {
type: 'gradient' | 'image';
gradient: string; // CSS gradient string based on flag colors
image?: string; // Image URL (optional)
overlay: string; // Overlay gradient for text readability
pattern?: string; // Additional pattern if needed
}
export interface CountryThemeConfig {
name: string;
flag: string; // Emoji flag
colors: ThemeColors;
background: BackgroundConfig;
}
// Helper function to create gradient from flag colors
const createFlagGradient = (color1: string, color2: string, color3?: string, color4?: string, angle: string = '135deg'): string => {
if (color4) {
return `linear-gradient(${angle}, ${color1} 0%, ${color2} 33%, ${color3} 66%, ${color4} 100%)`;
}
if (color3) {
return `linear-gradient(${angle}, ${color1} 0%, ${color2} 50%, ${color3} 100%)`;
}
return `linear-gradient(${angle}, ${color1} 0%, ${color2} 100%)`;
};
// Helper function to create overlay gradient
const createOverlay = (color1: string, color2: string, color3?: string, opacity: number = 0.75): string => {
const rgb1 = hexToRgb(color1);
const rgb2 = hexToRgb(color2);
if (color3) {
const rgb3 = hexToRgb(color3);
return `linear-gradient(135deg, rgba(${rgb1}, ${opacity}) 0%, rgba(${rgb2}, ${opacity - 0.05}) 50%, rgba(${rgb3}, ${opacity}) 100%)`;
}
return `linear-gradient(135deg, rgba(${rgb1}, ${opacity}) 0%, rgba(${rgb2}, ${opacity}) 100%)`;
};
// Helper to convert hex to rgb
const hexToRgb = (hex: string): string => {
const result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex);
if (!result) return '0, 0, 0';
return `${parseInt(result[1], 16)}, ${parseInt(result[2], 16)}, ${parseInt(result[3], 16)}`;
};
// Note: lighten/darken functions removed as we're using explicit color values
const countryThemes: Record<CountryTheme, CountryThemeConfig> = {
// Ghana - Red, Gold, Green (with background image)
ghana: {
name: 'Ghana',
flag: '🇬🇭',
colors: {
primary: '#CE1126', // Red
primaryLight: '#E63946',
primaryDark: '#A91D2A',
primarySubtle: '#F8E8EA',
accent: '#FCD116', // Gold
accentLight: '#FDE68A',
accentDark: '#F59E0B',
accentSubtle: '#FFFBEB',
secondary: '#006B3F', // Green
secondaryLight: '#008751',
secondaryDark: '#004D2E',
secondarySubtle: '#E6F5ED',
primaryBlue: '#CE1126',
primaryBlueLight: '#E63946',
primaryBlueDark: '#A91D2A',
secondaryBlue: '#F8E8EA',
success: '#006B3F',
warning: '#F59E0B',
error: '#DC2626',
info: '#CE1126',
textPrimary: '#CE1126',
textSecondary: '#374151',
borderColor: '#CE1126',
cardBackground: '#FFFFFF',
},
background: {
type: 'image',
image: ghanaBackgroundImage,
gradient: ghanaBackgroundImage, // Use image URL for gradient when type is image
overlay: createOverlay('#CE1126', '#FCD116', '#006B3F', 0.75),
},
},
// Nigeria - Green, White, Green
nigeria: {
name: 'Nigeria',
flag: '🇳🇬',
colors: {
primary: '#008751', // Green
primaryLight: '#00A862',
primaryDark: '#006B3F',
primarySubtle: '#E6F5ED',
accent: '#FFFFFF', // White
accentLight: '#FFFFFF',
accentDark: '#F3F4F6',
accentSubtle: '#F9FAFB',
secondary: '#008751', // Green
secondaryLight: '#00A862',
secondaryDark: '#006B3F',
secondarySubtle: '#E6F5ED',
primaryBlue: '#008751',
primaryBlueLight: '#00A862',
primaryBlueDark: '#006B3F',
secondaryBlue: '#E6F5ED',
success: '#008751',
warning: '#F59E0B',
error: '#DC2626',
info: '#008751',
textPrimary: '#008751',
textSecondary: '#374151',
borderColor: '#008751',
cardBackground: '#FFFFFF',
},
background: {
type: 'gradient',
gradient: createFlagGradient('#008751', '#FFFFFF', '#008751', undefined, '90deg'),
overlay: createOverlay('#008751', '#FFFFFF', '#008751', 0.75),
},
},
// Senegal - Green, Yellow, Red
senegal: {
name: 'Senegal',
flag: '🇸🇳',
colors: {
primary: '#00853F', // Green
primaryLight: '#00A862',
primaryDark: '#006B3F',
primarySubtle: '#E6F5ED',
accent: '#FCD116', // Yellow
accentLight: '#FDE68A',
accentDark: '#F59E0B',
accentSubtle: '#FFFBEB',
secondary: '#CE1126', // Red
secondaryLight: '#E63946',
secondaryDark: '#A91D2A',
secondarySubtle: '#F8E8EA',
primaryBlue: '#00853F',
primaryBlueLight: '#00A862',
primaryBlueDark: '#006B3F',
secondaryBlue: '#E6F5ED',
success: '#00853F',
warning: '#FCD116',
error: '#CE1126',
info: '#00853F',
textPrimary: '#00853F',
textSecondary: '#374151',
borderColor: '#CE1126',
cardBackground: '#FFFFFF',
},
background: {
type: 'gradient',
gradient: createFlagGradient('#00853F', '#FCD116', '#CE1126', undefined, '90deg'),
overlay: createOverlay('#00853F', '#FCD116', '#CE1126', 0.75),
},
},
// Côte d'Ivoire - Orange, White, Green
'cote-divoire': {
name: 'Côte d\'Ivoire',
flag: '🇨🇮',
colors: {
primary: '#F77F00', // Orange
primaryLight: '#FF9500',
primaryDark: '#D66A00',
primarySubtle: '#FFF4E6',
accent: '#FFFFFF', // White
accentLight: '#FFFFFF',
accentDark: '#F3F4F6',
accentSubtle: '#F9FAFB',
secondary: '#009639', // Green
secondaryLight: '#00A862',
secondaryDark: '#006B3F',
secondarySubtle: '#E6F5ED',
primaryBlue: '#F77F00',
primaryBlueLight: '#FF9500',
primaryBlueDark: '#D66A00',
secondaryBlue: '#FFF4E6',
success: '#009639',
warning: '#F77F00',
error: '#DC2626',
info: '#F77F00',
textPrimary: '#F77F00',
textSecondary: '#374151',
borderColor: '#009639',
cardBackground: '#FFFFFF',
},
background: {
type: 'gradient',
gradient: createFlagGradient('#F77F00', '#FFFFFF', '#009639', undefined, '90deg'),
overlay: createOverlay('#F77F00', '#FFFFFF', '#009639', 0.75),
},
},
// Mali - Green, Yellow, Red
mali: {
name: 'Mali',
flag: '🇲🇱',
colors: {
primary: '#14B53A', // Green
primaryLight: '#00A862',
primaryDark: '#006B3F',
primarySubtle: '#E6F5ED',
accent: '#FCD116', // Yellow
accentLight: '#FDE68A',
accentDark: '#F59E0B',
accentSubtle: '#FFFBEB',
secondary: '#CE1126', // Red
secondaryLight: '#E63946',
secondaryDark: '#A91D2A',
secondarySubtle: '#F8E8EA',
primaryBlue: '#14B53A',
primaryBlueLight: '#00A862',
primaryBlueDark: '#006B3F',
secondaryBlue: '#E6F5ED',
success: '#14B53A',
warning: '#FCD116',
error: '#CE1126',
info: '#14B53A',
textPrimary: '#14B53A',
textSecondary: '#374151',
borderColor: '#CE1126',
cardBackground: '#FFFFFF',
},
background: {
type: 'gradient',
gradient: createFlagGradient('#14B53A', '#FCD116', '#CE1126', undefined, '90deg'),
overlay: createOverlay('#14B53A', '#FCD116', '#CE1126', 0.75),
},
},
// Burkina Faso - Red, Green
'burkina-faso': {
name: 'Burkina Faso',
flag: '🇧🇫',
colors: {
primary: '#EF2B2D', // Red
primaryLight: '#E63946',
primaryDark: '#A91D2A',
primarySubtle: '#F8E8EA',
accent: '#FCD116', // Yellow star
accentLight: '#FDE68A',
accentDark: '#F59E0B',
accentSubtle: '#FFFBEB',
secondary: '#EF2B2D', // Red
secondaryLight: '#E63946',
secondaryDark: '#A91D2A',
secondarySubtle: '#F8E8EA',
primaryBlue: '#EF2B2D',
primaryBlueLight: '#E63946',
primaryBlueDark: '#A91D2A',
secondaryBlue: '#F8E8EA',
success: '#006B3F',
warning: '#FCD116',
error: '#EF2B2D',
info: '#EF2B2D',
textPrimary: '#EF2B2D',
textSecondary: '#374151',
borderColor: '#EF2B2D',
cardBackground: '#FFFFFF',
},
background: {
type: 'gradient',
gradient: createFlagGradient('#EF2B2D', '#FCD116', '#EF2B2D', undefined, '90deg'),
overlay: createOverlay('#EF2B2D', '#FCD116', '#EF2B2D', 0.75),
},
},
// Niger - Orange, White, Green
niger: {
name: 'Niger',
flag: '🇳🇪',
colors: {
primary: '#E05206', // Orange
primaryLight: '#FF6B00',
primaryDark: '#C04400',
primarySubtle: '#FFF0E6',
accent: '#FFFFFF', // White
accentLight: '#FFFFFF',
accentDark: '#F3F4F6',
accentSubtle: '#F9FAFB',
secondary: '#14B53A', // Green
secondaryLight: '#00A862',
secondaryDark: '#006B3F',
secondarySubtle: '#E6F5ED',
primaryBlue: '#E05206',
primaryBlueLight: '#FF6B00',
primaryBlueDark: '#C04400',
secondaryBlue: '#FFF0E6',
success: '#14B53A',
warning: '#E05206',
error: '#DC2626',
info: '#E05206',
textPrimary: '#E05206',
textSecondary: '#374151',
borderColor: '#14B53A',
cardBackground: '#FFFFFF',
},
background: {
type: 'gradient',
gradient: createFlagGradient('#E05206', '#FFFFFF', '#14B53A', undefined, '90deg'),
overlay: createOverlay('#E05206', '#FFFFFF', '#14B53A', 0.75),
},
},
// Guinea - Red, Yellow, Green
guinea: {
name: 'Guinea',
flag: '🇬🇳',
colors: {
primary: '#CE1126', // Red
primaryLight: '#E63946',
primaryDark: '#A91D2A',
primarySubtle: '#F8E8EA',
accent: '#FCD116', // Yellow
accentLight: '#FDE68A',
accentDark: '#F59E0B',
accentSubtle: '#FFFBEB',
secondary: '#006B3F', // Green
secondaryLight: '#008751',
secondaryDark: '#004D2E',
secondarySubtle: '#E6F5ED',
primaryBlue: '#CE1126',
primaryBlueLight: '#E63946',
primaryBlueDark: '#A91D2A',
secondaryBlue: '#F8E8EA',
success: '#006B3F',
warning: '#FCD116',
error: '#CE1126',
info: '#CE1126',
textPrimary: '#CE1126',
textSecondary: '#374151',
borderColor: '#CE1126',
cardBackground: '#FFFFFF',
},
background: {
type: 'gradient',
gradient: createFlagGradient('#CE1126', '#FCD116', '#006B3F', undefined, '90deg'),
overlay: createOverlay('#CE1126', '#FCD116', '#006B3F', 0.75),
},
},
// Sierra Leone - Green, White, Blue
'sierra-leone': {
name: 'Sierra Leone',
flag: '🇸🇱',
colors: {
primary: '#0072C6', // Blue
primaryLight: '#3B82F6',
primaryDark: '#1E40AF',
primarySubtle: '#DBEAFE',
accent: '#FFFFFF', // White
accentLight: '#FFFFFF',
accentDark: '#F3F4F6',
accentSubtle: '#F9FAFB',
secondary: '#1EB53A', // Green
secondaryLight: '#00A862',
secondaryDark: '#006B3F',
secondarySubtle: '#E6F5ED',
primaryBlue: '#0072C6',
primaryBlueLight: '#3B82F6',
primaryBlueDark: '#1E40AF',
secondaryBlue: '#DBEAFE',
success: '#1EB53A',
warning: '#F59E0B',
error: '#DC2626',
info: '#0072C6',
textPrimary: '#0072C6',
textSecondary: '#374151',
borderColor: '#1EB53A',
cardBackground: '#FFFFFF',
},
background: {
type: 'gradient',
gradient: createFlagGradient('#0072C6', '#FFFFFF', '#1EB53A', undefined, '90deg'),
overlay: createOverlay('#0072C6', '#FFFFFF', '#1EB53A', 0.75),
},
},
// Liberia - Red, White stripes, Blue with star
liberia: {
name: 'Liberia',
flag: '🇱🇷',
colors: {
primary: '#002868', // Blue
primaryLight: '#1E40AF',
primaryDark: '#1E3A8A',
primarySubtle: '#DBEAFE',
accent: '#FFFFFF', // White
accentLight: '#FFFFFF',
accentDark: '#F3F4F6',
accentSubtle: '#F9FAFB',
secondary: '#BF0A30', // Red
secondaryLight: '#E63946',
secondaryDark: '#A91D2A',
secondarySubtle: '#F8E8EA',
primaryBlue: '#002868',
primaryBlueLight: '#1E40AF',
primaryBlueDark: '#1E3A8A',
secondaryBlue: '#DBEAFE',
success: '#006B3F',
warning: '#F59E0B',
error: '#BF0A30',
info: '#002868',
textPrimary: '#002868',
textSecondary: '#374151',
borderColor: '#BF0A30',
cardBackground: '#FFFFFF',
},
background: {
type: 'gradient',
gradient: createFlagGradient('#002868', '#FFFFFF', '#BF0A30', undefined, '90deg'),
overlay: createOverlay('#002868', '#FFFFFF', '#BF0A30', 0.75),
},
},
// Togo - Green, Yellow, Red
togo: {
name: 'Togo',
flag: '🇹🇬',
colors: {
primary: '#006A4E', // Green
primaryLight: '#008751',
primaryDark: '#004D2E',
primarySubtle: '#E6F5ED',
accent: '#FCD116', // Yellow
accentLight: '#FDE68A',
accentDark: '#F59E0B',
accentSubtle: '#FFFBEB',
secondary: '#CE1126', // Red
secondaryLight: '#E63946',
secondaryDark: '#A91D2A',
secondarySubtle: '#F8E8EA',
primaryBlue: '#006A4E',
primaryBlueLight: '#008751',
primaryBlueDark: '#004D2E',
secondaryBlue: '#E6F5ED',
success: '#006A4E',
warning: '#FCD116',
error: '#CE1126',
info: '#006A4E',
textPrimary: '#006A4E',
textSecondary: '#374151',
borderColor: '#CE1126',
cardBackground: '#FFFFFF',
},
background: {
type: 'gradient',
gradient: createFlagGradient('#006A4E', '#FCD116', '#CE1126', undefined, '90deg'),
overlay: createOverlay('#006A4E', '#FCD116', '#CE1126', 0.75),
},
},
// Benin - Green, Yellow, Red
benin: {
name: 'Benin',
flag: '🇧🇯',
colors: {
primary: '#008751', // Green
primaryLight: '#00A862',
primaryDark: '#006B3F',
primarySubtle: '#E6F5ED',
accent: '#FCD116', // Yellow
accentLight: '#FDE68A',
accentDark: '#F59E0B',
accentSubtle: '#FFFBEB',
secondary: '#CE1126', // Red
secondaryLight: '#E63946',
secondaryDark: '#A91D2A',
secondarySubtle: '#F8E8EA',
primaryBlue: '#008751',
primaryBlueLight: '#00A862',
primaryBlueDark: '#006B3F',
secondaryBlue: '#E6F5ED',
success: '#008751',
warning: '#FCD116',
error: '#CE1126',
info: '#008751',
textPrimary: '#008751',
textSecondary: '#374151',
borderColor: '#CE1126',
cardBackground: '#FFFFFF',
},
background: {
type: 'gradient',
gradient: createFlagGradient('#008751', '#FCD116', '#CE1126', undefined, '90deg'),
overlay: createOverlay('#008751', '#FCD116', '#CE1126', 0.75),
},
},
// Gambia - Red, White, Blue, Green
gambia: {
name: 'Gambia',
flag: '🇬🇲',
colors: {
primary: '#CE1126', // Red
primaryLight: '#E63946',
primaryDark: '#A91D2A',
primarySubtle: '#F8E8EA',
accent: '#FFFFFF', // White
accentLight: '#FFFFFF',
accentDark: '#F3F4F6',
accentSubtle: '#F9FAFB',
secondary: '#006B3F', // Green
secondaryLight: '#008751',
secondaryDark: '#004D2E',
secondarySubtle: '#E6F5ED',
tertiary: '#003F87', // Blue
tertiaryLight: '#1E40AF',
tertiaryDark: '#1E3A8A',
primaryBlue: '#CE1126',
primaryBlueLight: '#E63946',
primaryBlueDark: '#A91D2A',
secondaryBlue: '#F8E8EA',
success: '#006B3F',
warning: '#F59E0B',
error: '#CE1126',
info: '#003F87',
textPrimary: '#CE1126',
textSecondary: '#374151',
borderColor: '#CE1126',
cardBackground: '#FFFFFF',
},
background: {
type: 'gradient',
gradient: createFlagGradient('#CE1126', '#FFFFFF', '#003F87', '#006B3F', '90deg'),
overlay: createOverlay('#CE1126', '#FFFFFF', '#006B3F', 0.75),
},
},
// Guinea-Bissau - Red, Yellow, Green
'guinea-bissau': {
name: 'Guinea-Bissau',
flag: '🇬🇼',
colors: {
primary: '#CE1126', // Red
primaryLight: '#E63946',
primaryDark: '#A91D2A',
primarySubtle: '#F8E8EA',
accent: '#FCD116', // Yellow
accentLight: '#FDE68A',
accentDark: '#F59E0B',
accentSubtle: '#FFFBEB',
secondary: '#006B3F', // Green
secondaryLight: '#008751',
secondaryDark: '#004D2E',
secondarySubtle: '#E6F5ED',
primaryBlue: '#CE1126',
primaryBlueLight: '#E63946',
primaryBlueDark: '#A91D2A',
secondaryBlue: '#F8E8EA',
success: '#006B3F',
warning: '#FCD116',
error: '#CE1126',
info: '#CE1126',
textPrimary: '#CE1126',
textSecondary: '#374151',
borderColor: '#CE1126',
cardBackground: '#FFFFFF',
},
background: {
type: 'gradient',
gradient: createFlagGradient('#CE1126', '#FCD116', '#006B3F', undefined, '90deg'),
overlay: createOverlay('#CE1126', '#FCD116', '#006B3F', 0.75),
},
},
// Cape Verde - Blue, White, Red
'cape-verde': {
name: 'Cape Verde',
flag: '🇨🇻',
colors: {
primary: '#003F87', // Blue
primaryLight: '#1E40AF',
primaryDark: '#1E3A8A',
primarySubtle: '#DBEAFE',
accent: '#FFFFFF', // White
accentLight: '#FFFFFF',
accentDark: '#F3F4F6',
accentSubtle: '#F9FAFB',
secondary: '#CF2027', // Red
secondaryLight: '#E63946',
secondaryDark: '#A91D2A',
secondarySubtle: '#F8E8EA',
tertiary: '#FCD116', // Yellow stars
tertiaryLight: '#FDE68A',
tertiaryDark: '#F59E0B',
primaryBlue: '#003F87',
primaryBlueLight: '#1E40AF',
primaryBlueDark: '#1E3A8A',
secondaryBlue: '#DBEAFE',
success: '#006B3F',
warning: '#FCD116',
error: '#CF2027',
info: '#003F87',
textPrimary: '#003F87',
textSecondary: '#374151',
borderColor: '#CF2027',
cardBackground: '#FFFFFF',
},
background: {
type: 'gradient',
gradient: createFlagGradient('#003F87', '#FFFFFF', '#CF2027', '#FCD116', '90deg'),
overlay: createOverlay('#003F87', '#FFFFFF', '#CF2027', 0.75),
},
},
// Cameroon - Green, Red, Yellow
cameroon: {
name: 'Cameroon',
flag: '🇨🇲',
colors: {
primary: '#007A5E', // Green
primaryLight: '#008751',
primaryDark: '#006B3F',
primarySubtle: '#E6F5ED',
accent: '#FCD116', // Yellow
accentLight: '#FDE68A',
accentDark: '#F59E0B',
accentSubtle: '#FFFBEB',
secondary: '#CE1126', // Red
secondaryLight: '#E63946',
secondaryDark: '#A91D2A',
secondarySubtle: '#F8E8EA',
primaryBlue: '#007A5E',
primaryBlueLight: '#008751',
primaryBlueDark: '#006B3F',
secondaryBlue: '#E6F5ED',
success: '#007A5E',
warning: '#FCD116',
error: '#CE1126',
info: '#007A5E',
textPrimary: '#007A5E',
textSecondary: '#374151',
borderColor: '#CE1126',
cardBackground: '#FFFFFF',
},
background: {
type: 'gradient',
gradient: createFlagGradient('#007A5E', '#FCD116', '#CE1126', undefined, '90deg'),
overlay: createOverlay('#007A5E', '#FCD116', '#CE1126', 0.75),
},
},
// Equatorial Guinea - Green, White, Red, Blue
'equatorial-guinea': {
name: 'Equatorial Guinea',
flag: '🇬🇶',
colors: {
primary: '#3E9A00', // Green
primaryLight: '#00A862',
primaryDark: '#006B3F',
primarySubtle: '#E6F5ED',
accent: '#FFFFFF', // White
accentLight: '#FFFFFF',
accentDark: '#F3F4F6',
accentSubtle: '#F9FAFB',
secondary: '#CE1126', // Red
secondaryLight: '#E63946',
secondaryDark: '#A91D2A',
secondarySubtle: '#F8E8EA',
tertiary: '#003F87', // Blue triangle
tertiaryLight: '#1E40AF',
tertiaryDark: '#1E3A8A',
primaryBlue: '#3E9A00',
primaryBlueLight: '#00A862',
primaryBlueDark: '#006B3F',
secondaryBlue: '#E6F5ED',
success: '#3E9A00',
warning: '#F59E0B',
error: '#CE1126',
info: '#003F87',
textPrimary: '#3E9A00',
textSecondary: '#374151',
borderColor: '#CE1126',
cardBackground: '#FFFFFF',
},
background: {
type: 'gradient',
gradient: createFlagGradient('#3E9A00', '#FFFFFF', '#CE1126', '#003F87', '90deg'),
overlay: createOverlay('#3E9A00', '#FFFFFF', '#CE1126', 0.75),
},
},
// Gabon - Green, Yellow, Blue
gabon: {
name: 'Gabon',
flag: '🇬🇦',
colors: {
primary: '#009E60', // Green
primaryLight: '#00A862',
primaryDark: '#006B3F',
primarySubtle: '#E6F5ED',
accent: '#FCD116', // Yellow
accentLight: '#FDE68A',
accentDark: '#F59E0B',
accentSubtle: '#FFFBEB',
secondary: '#003F87', // Blue
secondaryLight: '#1E40AF',
secondaryDark: '#1E3A8A',
secondarySubtle: '#DBEAFE',
primaryBlue: '#009E60',
primaryBlueLight: '#00A862',
primaryBlueDark: '#006B3F',
secondaryBlue: '#E6F5ED',
success: '#009E60',
warning: '#FCD116',
error: '#DC2626',
info: '#003F87',
textPrimary: '#009E60',
textSecondary: '#374151',
borderColor: '#003F87',
cardBackground: '#FFFFFF',
},
background: {
type: 'gradient',
gradient: createFlagGradient('#009E60', '#FCD116', '#003F87', undefined, '90deg'),
overlay: createOverlay('#009E60', '#FCD116', '#003F87', 0.75),
},
},
// Congo - Green, Yellow, Red
congo: {
name: 'Congo',
flag: '🇨🇬',
colors: {
primary: '#009543', // Green
primaryLight: '#00A862',
primaryDark: '#006B3F',
primarySubtle: '#E6F5ED',
accent: '#FCD116', // Yellow
accentLight: '#FDE68A',
accentDark: '#F59E0B',
accentSubtle: '#FFFBEB',
secondary: '#CE1126', // Red
secondaryLight: '#E63946',
secondaryDark: '#A91D2A',
secondarySubtle: '#F8E8EA',
primaryBlue: '#009543',
primaryBlueLight: '#00A862',
primaryBlueDark: '#006B3F',
secondaryBlue: '#E6F5ED',
success: '#009543',
warning: '#FCD116',
error: '#CE1126',
info: '#009543',
textPrimary: '#009543',
textSecondary: '#374151',
borderColor: '#CE1126',
cardBackground: '#FFFFFF',
},
background: {
type: 'gradient',
gradient: createFlagGradient('#009543', '#FCD116', '#CE1126', undefined, '90deg'),
overlay: createOverlay('#009543', '#FCD116', '#CE1126', 0.75),
},
},
// Central African Republic - Blue, White, Green, Yellow, Red
'central-african-republic': {
name: 'Central African Republic',
flag: '🇨🇫',
colors: {
primary: '#003082', // Blue
primaryLight: '#1E40AF',
primaryDark: '#1E3A8A',
primarySubtle: '#DBEAFE',
accent: '#FCD116', // Yellow
accentLight: '#FDE68A',
accentDark: '#F59E0B',
accentSubtle: '#FFFBEB',
secondary: '#FFFFFF', // White
secondaryLight: '#FFFFFF',
secondaryDark: '#F3F4F6',
secondarySubtle: '#F9FAFB',
tertiary: '#009639', // Green
tertiaryLight: '#00A862',
tertiaryDark: '#006B3F',
primaryBlue: '#003082',
primaryBlueLight: '#1E40AF',
primaryBlueDark: '#1E3A8A',
secondaryBlue: '#DBEAFE',
success: '#009639',
warning: '#FCD116',
error: '#DC2626',
info: '#003082',
textPrimary: '#003082',
textSecondary: '#374151',
borderColor: '#FCD116',
cardBackground: '#FFFFFF',
},
background: {
type: 'gradient',
gradient: createFlagGradient('#003082', '#FCD116', '#FFFFFF', '#009639', '90deg'),
overlay: createOverlay('#003082', '#FCD116', '#009639', 0.75),
},
},
// Chad - Blue, Yellow, Red
chad: {
name: 'Chad',
flag: '🇹🇩',
colors: {
primary: '#002664', // Blue
primaryLight: '#1E40AF',
primaryDark: '#1E3A8A',
primarySubtle: '#DBEAFE',
accent: '#FCD116', // Yellow
accentLight: '#FDE68A',
accentDark: '#F59E0B',
accentSubtle: '#FFFBEB',
secondary: '#CE1126', // Red
secondaryLight: '#E63946',
secondaryDark: '#A91D2A',
secondarySubtle: '#F8E8EA',
primaryBlue: '#002664',
primaryBlueLight: '#1E40AF',
primaryBlueDark: '#1E3A8A',
secondaryBlue: '#DBEAFE',
success: '#006B3F',
warning: '#FCD116',
error: '#CE1126',
info: '#002664',
textPrimary: '#002664',
textSecondary: '#374151',
borderColor: '#CE1126',
cardBackground: '#FFFFFF',
},
background: {
type: 'gradient',
gradient: createFlagGradient('#002664', '#FCD116', '#CE1126', undefined, '90deg'),
overlay: createOverlay('#002664', '#FCD116', '#CE1126', 0.75),
},
},
// São Tomé and Príncipe - Green, Yellow, Red
'sao-tome-and-principe': {
name: 'São Tomé and Príncipe',
flag: '🇸🇹',
colors: {
primary: '#12AD2B', // Green
primaryLight: '#00A862',
primaryDark: '#006B3F',
primarySubtle: '#E6F5ED',
accent: '#FCD116', // Yellow
accentLight: '#FDE68A',
accentDark: '#F59E0B',
accentSubtle: '#FFFBEB',
secondary: '#CE1126', // Red
secondaryLight: '#E63946',
secondaryDark: '#A91D2A',
secondarySubtle: '#F8E8EA',
primaryBlue: '#12AD2B',
primaryBlueLight: '#00A862',
primaryBlueDark: '#006B3F',
secondaryBlue: '#E6F5ED',
success: '#12AD2B',
warning: '#FCD116',
error: '#CE1126',
info: '#12AD2B',
textPrimary: '#12AD2B',
textSecondary: '#374151',
borderColor: '#CE1126',
cardBackground: '#FFFFFF',
},
background: {
type: 'gradient',
gradient: createFlagGradient('#12AD2B', '#FCD116', '#CE1126', undefined, '90deg'),
overlay: createOverlay('#12AD2B', '#FCD116', '#CE1126', 0.75),
},
},
// Kenya - Black, Red, Green with white stripes
kenya: {
name: 'Kenya',
flag: '🇰🇪',
colors: {
primary: '#000000', // Black
primaryLight: '#374151',
primaryDark: '#000000',
primarySubtle: '#F3F4F6',
accent: '#DE2910', // Red
accentLight: '#E63946',
accentDark: '#A91D2A',
accentSubtle: '#F8E8EA',
secondary: '#006600', // Green
secondaryLight: '#008751',
secondaryDark: '#004D2E',
secondarySubtle: '#E6F5ED',
tertiary: '#FFFFFF', // White stripes
tertiaryLight: '#FFFFFF',
tertiaryDark: '#F3F4F6',
primaryBlue: '#000000',
primaryBlueLight: '#374151',
primaryBlueDark: '#000000',
secondaryBlue: '#F3F4F6',
success: '#006600',
warning: '#F59E0B',
error: '#DE2910',
info: '#000000',
textPrimary: '#000000',
textSecondary: '#374151',
borderColor: '#DE2910',
cardBackground: '#FFFFFF',
},
background: {
type: 'gradient',
gradient: createFlagGradient('#000000', '#FFFFFF', '#DE2910', '#006600', '90deg'),
overlay: createOverlay('#000000', '#DE2910', '#006600', 0.75),
},
},
// Tanzania - Green, Blue, Yellow, Black diagonal
tanzania: {
name: 'Tanzania',
flag: '🇹🇿',
colors: {
primary: '#1EB53A', // Green
primaryLight: '#00A862',
primaryDark: '#006B3F',
primarySubtle: '#E6F5ED',
accent: '#00A3DD', // Blue
accentLight: '#3B82F6',
accentDark: '#1E40AF',
accentSubtle: '#DBEAFE',
secondary: '#FCD116', // Yellow
secondaryLight: '#FDE68A',
secondaryDark: '#F59E0B',
secondarySubtle: '#FFFBEB',
tertiary: '#000000', // Black diagonal
tertiaryLight: '#374151',
tertiaryDark: '#111827',
primaryBlue: '#1EB53A',
primaryBlueLight: '#00A862',
primaryBlueDark: '#006B3F',
secondaryBlue: '#E6F5ED',
success: '#1EB53A',
warning: '#FCD116',
error: '#DC2626',
info: '#00A3DD',
textPrimary: '#1EB53A',
textSecondary: '#374151',
borderColor: '#00A3DD',
cardBackground: '#FFFFFF',
},
background: {
type: 'gradient',
gradient: createFlagGradient('#1EB53A', '#00A3DD', '#FCD116', '#000000', '135deg'),
overlay: createOverlay('#1EB53A', '#00A3DD', '#FCD116', 0.70),
},
},
// Uganda - Black, Yellow, Red stripes
uganda: {
name: 'Uganda',
flag: '🇺🇬',
colors: {
primary: '#FCDD09', // Yellow
primaryLight: '#FDE68A',
primaryDark: '#F59E0B',
primarySubtle: '#FFFBEB',
accent: '#000000', // Black
accentLight: '#374151',
accentDark: '#111827',
accentSubtle: '#F3F4F6',
secondary: '#DA121A', // Red
secondaryLight: '#E63946',
secondaryDark: '#A91D2A',
secondarySubtle: '#F8E8EA',
primaryBlue: '#FCDD09',
primaryBlueLight: '#FDE68A',
primaryBlueDark: '#F59E0B',
secondaryBlue: '#FFFBEB',
success: '#006B3F',
warning: '#FCDD09',
error: '#DA121A',
info: '#FCDD09',
textPrimary: '#000000',
textSecondary: '#374151',
borderColor: '#DA121A',
cardBackground: '#FFFFFF',
},
background: {
type: 'gradient',
gradient: createFlagGradient('#000000', '#FCDD09', '#DA121A', undefined, '90deg'),
overlay: createOverlay('#000000', '#FCDD09', '#DA121A', 0.75),
},
},
// Rwanda - Blue, Yellow, Green with sun
rwanda: {
name: 'Rwanda',
flag: '🇷🇼',
colors: {
primary: '#20603D', // Green
primaryLight: '#008751',
primaryDark: '#004D2E',
primarySubtle: '#E6F5ED',
accent: '#FCD116', // Yellow
accentLight: '#FDE68A',
accentDark: '#F59E0B',
accentSubtle: '#FFFBEB',
secondary: '#00A1DE', // Blue
secondaryLight: '#3B82F6',
secondaryDark: '#1E40AF',
secondarySubtle: '#DBEAFE',
tertiary: '#FFD700', // Gold sun
tertiaryLight: '#FDE68A',
tertiaryDark: '#F59E0B',
primaryBlue: '#20603D',
primaryBlueLight: '#008751',
primaryBlueDark: '#004D2E',
secondaryBlue: '#E6F5ED',
success: '#20603D',
warning: '#FCD116',
error: '#DC2626',
info: '#00A1DE',
textPrimary: '#20603D',
textSecondary: '#374151',
borderColor: '#00A1DE',
cardBackground: '#FFFFFF',
},
background: {
type: 'gradient',
gradient: createFlagGradient('#20603D', '#FCD116', '#00A1DE', '#FFD700', '90deg'),
overlay: createOverlay('#20603D', '#FCD116', '#00A1DE', 0.70),
},
},
// Burundi - Red, White, Green with stars
burundi: {
name: 'Burundi',
flag: '🇧🇮',
colors: {
primary: '#18B637', // Green
primaryLight: '#00A862',
primaryDark: '#006B3F',
primarySubtle: '#E6F5ED',
accent: '#FFFFFF', // White
accentLight: '#FFFFFF',
accentDark: '#F3F4F6',
accentSubtle: '#F9FAFB',
secondary: '#CE1126', // Red
secondaryLight: '#E63946',
secondaryDark: '#A91D2A',
secondarySubtle: '#F8E8EA',
tertiary: '#FFD700', // Gold stars
tertiaryLight: '#FDE68A',
tertiaryDark: '#F59E0B',
primaryBlue: '#18B637',
primaryBlueLight: '#00A862',
primaryBlueDark: '#006B3F',
secondaryBlue: '#E6F5ED',
success: '#18B637',
warning: '#F59E0B',
error: '#CE1126',
info: '#18B637',
textPrimary: '#18B637',
textSecondary: '#374151',
borderColor: '#CE1126',
cardBackground: '#FFFFFF',
},
background: {
type: 'gradient',
gradient: createFlagGradient('#18B637', '#FFFFFF', '#CE1126', '#FFD700', '90deg'),
overlay: createOverlay('#18B637', '#FFFFFF', '#CE1126', 0.75),
},
},
// Ethiopia - Green, Yellow, Red with blue disc
ethiopia: {
name: 'Ethiopia',
flag: '🇪🇹',
colors: {
primary: '#078930', // Green
primaryLight: '#00A862',
primaryDark: '#006B3F',
primarySubtle: '#E6F5ED',
accent: '#DA121A', // Red
accentLight: '#E63946',
accentDark: '#A91D2A',
accentSubtle: '#F8E8EA',
secondary: '#FCDD09', // Yellow
secondaryLight: '#FDE68A',
secondaryDark: '#F59E0B',
secondarySubtle: '#FFFBEB',
tertiary: '#0033A0', // Blue disc
tertiaryLight: '#1E40AF',
tertiaryDark: '#1E3A8A',
primaryBlue: '#078930',
primaryBlueLight: '#00A862',
primaryBlueDark: '#006B3F',
secondaryBlue: '#E6F5ED',
success: '#078930',
warning: '#FCDD09',
error: '#DA121A',
info: '#0033A0',
textPrimary: '#078930',
textSecondary: '#374151',
borderColor: '#DA121A',
cardBackground: '#FFFFFF',
},
background: {
type: 'gradient',
gradient: createFlagGradient('#078930', '#FCDD09', '#DA121A', '#0033A0', '90deg'),
overlay: createOverlay('#078930', '#FCDD09', '#DA121A', 0.75),
},
},
// Eritrea - Green, Red, Blue triangle
eritrea: {
name: 'Eritrea',
flag: '🇪🇷',
colors: {
primary: '#3E9A00', // Green
primaryLight: '#00A862',
primaryDark: '#006B3F',
primarySubtle: '#E6F5ED',
accent: '#CE1126', // Red
accentLight: '#E63946',
accentDark: '#A91D2A',
accentSubtle: '#F8E8EA',
secondary: '#4189DD', // Blue
secondaryLight: '#60A5FA',
secondaryDark: '#2563EB',
secondarySubtle: '#DBEAFE',
tertiary: '#FFD700', // Gold wreath
tertiaryLight: '#FDE68A',
tertiaryDark: '#F59E0B',
primaryBlue: '#3E9A00',
primaryBlueLight: '#00A862',
primaryBlueDark: '#006B3F',
secondaryBlue: '#E6F5ED',
success: '#3E9A00',
warning: '#F59E0B',
error: '#CE1126',
info: '#4189DD',
textPrimary: '#3E9A00',
textSecondary: '#374151',
borderColor: '#CE1126',
cardBackground: '#FFFFFF',
},
background: {
type: 'gradient',
gradient: createFlagGradient('#3E9A00', '#CE1126', '#4189DD', '#FFD700', '135deg'),
overlay: createOverlay('#3E9A00', '#CE1126', '#4189DD', 0.70),
},
},
// Djibouti - Blue, Green, White triangle
djibouti: {
name: 'Djibouti',
flag: '🇩🇯',
colors: {
primary: '#6AB2E7', // Light Blue
primaryLight: '#93C5FD',
primaryDark: '#3B82F6',
primarySubtle: '#DBEAFE',
accent: '#12AD2B', // Green
accentLight: '#00A862',
accentDark: '#006B3F',
accentSubtle: '#E6F5ED',
secondary: '#FFFFFF', // White
secondaryLight: '#FFFFFF',
secondaryDark: '#F3F4F6',
secondarySubtle: '#F9FAFB',
tertiary: '#CE1126', // Red star
tertiaryLight: '#E63946',
tertiaryDark: '#A91D2A',
primaryBlue: '#6AB2E7',
primaryBlueLight: '#93C5FD',
primaryBlueDark: '#3B82F6',
secondaryBlue: '#DBEAFE',
success: '#12AD2B',
warning: '#F59E0B',
error: '#DC2626',
info: '#6AB2E7',
textPrimary: '#1E3A8A',
textSecondary: '#374151',
borderColor: '#12AD2B',
cardBackground: '#FFFFFF',
},
background: {
type: 'gradient',
gradient: createFlagGradient('#6AB2E7', '#12AD2B', '#FFFFFF', '#CE1126', '135deg'),
overlay: createOverlay('#6AB2E7', '#12AD2B', '#FFFFFF', 0.75),
},
},
// Somalia - Light Blue with white star
somalia: {
name: 'Somalia',
flag: '🇸🇴',
colors: {
primary: '#4189DD', // Light Blue
primaryLight: '#60A5FA',
primaryDark: '#2563EB',
primarySubtle: '#DBEAFE',
accent: '#FFFFFF', // White star
accentLight: '#FFFFFF',
accentDark: '#F3F4F6',
accentSubtle: '#F9FAFB',
secondary: '#4189DD', // Same as primary
secondaryLight: '#60A5FA',
secondaryDark: '#2563EB',
secondarySubtle: '#DBEAFE',
primaryBlue: '#4189DD',
primaryBlueLight: '#60A5FA',
primaryBlueDark: '#2563EB',
secondaryBlue: '#DBEAFE',
success: '#006B3F',
warning: '#F59E0B',
error: '#DC2626',
info: '#4189DD',
textPrimary: '#1E3A8A',
textSecondary: '#374151',
borderColor: '#4189DD',
cardBackground: '#FFFFFF',
},
background: {
type: 'gradient',
gradient: createFlagGradient('#4189DD', '#FFFFFF', '#4189DD', undefined, 'radial-gradient(circle, #FFFFFF 0%, #4189DD 100%)'),
overlay: createOverlay('#4189DD', '#FFFFFF', undefined, 0.80),
},
},
// South Sudan - Black, Red, Green, Blue, Yellow
'south-sudan': {
name: 'South Sudan',
flag: '🇸🇸',
colors: {
primary: '#078930', // Green
primaryLight: '#00A862',
primaryDark: '#006B3F',
primarySubtle: '#E6F5ED',
accent: '#CE1126', // Red
accentLight: '#E63946',
accentDark: '#A91D2A',
accentSubtle: '#F8E8EA',
secondary: '#000000', // Black
secondaryLight: '#374151',
secondaryDark: '#111827',
secondarySubtle: '#F3F4F6',
tertiary: '#0033A0', // Blue triangle
tertiaryLight: '#1E40AF',
tertiaryDark: '#1E3A8A',
primaryBlue: '#078930',
primaryBlueLight: '#00A862',
primaryBlueDark: '#006B3F',
secondaryBlue: '#E6F5ED',
success: '#078930',
warning: '#F59E0B',
error: '#CE1126',
info: '#0033A0',
textPrimary: '#078930',
textSecondary: '#374151',
borderColor: '#CE1126',
cardBackground: '#FFFFFF',
},
background: {
type: 'gradient',
gradient: createFlagGradient('#000000', '#FFFFFF', '#CE1126', '#078930', '90deg'),
overlay: createOverlay('#000000', '#CE1126', '#078930', 0.75),
},
},
// Madagascar - White, Red, Green
madagascar: {
name: 'Madagascar',
flag: '🇲🇬',
colors: {
primary: '#FC3D32', // Red
primaryLight: '#E63946',
primaryDark: '#A91D2A',
primarySubtle: '#F8E8EA',
accent: '#007E3A', // Green
accentLight: '#00A862',
accentDark: '#006B3F',
accentSubtle: '#E6F5ED',
secondary: '#FFFFFF', // White
secondaryLight: '#FFFFFF',
secondaryDark: '#F3F4F6',
secondarySubtle: '#F9FAFB',
primaryBlue: '#FC3D32',
primaryBlueLight: '#E63946',
primaryBlueDark: '#A91D2A',
secondaryBlue: '#F8E8EA',
success: '#007E3A',
warning: '#F59E0B',
error: '#FC3D32',
info: '#FC3D32',
textPrimary: '#FC3D32',
textSecondary: '#374151',
borderColor: '#007E3A',
cardBackground: '#FFFFFF',
},
background: {
type: 'gradient',
gradient: createFlagGradient('#FFFFFF', '#FC3D32', '#007E3A', undefined, '90deg'),
overlay: createOverlay('#FC3D32', '#007E3A', '#FFFFFF', 0.75),
},
},
// Seychelles - Blue, Yellow, Red, White, Green diagonal
seychelles: {
name: 'Seychelles',
flag: '🇸🇨',
colors: {
primary: '#003F87', // Blue
primaryLight: '#1E40AF',
primaryDark: '#1E3A8A',
primarySubtle: '#DBEAFE',
accent: '#FCD116', // Yellow
accentLight: '#FDE68A',
accentDark: '#F59E0B',
accentSubtle: '#FFFBEB',
secondary: '#CE1126', // Red
secondaryLight: '#E63946',
secondaryDark: '#A91D2A',
secondarySubtle: '#F8E8EA',
tertiary: '#FFFFFF', // White
tertiaryLight: '#FFFFFF',
tertiaryDark: '#F3F4F6',
primaryBlue: '#003F87',
primaryBlueLight: '#1E40AF',
primaryBlueDark: '#1E3A8A',
secondaryBlue: '#DBEAFE',
success: '#006B3F',
warning: '#FCD116',
error: '#CE1126',
info: '#003F87',
textPrimary: '#003F87',
textSecondary: '#374151',
borderColor: '#FCD116',
cardBackground: '#FFFFFF',
},
background: {
type: 'gradient',
gradient: createFlagGradient('#003F87', '#FCD116', '#FFFFFF', '#CE1126', '135deg'),
overlay: createOverlay('#003F87', '#FCD116', '#CE1126', 0.70),
},
},
// Comoros - Yellow, White, Red, Blue, Green
comoros: {
name: 'Comoros',
flag: '🇰🇲',
colors: {
primary: '#3A75C4', // Blue
primaryLight: '#60A5FA',
primaryDark: '#2563EB',
primarySubtle: '#DBEAFE',
accent: '#FCD116', // Yellow
accentLight: '#FDE68A',
accentDark: '#F59E0B',
accentSubtle: '#FFFBEB',
secondary: '#CE1126', // Red
secondaryLight: '#E63946',
secondaryDark: '#A91D2A',
secondarySubtle: '#F8E8EA',
tertiary: '#FFFFFF', // White
tertiaryLight: '#FFFFFF',
tertiaryDark: '#F3F4F6',
primaryBlue: '#3A75C4',
primaryBlueLight: '#60A5FA',
primaryBlueDark: '#2563EB',
secondaryBlue: '#DBEAFE',
success: '#006B3F',
warning: '#FCD116',
error: '#CE1126',
info: '#3A75C4',
textPrimary: '#3A75C4',
textSecondary: '#374151',
borderColor: '#FCD116',
cardBackground: '#FFFFFF',
},
background: {
type: 'gradient',
gradient: createFlagGradient('#3A75C4', '#FCD116', '#FFFFFF', '#CE1126', '90deg'),
overlay: createOverlay('#3A75C4', '#FCD116', '#CE1126', 0.75),
},
},
// Mauritius - Red, Blue, Yellow, Green
mauritius: {
name: 'Mauritius',
flag: '🇲🇺',
colors: {
primary: '#EA2839', // Red
primaryLight: '#E63946',
primaryDark: '#A91D2A',
primarySubtle: '#F8E8EA',
accent: '#1A206D', // Blue
accentLight: '#1E40AF',
accentDark: '#1E3A8A',
accentSubtle: '#DBEAFE',
secondary: '#FFD500', // Yellow
secondaryLight: '#FDE68A',
secondaryDark: '#F59E0B',
secondarySubtle: '#FFFBEB',
tertiary: '#00A551', // Green
tertiaryLight: '#00A862',
tertiaryDark: '#006B3F',
primaryBlue: '#EA2839',
primaryBlueLight: '#E63946',
primaryBlueDark: '#A91D2A',
secondaryBlue: '#F8E8EA',
success: '#00A551',
warning: '#FFD500',
error: '#EA2839',
info: '#1A206D',
textPrimary: '#EA2839',
textSecondary: '#374151',
borderColor: '#1A206D',
cardBackground: '#FFFFFF',
},
background: {
type: 'gradient',
gradient: createFlagGradient('#EA2839', '#1A206D', '#FFD500', '#00A551', '90deg'),
overlay: createOverlay('#EA2839', '#1A206D', '#FFD500', 0.75),
},
},
};
// Export countryThemes for use in components
export { countryThemes };
interface ThemeContextType {
currentTheme: CountryTheme;
themeConfig: CountryThemeConfig;
setTheme: (theme: CountryTheme) => void;
availableThemes: CountryTheme[];
}
const ThemeContext = createContext<ThemeContextType | undefined>(undefined);
const THEME_STORAGE_KEY = 'scc-country-theme';
export const ThemeProvider: React.FC<{ children: ReactNode }> = ({ children }) => {
const [currentTheme, setCurrentThemeState] = useState<CountryTheme>(() => {
// Load from localStorage or default to Ghana
const savedTheme = localStorage.getItem(THEME_STORAGE_KEY) as CountryTheme;
return savedTheme && savedTheme in countryThemes ? savedTheme : 'ghana';
});
const setTheme = (theme: CountryTheme) => {
setCurrentThemeState(theme);
localStorage.setItem(THEME_STORAGE_KEY, theme);
applyTheme(theme);
};
const applyTheme = (theme: CountryTheme) => {
const config = countryThemes[theme];
const root = document.documentElement;
const colors = config.colors;
const background = config.background;
// Apply comprehensive CSS variables for colors
root.style.setProperty('--primary-red', colors.primary);
root.style.setProperty('--primary-red-light', colors.primaryLight);
root.style.setProperty('--primary-red-dark', colors.primaryDark);
root.style.setProperty('--primary-red-subtle', colors.primarySubtle);
root.style.setProperty('--accent-gold', colors.accent);
root.style.setProperty('--accent-gold-light', colors.accentLight);
root.style.setProperty('--accent-gold-dark', colors.accentDark);
root.style.setProperty('--accent-gold-subtle', colors.accentSubtle);
root.style.setProperty('--secondary-green', colors.secondary);
root.style.setProperty('--secondary-green-light', colors.secondaryLight);
root.style.setProperty('--secondary-green-dark', colors.secondaryDark);
root.style.setProperty('--secondary-green-subtle', colors.secondarySubtle);
// Tertiary colors if available
if (colors.tertiary) {
root.style.setProperty('--tertiary-color', colors.tertiary);
root.style.setProperty('--tertiary-color-light', colors.tertiaryLight || colors.tertiary);
root.style.setProperty('--tertiary-color-dark', colors.tertiaryDark || colors.tertiary);
}
// Legacy aliases
root.style.setProperty('--primary-blue', colors.primaryBlue);
root.style.setProperty('--primary-blue-light', colors.primaryBlueLight);
root.style.setProperty('--primary-blue-dark', colors.primaryBlueDark);
root.style.setProperty('--secondary-blue', colors.secondaryBlue);
// Status colors
root.style.setProperty('--success', colors.success);
root.style.setProperty('--warning', colors.warning);
root.style.setProperty('--error', colors.error);
root.style.setProperty('--info', colors.info);
// Text and UI colors
root.style.setProperty('--text-primary', colors.textPrimary);
root.style.setProperty('--text-secondary', colors.textSecondary);
root.style.setProperty('--border-color', colors.borderColor);
root.style.setProperty('--card-background', colors.cardBackground);
// Apply background
// For Ghana: use image, for others: use gradient only
if (background.type === 'image' && background.image) {
// Ghana: Use the image as background on all pages
const imageUrl = `url('${background.image}')`;
root.style.setProperty('--background-image', imageUrl);
root.style.setProperty('--background-gradient', imageUrl);
} else {
// Other countries: Use gradient based on flag colors
root.style.setProperty('--background-image', 'none');
root.style.setProperty('--background-gradient', background.gradient);
}
root.style.setProperty('--background-overlay', background.overlay);
};
// Apply theme on mount and when theme changes
useEffect(() => {
applyTheme(currentTheme);
}, [currentTheme]);
// Get all available themes and sort them (Ghana first, then alphabetically)
const allThemes = Object.keys(countryThemes) as CountryTheme[];
const sortedThemes = allThemes.sort((a, b) => {
if (a === 'ghana') return -1;
if (b === 'ghana') return 1;
return countryThemes[a].name.localeCompare(countryThemes[b].name);
});
const value: ThemeContextType = {
currentTheme,
themeConfig: countryThemes[currentTheme],
setTheme,
availableThemes: sortedThemes,
};
return <ThemeContext.Provider value={value}>{children}</ThemeContext.Provider>;
};
export const useTheme = (): ThemeContextType => {
const context = useContext(ThemeContext);
if (!context) {
throw new Error('useTheme must be used within a ThemeProvider');
}
return context;
};

File Metadata

Mime Type
text/plain
Storage Engine
blob
Storage Format
Raw Data
Storage Handle
22736246
Default Alt Text
ThemeContext.tsx (49 KB)

Event Timeline

Content licensed under Creative Commons Attribution-ShareAlike (CC BY-SA) 4.0 unless otherwise noted; code licensed under GNU General Public License (GPL) 2.0 or later and other open source licenses. By using this site, you agree to the Terms of Use, Privacy Policy, and Code of Conduct. · Wikimedia Foundation · Privacy Policy · Code of Conduct · Terms of Use · Disclaimer · CC-BY-SA · GPL · Credits