blessing-skin-server/resources/assets/src/components/DarkModeButton.tsx
2024-03-05 10:28:07 +08:00

28 lines
608 B
TypeScript

import {useState} from 'react';
import * as fetch from '@/scripts/net';
type Properties = {
readonly initMode: boolean;
};
const DarkModeButton: React.FC<Properties> = ({initMode}) => {
const [darkMode, setDarkMode] = useState(initMode);
const icon = darkMode ? 'moon' : 'sun';
const handleClick = async () => {
setDarkMode(value => !value);
await fetch.put('/user/dark-mode');
document.body.classList.toggle('dark-mode');
};
return (
<a className='nav-link' href='#' role='button' onClick={handleClick}>
<i className={`fas fa-${icon}`}/>
</a>
);
};
export default DarkModeButton;