Auto-detects the visitor's browser language on first visit, with a manual dropdown switcher (flag icons) in the header and mobile menu. Legal pages, the admin panel, and DB-driven content stay German-only. Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
27 lines
1.5 KiB
JavaScript
27 lines
1.5 KiB
JavaScript
import { useTheme } from '../context/ThemeContext.jsx';
|
|
import { useLanguage } from '../context/LanguageContext.jsx';
|
|
|
|
export default function ThemeToggle({ overHero = false }) {
|
|
const { theme, toggleTheme } = useTheme();
|
|
const { t } = useLanguage();
|
|
|
|
return (
|
|
<button
|
|
onClick={toggleTheme}
|
|
aria-label={t('themeToggle.label')}
|
|
className={`rounded-full p-2 transition ${
|
|
overHero ? 'text-white hover:bg-white/10' : 'text-neutral-600 hover:bg-neutral-100 dark:text-neutral-300 dark:hover:bg-neutral-800'
|
|
}`}
|
|
>
|
|
{theme === 'dark' ? (
|
|
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" className="h-5 w-5">
|
|
<path d="M12 3a1 1 0 011 1v1a1 1 0 11-2 0V4a1 1 0 011-1zm0 15a5 5 0 100-10 5 5 0 000 10zm9-6a1 1 0 010 2h-1a1 1 0 110-2h1zM4 12a1 1 0 010 2H3a1 1 0 110-2h1zm14.36-7.36a1 1 0 011.42 1.42l-.71.7a1 1 0 11-1.41-1.4l.7-.72zM5.64 18.36a1 1 0 011.41 1.41l-.7.71a1 1 0 11-1.42-1.41l.71-.71zm12.72 0l.71.7a1 1 0 11-1.41 1.42l-.71-.71a1 1 0 011.41-1.41zM6.34 5.64l-.7-.7A1 1 0 117.05 3.5l.7.71A1 1 0 016.34 5.64zM12 6a1 1 0 011-1v0a1 1 0 01-1 1zm0 12a1 1 0 011 1v1a1 1 0 11-2 0v-1a1 1 0 011-1z" />
|
|
</svg>
|
|
) : (
|
|
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" className="h-5 w-5">
|
|
<path fillRule="evenodd" d="M9.53 2.25a.75.75 0 01.19.82 8.25 8.25 0 0011.03 11.03.75.75 0 011.01.99A10.5 10.5 0 1112.9 2.1a.75.75 0 011.63-.85z" clipRule="evenodd" />
|
|
</svg>
|
|
)}
|
|
</button>
|
|
);
|
|
}
|