diff --git a/apps/edr-freight-web/backoffice/index.css b/apps/edr-freight-web/backoffice/index.css index fa9eb3e3d..8e410f026 100644 --- a/apps/edr-freight-web/backoffice/index.css +++ b/apps/edr-freight-web/backoffice/index.css @@ -1,11 +1,13 @@ @import "tailwindcss"; @import "@edr/ui-common/theme.css" layer(theme); -/* The app toggles dark mode by setting the `dark` class on (see - main.tsx / FreightDashboardLayout). Without this, Tailwind v4 compiles - `dark:` utilities to `@media (prefers-color-scheme: dark)` and they follow - the OS setting instead of the in-app toggle. */ -@custom-variant dark (&:where(.dark, .dark *)); +/* The backoffice is light-only — there is no theme toggle and nothing sets the + `dark` class. This override is load-bearing: without it Tailwind v4 compiles + `dark:` utilities to `@media (prefers-color-scheme: dark)`, so every + leftover `dark:` class (the vendored IAM UI is full of them) would activate + on an OS-level dark setting. Binding the variant to a class that is never + rendered keeps those utilities inert no matter what the OS says. */ +@custom-variant dark (&:where(.edr-dark-disabled)); /* Bridge the central Mantine theme into Tailwind. freightMantineTheme (createTheme) is the single source of truth; these just alias its generated diff --git a/apps/edr-freight-web/backoffice/src/App.tsx b/apps/edr-freight-web/backoffice/src/App.tsx index 37546372d..d371c5ff3 100644 --- a/apps/edr-freight-web/backoffice/src/App.tsx +++ b/apps/edr-freight-web/backoffice/src/App.tsx @@ -144,7 +144,6 @@ const DashboardShell = () => { sidebarSections={sidebarSections} activeHref={location.pathname} onNavigate={navigate} - enableThemeToggle userName={displayName} userEmail={user?.email} onLogout={logout} diff --git a/apps/edr-freight-web/backoffice/src/components/layout/FreightDashboardHeader.tsx b/apps/edr-freight-web/backoffice/src/components/layout/FreightDashboardHeader.tsx index 2ca73f10a..0144db306 100644 --- a/apps/edr-freight-web/backoffice/src/components/layout/FreightDashboardHeader.tsx +++ b/apps/edr-freight-web/backoffice/src/components/layout/FreightDashboardHeader.tsx @@ -15,9 +15,7 @@ import { FileSignature, Languages, LogOut, - Moon, Search, - Sun, User, } from "lucide-react"; import { type ReactNode } from "react"; @@ -31,13 +29,10 @@ import type { PageMeta } from "./types"; export interface FreightDashboardHeaderProps { pageMeta: PageMeta; headerRight?: ReactNode; - enableThemeToggle?: boolean; userName?: string; userEmail?: string; userInitials?: string; onLogout?: () => void; - theme: "light" | "dark"; - onToggleTheme: () => void; mobileOpened: boolean; onToggleMobile: () => void; /** Hide the mobile burger when the shell has no sidebar to open. */ @@ -51,13 +46,10 @@ const ISLAND = const FreightDashboardHeader = ({ headerRight, - enableThemeToggle = false, userName = "User", userEmail, userInitials, onLogout, - theme, - onToggleTheme, mobileOpened, onToggleMobile, hideSidebarBurger = false, @@ -129,26 +121,6 @@ const FreightDashboardHeader = ({ - {enableThemeToggle && ( - - - {theme === "dark" ? ( - - ) : ( - - )} - - - )} - {/* Avatar pill */} diff --git a/apps/edr-freight-web/backoffice/src/components/layout/FreightDashboardLayout.tsx b/apps/edr-freight-web/backoffice/src/components/layout/FreightDashboardLayout.tsx index f3772cd76..7e6f1c523 100644 --- a/apps/edr-freight-web/backoffice/src/components/layout/FreightDashboardLayout.tsx +++ b/apps/edr-freight-web/backoffice/src/components/layout/FreightDashboardLayout.tsx @@ -1,26 +1,15 @@ import { AppShell, Box } from "@mantine/core"; import { useDisclosure } from "@mantine/hooks"; -import { type ReactNode, useEffect, useState } from "react"; +import { type ReactNode } from "react"; import FreightDashboardHeader from "./FreightDashboardHeader"; import FreightSidebar from "./FreightSidebar"; import { getPageMeta } from "./route-meta"; import type { SidebarSection } from "./types"; -type Theme = "light" | "dark"; -const THEME_STORAGE_KEY = "edr-theme"; const HEADER_HEIGHT = 64; const NAVBAR_WIDTH = 280; -function getInitialTheme(): Theme { - if (typeof window === "undefined") return "light"; - const stored = window.localStorage.getItem(THEME_STORAGE_KEY); - if (stored === "dark" || stored === "light") return stored; - return window.matchMedia?.("(prefers-color-scheme: dark)").matches - ? "dark" - : "light"; -} - export interface FreightDashboardLayoutProps { sidebarSections: SidebarSection[]; /** Render the shell with no navbar at all (used by GL clearance-only users). */ @@ -28,7 +17,6 @@ export interface FreightDashboardLayoutProps { activeHref?: string; onNavigate?: (href: string) => void; headerRight?: ReactNode; - enableThemeToggle?: boolean; userName?: string; userEmail?: string; userInitials?: string; @@ -42,7 +30,6 @@ const FreightDashboardLayout = ({ activeHref = "", onNavigate, headerRight, - enableThemeToggle = false, userName, userEmail, userInitials, @@ -53,20 +40,6 @@ const FreightDashboardLayout = ({ const [mobileOpened, { toggle: toggleMobile, close: closeMobile }] = useDisclosure(false); - const [theme, setTheme] = useState(() => - enableThemeToggle ? getInitialTheme() : "light", - ); - - useEffect(() => { - if (!enableThemeToggle) return; - const root = document.documentElement; - root.classList.toggle("dark", theme === "dark"); - window.localStorage.setItem(THEME_STORAGE_KEY, theme); - }, [theme, enableThemeToggle]); - - const toggleTheme = () => - setTheme((current) => (current === "dark" ? "light" : "dark")); - const navigate = (href: string) => { closeMobile(); onNavigate?.(href); @@ -93,13 +66,10 @@ const FreightDashboardLayout = ({ { const { pathname } = useLocation(); const { logout } = useAuthUser(); const userDetails = useUser(); - const { isDarkMode, toggleDarkMode } = useDarkMode(); const { config: tenantConfig } = useTenantConfig(); const moduleConfig = resolveModuleConfig(tenantConfig); const isAdminModuleVisible = userDetails?.roles?.some( @@ -66,7 +62,6 @@ export const TopBar = () => { moduleConfig.siteManagement && isAdminModuleVisible, ].filter(Boolean).length; const shouldShowHomePageLink = visibleModuleCount > 1; - const isObjectiveManagementRoute = pathname.startsWith("/objective-management"); const fullName = userDetails?.name?.en || t("user"); const splittedName = fullName.trim().split(" "); const initials = @@ -269,19 +264,6 @@ export const TopBar = () => { )} - -