diff --git a/components/topbar/app-topbar.tsx b/components/topbar/app-topbar.tsx
index 54c0073..f9058b4 100644
--- a/components/topbar/app-topbar.tsx
+++ b/components/topbar/app-topbar.tsx
@@ -29,7 +29,7 @@ export function AppTopbar({
 	notificationsSnapshot,
 }: AppTopbarProps) {
 	return (
-		<header className="fixed top-0 left-0 right-0 z-50 bg-primary shadow-md h-14 shrink-0 flex items-center">
+		<header className="fixed top-0 left-0 right-0 z-50 bg-primary h-14 shrink-0 flex items-center shadow-md">
 			<div className="w-full max-w-8xl mx-auto px-4 flex items-center gap-3 h-full">
 				{/* Logo */}
 				<Link
@@ -49,7 +49,7 @@ export function AppTopbar({
 						alt="OpenMonetis"
 						width={90}
 						height={28}
-						className="object-contain invert hidden sm:block"
+						className="object-contain dark:invert hidden sm:block"
 						priority
 					/>
 				</Link>
@@ -57,22 +57,8 @@ export function AppTopbar({
 				{/* Navigation */}
 				<TopNavMenu preLancamentosCount={preLancamentosCount} />
 
-				{/* Right-side actions — CSS vars overridden so icons render light on primary bg */}
-				<div
-					className="ml-auto flex items-center gap-1"
-					style={
-						{
-							"--foreground": "var(--primary-foreground)",
-							"--muted-foreground":
-								"color-mix(in oklch, var(--primary-foreground) 70%, transparent)",
-							"--accent":
-								"color-mix(in oklch, var(--primary-foreground) 15%, transparent)",
-							"--accent-foreground": "var(--primary-foreground)",
-							"--border":
-								"color-mix(in oklch, var(--primary-foreground) 30%, transparent)",
-						} as React.CSSProperties
-					}
-				>
+				{/* Right-side actions */}
+				<div className="ml-auto flex items-center gap-1">
 					<NotificationBell
 						notifications={notificationsSnapshot.notifications}
 						totalCount={notificationsSnapshot.totalCount}
@@ -83,12 +69,12 @@ export function AppTopbar({
 					<AnimatedThemeToggler />
 					<span
 						aria-hidden
-						className="h-5 w-px bg-primary-foreground/30 mx-1 hidden sm:block"
+						className="h-5 w-px bg-foreground/20 mx-1 hidden sm:block"
 					/>
 					<FeedbackDialog />
 				</div>
 
-				{/* User avatar — outside the var-override div so dropdown stays normal */}
+				{/* User avatar */}
 				<TopbarUser user={user} pagadorAvatarUrl={pagadorAvatarUrl} />
 			</div>
 		</header>
diff --git a/components/topbar/top-nav-menu.tsx b/components/topbar/top-nav-menu.tsx
index ecd3e0e..14d3a44 100644
--- a/components/topbar/top-nav-menu.tsx
+++ b/components/topbar/top-nav-menu.tsx
@@ -41,7 +41,7 @@ type TopNavMenuProps = {
 };
 
 const triggerClass =
-	"!bg-transparent !text-primary-foreground/90 hover:!bg-primary-foreground/15 hover:!text-primary-foreground focus:!bg-primary-foreground/15 focus:!text-primary-foreground data-[state=open]:!bg-primary-foreground/20 data-[state=open]:!text-primary-foreground";
+	"!bg-transparent !text-foreground/80 hover:!bg-foreground/10 hover:!text-foreground focus:!bg-foreground/10 focus:!text-foreground data-[state=open]:!bg-foreground/10 data-[state=open]:!text-foreground";
 
 function SimpleNavLink({
 	href,
@@ -61,8 +61,8 @@ function SimpleNavLink({
 			href={href}
 			className={cn(
 				"inline-flex h-9 items-center justify-center rounded-md px-4 py-2 text-sm font-medium transition-colors",
-				"text-primary-foreground/90 hover:text-primary-foreground hover:bg-primary-foreground/15",
-				isActive && "bg-primary-foreground/20 text-primary-foreground",
+				"text-foreground/80 hover:text-foreground hover:bg-foreground/10",
+				isActive && "bg-foreground/10 text-foreground",
 			)}
 		>
 			{children}
@@ -128,7 +128,7 @@ function MobileNavLink({
 			onClick={onClick}
 			className={cn(
 				"flex items-center gap-3 rounded-md px-3 py-2 text-sm transition-colors",
-				"text-foreground hover:bg-accent",
+				"text-card-foreground hover:bg-accent",
 				isActive && "bg-accent font-medium",
 			)}
 		>
@@ -268,7 +268,7 @@ export function TopNavMenu({ preLancamentosCount = 0 }: TopNavMenuProps) {
 					<Button
 						variant="ghost"
 						size="icon"
-						className="md:hidden text-primary-foreground hover:bg-primary-foreground/15 hover:text-primary-foreground"
+						className="md:hidden text-foreground hover:bg-foreground/10 hover:text-foreground"
 					>
 						<RiMenuLine className="size-5" />
 						<span className="sr-only">Abrir menu</span>
diff --git a/components/topbar/topbar-user.tsx b/components/topbar/topbar-user.tsx
index 6e988f8..0c39b46 100644
--- a/components/topbar/topbar-user.tsx
+++ b/components/topbar/topbar-user.tsx
@@ -36,7 +36,7 @@ export function TopbarUser({ user, pagadorAvatarUrl }: TopbarUserProps) {
 			<DropdownMenuTrigger asChild>
 				<button
 					type="button"
-					className="flex items-center rounded-full ring-2 ring-primary-foreground/40 hover:ring-primary-foreground/80 transition-all focus-visible:outline-none focus-visible:ring-primary-foreground"
+					className="flex items-center rounded-full ring-2 ring-foreground/30 hover:ring-foreground/60 transition-all focus-visible:outline-none focus-visible:ring-foreground"
 				>
 					<Image
 						src={avatarSrc}