frontend_nyla/src/App.tsx

55 lines
No EOL
2.1 KiB
TypeScript

import { BrowserRouter as Router, Routes, Route } from 'react-router-dom';
import { useEffect } from 'react';
// Import global CSS reset first
import './index.css';
import Login from './pages/Login';
import Register from './pages/Register';
import { AuthProvider } from './auth/authProvider';
import { ProtectedRoute } from './auth/ProtectedRoute';
import { LanguageProvider } from './contexts/LanguageContext';
import Home from './pages/Home/Home';
// Import the global light theme CSS variables as default
import './assets/styles/light.css';
function App() {
// Load saved theme preference on app mount
useEffect(() => {
const savedTheme = localStorage.getItem('theme');
const prefersDark = savedTheme === 'dark' || (!savedTheme && window.matchMedia('(prefers-color-scheme: dark)').matches);
if (prefersDark) {
document.documentElement.classList.add('dark-theme');
document.documentElement.classList.remove('light-theme');
} else {
document.documentElement.classList.add('light-theme');
document.documentElement.classList.remove('dark-theme');
}
document.documentElement.setAttribute('data-theme', prefersDark ? 'dark' : 'light');
}, []);
return (
<LanguageProvider>
<AuthProvider>
<Router>
<Routes>
{/* Public route */}
<Route path="/login" element={<Login />} />
<Route path="/register" element={<Register />} />
<Route path="/" element={
<ProtectedRoute>
<Home />
</ProtectedRoute>
}>
{/* All page routing is now handled by the Page Loader in Home.tsx */}
<Route path="*" element={null} />
</Route>
</Routes>
</Router>
</AuthProvider>
</LanguageProvider>
);
}
export default App;