diff options
Diffstat (limited to 'web/src/components/ThemeToggle.tsx')
| -rw-r--r-- | web/src/components/ThemeToggle.tsx | 32 |
1 files changed, 32 insertions, 0 deletions
diff --git a/web/src/components/ThemeToggle.tsx b/web/src/components/ThemeToggle.tsx new file mode 100644 index 0000000..1d635e9 --- /dev/null +++ b/web/src/components/ThemeToggle.tsx @@ -0,0 +1,32 @@ +import React from 'react'; +import '../styles/ThemeToggle.css'; + +interface ThemeToggleProps { + isDark: boolean; + onToggle: () => void; +} + +export const ThemeToggle: React.FC<ThemeToggleProps> = ({ isDark, onToggle }) => { + return ( + <button + className={`theme-toggle ${isDark ? 'dark' : 'light'}`} + onClick={onToggle} + aria-label={`Switch to ${isDark ? 'light' : 'dark'} theme`} + > + <div className="toggle-track"> + <div className="toggle-thumb"> + {isDark ? ( + <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2"> + <circle cx="12" cy="12" r="5" /> + <path d="M12 1v2M12 21v2M4.22 4.22l1.42 1.42M18.36 18.36l1.42 1.42M1 12h2M21 12h2M4.22 19.78l1.42-1.42M18.36 5.64l1.42-1.42" /> + </svg> + ) : ( + <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2"> + <path d="M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z" /> + </svg> + )} + </div> + </div> + </button> + ); +};
\ No newline at end of file |