feat: add language switch button and optimize theme visuals
- Add LanguageSwitch component to all 4 theme layouts (starter/default/dark/minimal) - Import Noto Sans SC for proper Chinese font rendering - Fix theme flash on refresh by blocking render until site info loads - Optimize default theme: violet/blue/cyan palette, SVG icons instead of emoji - Optimize dark theme: unified emerald accent, reduced particle count, backdrop-blur - Add Tailwind safelist for dark theme dynamic class names - Prioritize localStorage in i18n detection so manual language choice persists Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
1 parent
9a18cf2215
commit
662685cc97
43 files changed
+420
-316
No files matched your search
@@ -0,0 +1,25 @@
|
||||
import { useTranslation } from 'react-i18next';
|
||||
|
||||
export default function LanguageSwitch({ className = '' }) {
|
||||
const { i18n } = useTranslation();
|
||||
const isZh = i18n.language?.startsWith('zh');
|
||||
|
||||
const toggle = () => {
|
||||
i18n.changeLanguage(isZh ? 'en' : 'zh');
|
||||
};
|
||||
|
||||
return (
|
||||
<button
|
||||
onClick={toggle}
|
||||
className={`flex items-center gap-1.5 px-2.5 py-1 rounded-md text-xs transition-colors ${className}`}
|
||||
aria-label="Switch language"
|
||||
>
|
||||
<svg className="w-3.5 h-3.5" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth={1.5}>
|
||||
<path strokeLinecap="round" strokeLinejoin="round" d="M12 21a9 9 0 1 0 0-18 9 9 0 0 0 0 18Z" />
|
||||
<path strokeLinecap="round" strokeLinejoin="round" d="M3.6 9h16.8M3.6 15h16.8" />
|
||||
<path strokeLinecap="round" strokeLinejoin="round" d="M12 3a15.3 15.3 0 0 1 4 9 15.3 15.3 0 0 1-4 9 15.3 15.3 0 0 1-4-9 15.3 15.3 0 0 1 4-9Z" />
|
||||
</svg>
|
||||
<span>{isZh ? 'EN' : '中文'}</span>
|
||||
</button>
|
||||
);
|
||||
}
|
||||
Reference in new issue
Block a user