Files
DefectingCat.github.io/components/DarkModeBtn.tsx
Defectink 17b341e50c Add placeholder icons
* modify article fonts
* adjust article font size
2022-05-06 09:49:05 +08:00

36 lines
880 B
TypeScript

import { useTheme } from 'next-themes';
import { useEffect, useState } from 'react';
import { FiMoon, FiSun, FiHeart } from 'react-icons/fi';
const DarkModeBtn = () => {
const [mounted, setMounted] = useState(false);
const { systemTheme, theme, setTheme } = useTheme();
// When mounted on client, now we can show the UI
useEffect(() => setMounted(true), []);
const currentTheme = theme === 'system' ? systemTheme : theme;
if (!mounted)
return (
<button>
<FiHeart className="w-5 h-5" />
</button>
);
return (
<>
{currentTheme === 'dark' ? (
<button>
<FiSun className="w-5 h-5" onClick={() => setTheme('light')} />
</button>
) : (
<button>
<FiMoon className="w-5 h-5" onClick={() => setTheme('dark')} />
</button>
)}
</>
);
};
export default DarkModeBtn;