35 lines
1.2 KiB
TypeScript
35 lines
1.2 KiB
TypeScript
|
import React from 'react';
|
||
|
|
import { useTheme } from '../../contexts/ThemeContext';
|
||
|
|
|
||
|
|
export const ThemeToggle: React.FC = () => {
|
||
|
|
const { isDark, toggleTheme, theme } = useTheme();
|
||
|
|
|
||
|
|
return (
|
||
|
|
<button
|
||
|
|
onClick={toggleTheme}
|
||
|
|
style={{
|
||
|
|
width: 44,
|
||
|
|
height: 44,
|
||
|
|
borderRadius: 10,
|
||
|
|
background: isDark ? theme.bgHover : theme.bgCard,
|
||
|
|
border: `1px solid ${theme.border}`,
|
||
|
|
cursor: 'pointer',
|
||
|
|
display: 'flex',
|
||
|
|
alignItems: 'center',
|
||
|
|
justifyContent: 'center',
|
||
|
|
transition: 'all 0.3s ease',
|
||
|
|
}}
|
||
|
|
>
|
||
|
|
{isDark ? (
|
||
|
|
<svg width="20" height="20" viewBox="0 0 24 24" fill="none">
|
||
|
|
<circle cx="12" cy="12" r="4" fill={theme.accent}/>
|
||
|
|
<path d="M12 2V4M12 20V22M4 12H2M22 12H20M6.34 6.34L4.93 4.93M19.07 19.07L17.66 17.66M6.34 17.66L4.93 19.07M19.07 4.93L17.66 6.34" stroke={theme.accent} strokeWidth="2" strokeLinecap="round"/>
|
||
|
|
</svg>
|
||
|
|
) : (
|
||
|
|
<svg width="20" height="20" viewBox="0 0 24 24" fill="none">
|
||
|
|
<path d="M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z" fill={theme.accent} stroke={theme.accent} strokeWidth="1"/>
|
||
|
|
</svg>
|
||
|
|
)}
|
||
|
|
</button>
|
||
|
|
);
|
||
|
|
};
|