From 580db6afe95d19c4edbd7b7e2803d1c9c33f1097 Mon Sep 17 00:00:00 2001 From: Theis Gaedigk Date: Thu, 9 Jul 2026 14:27:43 +0200 Subject: [PATCH] feat: implement dark mode and add custom color palette (theme) --- frontend/src/App.tsx | 8 +- frontend/src/components/LoginCard.tsx | 48 +++- frontend/src/components/NotFound.tsx | 5 +- frontend/src/components/Sidebar.tsx | 69 ++++- frontend/src/components/StorageRow.tsx | 26 +- .../src/components/modals/AddStorageModal.tsx | 35 ++- .../components/modals/ChangePasswordModal.tsx | 50 ++-- frontend/src/pages/AddProduct.tsx | 126 +++++++-- frontend/src/pages/Inventory.tsx | 45 ++- frontend/src/pages/ProductQuickView.tsx | 141 +++++++--- frontend/src/pages/Settings.tsx | 89 ++++-- frontend/src/pages/Storages.tsx | 42 ++- frontend/src/pages/ViewProduct.tsx | 148 +++++++--- frontend/src/routes/app/_hiddenLayout.tsx | 7 +- frontend/src/theme.ts | 265 ++++++++++++++++++ 15 files changed, 923 insertions(+), 181 deletions(-) create mode 100644 frontend/src/theme.ts diff --git a/frontend/src/App.tsx b/frontend/src/App.tsx index 28d490a..6b9eef0 100644 --- a/frontend/src/App.tsx +++ b/frontend/src/App.tsx @@ -2,6 +2,8 @@ import { createRouter, RouterProvider } from "@tanstack/react-router"; import "./App.css"; import { routeTree } from "./routeTree.gen"; import { NotFound } from "./components/NotFound.tsx"; +import { CssVarsProvider } from "@mui/joy"; +import { theme } from "./theme.ts"; const router = createRouter({ routeTree, defaultNotFoundComponent: NotFound }); @@ -12,7 +14,11 @@ declare module "@tanstack/react-router" { } function App() { - return ; + return ( + + + + ); } export default App; diff --git a/frontend/src/components/LoginCard.tsx b/frontend/src/components/LoginCard.tsx index b5aae61..7b5e5f9 100644 --- a/frontend/src/components/LoginCard.tsx +++ b/frontend/src/components/LoginCard.tsx @@ -68,14 +68,34 @@ export const LoginCard = () => { }); return ( -
+
-
+
-

+

Stockhome

-

+

{t("login")}

@@ -101,7 +121,11 @@ export const LoginCard = () => { placeholder={t("username")} variant="outlined" size="lg" - className="rounded-2xl bg-white/90 shadow-[0_10px_24px_rgba(15,23,42,0.08)]" + className="rounded-2xl" + sx={{ + bgcolor: "var(--joy-palette-background-surface)", + boxShadow: "0 10px 24px var(--joy-palette-divider)", + }} /> )} @@ -114,7 +138,11 @@ export const LoginCard = () => { placeholder={t("password")} variant="outlined" size="lg" - className="rounded-2xl bg-white/90 shadow-[0_10px_24px_rgba(15,23,42,0.08)]" + className="rounded-2xl" + sx={{ + bgcolor: "var(--joy-palette-background-surface)", + boxShadow: "0 10px 24px var(--joy-palette-divider)", + }} /> )} @@ -122,7 +150,13 @@ export const LoginCard = () => { type="submit" loading={isPending} size="lg" - className="w-full rounded-2xl bg-[#0b6bcb] text-white shadow-[0_16px_36px_rgba(11,107,203,0.35)] transition hover:-translate-y-0.5 hover:bg-[#095aa7]" + color="primary" + variant="solid" + className="w-full rounded-2xl transition hover:-translate-y-0.5" + sx={{ + boxShadow: + "0 16px 36px color-mix(in srgb, var(--joy-palette-primary-solidBg) 35%, transparent)", + }} > {t("login")} diff --git a/frontend/src/components/NotFound.tsx b/frontend/src/components/NotFound.tsx index dc0edf7..8098f35 100644 --- a/frontend/src/components/NotFound.tsx +++ b/frontend/src/components/NotFound.tsx @@ -9,7 +9,10 @@ export const NotFound = () => { {t("not-found-header")} - + {t("not-found-body")}
diff --git a/frontend/src/components/Sidebar.tsx b/frontend/src/components/Sidebar.tsx index b885e1d..78383a3 100644 --- a/frontend/src/components/Sidebar.tsx +++ b/frontend/src/components/Sidebar.tsx @@ -7,20 +7,23 @@ import StorageIcon from "@mui/icons-material/Storage"; import SettingsIcon from "@mui/icons-material/Settings"; import ExitToAppIcon from "@mui/icons-material/ExitToApp"; import TranslateIcon from "@mui/icons-material/Translate"; +import Brightness4Icon from "@mui/icons-material/Brightness4"; import MenuIcon from "@mui/icons-material/Menu"; import CloseIcon from "@mui/icons-material/Close"; import { useMatchRoute, useNavigate } from "@tanstack/react-router"; import Cookies from "js-cookie"; import { changeTranslation } from "../utils/uxFncs"; +import { useColorScheme } from "@mui/joy/styles"; export const Sidebar = () => { const { t } = useTranslation(); const navigate = useNavigate(); const matchRoute = useMatchRoute(); + const { mode, setMode } = useColorScheme(); const [isOpen, setIsOpen] = useState(false); const btnClass = - "h-11 w-full justify-start! rounded-2xl px-4 text-left text-sm font-semibold text-slate-700 transition hover:bg-white/80 hover:text-[#0b6bcb] [&_.MuiButton-startDecorator]:mr-3! [&_.MuiButton-startDecorator]:ml-0!"; + "h-11 w-full justify-start! rounded-2xl px-4 text-left text-sm font-semibold transition [&_.MuiButton-startDecorator]:mr-3! [&_.MuiButton-startDecorator]:ml-0!"; const variant = (to: string) => !!matchRoute({ to, fuzzy: false }) ? "soft" : "plain"; @@ -31,18 +34,30 @@ export const Sidebar = () => { }; return ( -