diff --git a/parfum-shop/src/App.css b/parfum-shop/src/App.css index b128901..fd25b17 100644 --- a/parfum-shop/src/App.css +++ b/parfum-shop/src/App.css @@ -10,6 +10,52 @@ body, font-family: "Questrial", Arial, Helvetica, sans-serif; } -body { - background: #efefef; +#root { + background: var(--theme-bg); + color: var(--theme-text); +} + +body { + background: var(--theme-bg); +} + +.navbar--light .nav-pill, +.navbar--light .nav-link, +[class*="-page"], +[class*="-shell"], +[class*="-card"], +[class*="-panel"], +[class*="-box"], +button, +input, +textarea { + transition: background-color 0.24s ease, border-color 0.24s ease, color 0.24s ease; +} + +body.theme-dark .navbar--light .nav-pill { + background: rgba(38, 38, 38, 0.88); + border-color: rgba(234, 234, 234, 0.26); +} + +body.theme-dark .navbar--light .nav-link { + color: var(--theme-white); +} + +body.theme-dark .navbar--light .nav-link:hover, +body.theme-dark .navbar--light .nav-link.active { + background: rgba(234, 234, 234, 0.15); +} + +body.theme-dark .navbar--light .nav-theme-switch__track { + border-color: rgba(234, 234, 234, 0.3); + background: rgba(234, 234, 234, 0.14); +} + +body.theme-dark .navbar--light .nav-brand-logo { + filter: invert(1) brightness(1.08); +} + +body.theme-light .navbar--light .nav-link:hover, +body.theme-light .navbar--light .nav-link.active { + background: var(--theme-surface-soft); } diff --git a/parfum-shop/src/App.jsx b/parfum-shop/src/App.jsx index a1b763c..e9d27f7 100644 --- a/parfum-shop/src/App.jsx +++ b/parfum-shop/src/App.jsx @@ -1,4 +1,4 @@ -import { useRef } from "react"; +import { useEffect, useRef, useState } from "react"; import { Routes, Route, useLocation } from "react-router"; import LandingPage from "./pages/LandingPage"; import ProductDetailPage from "./components/ProductDetailPage"; @@ -14,38 +14,66 @@ import ScrollToTop from "./components/ScrollToTop"; import ShopDrawer from "./components/ShopDrawer"; import CartToast from "./components/CartToast"; import useScrollTextReveal from "./hooks/useScrollTextReveal"; +import { ThemeProvider } from "./theme/ThemeContext"; import "./style/textReveal.css"; +const THEME_STORAGE_KEY = "atmos-theme"; + function App() { const location = useLocation(); const routeContentRef = useRef(null); + const [theme, setTheme] = useState(() => { + if (typeof window === "undefined") return "dark"; + const storedTheme = window.localStorage.getItem(THEME_STORAGE_KEY); + return storedTheme === "light" ? "light" : "dark"; + }); const shouldFlushFooter = location.pathname === "/" || location.pathname.startsWith("/duft/"); useScrollTextReveal(routeContentRef, [location.pathname]); + useEffect(() => { + if (typeof document === "undefined") return; + + document.body.classList.remove("theme-dark", "theme-light"); + document.body.classList.add(theme === "light" ? "theme-light" : "theme-dark"); + document.documentElement.style.colorScheme = theme === "light" ? "light" : "dark"; + + if (typeof window !== "undefined") { + window.localStorage.setItem(THEME_STORAGE_KEY, theme); + } + }, [theme]); + + const toggleTheme = () => { + setTheme((currentTheme) => (currentTheme === "dark" ? "light" : "dark")); + }; + + const isLight = theme === "light"; + return ( - <> - + + <> + -
- - } /> - } /> - } /> - } /> - } /> - } /> - } /> - } /> - -
+
+ + } /> + } /> + } /> + } /> + } /> + } /> + } /> + } /> + +
- - -