Yuemin.Mao
36f1d9af27
- Created StatusPage component with system stats, configuration, and indexed documents overview. - Added RagChatPage component for chat functionality. - Introduced global CSS styles for light and dark themes, including utility classes and animations. - Defined TypeScript types for compliance, documents, and themes. - Configured Tailwind CSS for dynamic theming and custom animations. - Set up TypeScript configuration for app and node environments. - Initialized Vite configuration for React project.
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>
|
|
);
|
|
}; |