42 lines
1.1 KiB
TypeScript
42 lines
1.1 KiB
TypeScript
import './App.css';
|
|
import MultiHintGame from './components/MultiHintGame';
|
|
import { useEffect, useState } from 'react';
|
|
|
|
function App() {
|
|
const [darkMode, setDarkMode] = useState(() => {
|
|
// Optional: prüfe bevorzugtes System-Theme
|
|
return window.matchMedia('(prefers-color-scheme: dark)').matches;
|
|
});
|
|
|
|
useEffect(() => {
|
|
if (darkMode) {
|
|
document.documentElement.classList.add('dark');
|
|
} else {
|
|
document.documentElement.classList.remove('dark');
|
|
}
|
|
}, [darkMode]);
|
|
|
|
const toggleDarkMode = () => {
|
|
setDarkMode(!darkMode);
|
|
};
|
|
|
|
return (
|
|
<div className="min-h-screen w-full bg-gray-50 dark:bg-gray-900 text-gray-900 dark:text-white">
|
|
<div className="absolute top-4 right-4">
|
|
<button
|
|
onClick={toggleDarkMode}
|
|
className="bg-gray-200 dark:bg-gray-700 text-sm px-3 py-1 rounded hover:scale-105 transition"
|
|
>
|
|
{darkMode ? '☀️ Light' : '🌙 Dark'}
|
|
</button>
|
|
</div>
|
|
|
|
<div className="flex flex-col items-center justify-start pt-10">
|
|
<MultiHintGame />
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
export default App;
|