49 lines
1.3 KiB
JavaScript
49 lines
1.3 KiB
JavaScript
import React, { useEffect, useState } from "react";
|
|
import TopBar from "./components/Layout/TopBar";
|
|
import MapView from "./components/Map/MapView";
|
|
|
|
const THEME_KEY = "sociowire:theme";
|
|
|
|
export default function App() {
|
|
const [theme, setTheme] = useState("dark");
|
|
|
|
// charge le thème au démarrage
|
|
useEffect(() => {
|
|
if (typeof window === "undefined") return;
|
|
try {
|
|
const saved = localStorage.getItem(THEME_KEY);
|
|
if (saved === "dark" || saved === "blue" || saved === "light") {
|
|
setTheme(saved);
|
|
document.body.setAttribute("data-theme", saved);
|
|
} else {
|
|
document.body.setAttribute("data-theme", "dark");
|
|
}
|
|
} catch {
|
|
document.body.setAttribute("data-theme", "dark");
|
|
}
|
|
}, []);
|
|
|
|
// applique / sauvegarde le thème
|
|
useEffect(() => {
|
|
if (typeof window === "undefined") return;
|
|
try {
|
|
document.body.setAttribute("data-theme", theme);
|
|
localStorage.setItem(THEME_KEY, theme);
|
|
} catch {
|
|
// ignore
|
|
}
|
|
}, [theme]);
|
|
|
|
return (
|
|
<div className="app-root">
|
|
<TopBar theme={theme} onChangeTheme={setTheme} />
|
|
<div className="main-shell">
|
|
<div className="map-shell">
|
|
{/* on passe le thème à la carte */}
|
|
<MapView theme={theme} />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|