ThemeSwitcher.tsx
Fauwaz (Fauwaz)
Actions

Authored By

	Fauwaz
	Dec 15 2025, 5:28 PM

Size

2 KB

Referenced Files

None

Subscribers

None

ThemeSwitcher.tsx
View Options

	import React, { useState, useRef, useEffect } from 'react';
	import { useTheme, countryThemes, CountryTheme } from '../contexts/ThemeContext';
	import '../styles/ThemeSwitcher.css';

	const ThemeSwitcher: React.FC = () => {
	const { currentTheme, themeConfig, setTheme, availableThemes } = useTheme();
	const [isOpen, setIsOpen] = useState(false);
	const dropdownRef = useRef<HTMLDivElement>(null);

	// Close dropdown when clicking outside
	useEffect(() => {
	const handleClickOutside = (event: MouseEvent) => {
	if (dropdownRef.current && !dropdownRef.current.contains(event.target as Node)) {
	setIsOpen(false);
	}
	};

	document.addEventListener('mousedown', handleClickOutside);
	return () => {
	document.removeEventListener('mousedown', handleClickOutside);
	};
	}, []);

	const handleThemeSelect = (theme: CountryTheme) => {
	setTheme(theme);
	setIsOpen(false);
	};

	return (
	<div className="theme-switcher" ref={dropdownRef}>
	<button
	className="theme-switcher-button"
	onClick={() => setIsOpen(!isOpen)}
	aria-label="Change country theme"
	aria-expanded={isOpen}
	>
	<span className="theme-flag">{themeConfig.flag}</span>
	<span className="theme-name">{themeConfig.name}</span>
	<span className={`theme-arrow ${isOpen ? 'open' : ''}`}>▼</span>
	</button>

	{isOpen && (
	<div className="theme-dropdown">
	{availableThemes.map((theme) => {
	const configForTheme = countryThemes[theme];

	return (
	<button
	key={theme}
	className={`theme-option ${currentTheme === theme ? 'active' : ''}`}
	onClick={() => handleThemeSelect(theme)}
	>
	<span className="theme-flag">{configForTheme.flag}</span>
	<span className="theme-name">{configForTheme.name}</span>
	{currentTheme === theme && <span className="theme-check">✓</span>}
	</button>
	);
	})}
	</div>
	)}
	</div>
	);
	};

	export default ThemeSwitcher;

File Metadata

Mime Type: text/plain
Storage Engine: blob
Storage Format: Raw Data
Storage Handle: 22736247
Default Alt Text: ThemeSwitcher.tsx (2 KB)

ThemeSwitcher.tsxFauwaz (Fauwaz)Actions

ThemeSwitcher.tsxView Options

File Metadata

Event Timeline

ThemeSwitcher.tsx
Fauwaz (Fauwaz)
Actions

ThemeSwitcher.tsx
View Options