heagbokat
ae01ebdeea
- Navbar: remove theme switcher, clean nav icons (no text labels), active state is accent dot underline + icon color — no pill bg - useTheme: drop 'system' from stored type; first visit = auto by system preference, stays unset until user explicitly clicks - ThemeBubble: fixed bottom-right pill with Sun/Moon icon + label, hover lift, click toggles light ↔ dark and persists to localStorage - App.tsx: render ThemeBubble inside ThemeProvider Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
32 lines
1.2 KiB
TypeScript
32 lines
1.2 KiB
TypeScript
import { Sun, Moon } from 'lucide-react';
|
||
import { useTheme } from '@/hooks/useTheme';
|
||
|
||
export default function ThemeBubble() {
|
||
const { resolvedTheme, setTheme } = useTheme();
|
||
const isDark = resolvedTheme === 'dark';
|
||
|
||
return (
|
||
<button
|
||
onClick={() => setTheme(isDark ? 'light' : 'dark')}
|
||
title={isDark ? 'Светлая тема' : 'Тёмная тема'}
|
||
aria-label="Переключить тему"
|
||
className={[
|
||
'fixed bottom-5 right-5 z-40',
|
||
'flex items-center gap-2 h-10 px-3.5 rounded-full',
|
||
'border border-[var(--border)]',
|
||
'bg-[var(--surface)] shadow-[0_4px_20px_rgba(0,0,0,0.18)]',
|
||
'text-[var(--fg-secondary)] text-xs font-semibold',
|
||
'transition-all duration-200 ease-out',
|
||
'hover:shadow-[0_6px_24px_rgba(0,0,0,0.25)] hover:-translate-y-0.5',
|
||
'active:scale-95 active:translate-y-0',
|
||
'select-none cursor-pointer backdrop-blur-sm',
|
||
].join(' ')}
|
||
>
|
||
{isDark
|
||
? <><Sun className="h-4 w-4 text-amber-400" strokeWidth={1.8} /><span className="hidden sm:inline">Светлая</span></>
|
||
: <><Moon className="h-4 w-4 text-indigo-400" strokeWidth={1.8} /><span className="hidden sm:inline">Тёмная</span></>
|
||
}
|
||
</button>
|
||
);
|
||
}
|