220bc92b4a
* Add lint-fix npm target * Sync eslint+plugins with backend * Add prettier * Ignore no-explicit-any lint rule for now * Silence eslint react warning * Format frontend via prettier * Lint frontend. --------- Co-authored-by: antanst <>
25 lines
742 B
TypeScript
25 lines
742 B
TypeScript
import { MoonIcon, SunIcon } from '@heroicons/react/24/solid';
|
|
import React, { useEffect, useState } from 'react';
|
|
|
|
const DarkModeToggle: React.FC = () => {
|
|
const [darkMode, setDarkMode] = useState<boolean>(() => {
|
|
return localStorage.getItem('darkMode') === 'true';
|
|
});
|
|
|
|
useEffect(() => {
|
|
document.body.classList.toggle('dark-mode', darkMode);
|
|
localStorage.setItem('darkMode', darkMode.toString());
|
|
}, [darkMode]);
|
|
|
|
return (
|
|
<button onClick={() => setDarkMode(!darkMode)}>
|
|
{darkMode ? (
|
|
<SunIcon className="h-6 w-6" />
|
|
) : (
|
|
<MoonIcon className="h-6 w-6" />
|
|
)}
|
|
</button>
|
|
);
|
|
};
|
|
|
|
export default DarkModeToggle;
|