mirror of
https://github.com/MaaAssistantArknights/MaaAssistantArknights.git
synced 2026-07-19 18:47:55 +08:00
3f5a7322e5
Co-authored-by: pre-commit-ci[bot] <66853113+pre-commit-ci[bot]@users.noreply.github.com>
43 lines
1.9 KiB
TypeScript
43 lines
1.9 KiB
TypeScript
import React from 'react';
|
|
import { motion } from 'framer-motion';
|
|
import { useTheme } from '@/contexts/ThemeContext';
|
|
|
|
export const ThemeToggle: React.FC = () => {
|
|
const { theme, toggleTheme } = useTheme();
|
|
|
|
return (
|
|
<motion.button
|
|
className="fixed top-4 right-4 z-50 p-2 rounded-full bg-opacity-20 backdrop-blur-sm
|
|
dark:bg-gray-800 dark:bg-opacity-30
|
|
bg-white border border-gray-200 dark:border-gray-700
|
|
text-gray-800 dark:text-white
|
|
hover:bg-opacity-30 dark:hover:bg-opacity-40 transition-all"
|
|
onClick={toggleTheme}
|
|
whileTap={{ scale: 0.95 }}
|
|
whileHover={{ scale: 1.05 }}
|
|
initial={{ opacity: 0, y: -10 }}
|
|
animate={{ opacity: 1, y: 0 }}
|
|
transition={{ duration: 0.3 }}
|
|
aria-label="change theme"
|
|
>
|
|
{theme === 'dark' ? (
|
|
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
|
|
<circle cx="12" cy="12" r="5"></circle>
|
|
<line x1="12" y1="1" x2="12" y2="3"></line>
|
|
<line x1="12" y1="21" x2="12" y2="23"></line>
|
|
<line x1="4.22" y1="4.22" x2="5.64" y2="5.64"></line>
|
|
<line x1="18.36" y1="18.36" x2="19.78" y2="19.78"></line>
|
|
<line x1="1" y1="12" x2="3" y2="12"></line>
|
|
<line x1="21" y1="12" x2="23" y2="12"></line>
|
|
<line x1="4.22" y1="19.78" x2="5.64" y2="18.36"></line>
|
|
<line x1="18.36" y1="5.64" x2="19.78" y2="4.22"></line>
|
|
</svg>
|
|
) : (
|
|
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
|
|
<path d="M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z"></path>
|
|
</svg>
|
|
)}
|
|
</motion.button>
|
|
);
|
|
};
|