first commit

src/components/common/ThemeToggle.tsx

@@ -0,0 +1,35 @@
+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>
+  );
+};