From 03ee16bb87bb38384b9ed2f1b47ee6d174393666 Mon Sep 17 00:00:00 2001 From: Codex Agent Date: Thu, 22 Jan 2026 22:31:18 +0100 Subject: [PATCH] Read admin theme colors from CSS vars --- resources/js/admin/mobile/theme.ts | 24 +++++++++++++++++++----- 1 file changed, 19 insertions(+), 5 deletions(-) diff --git a/resources/js/admin/mobile/theme.ts b/resources/js/admin/mobile/theme.ts index 1b5b49e..514b892 100644 --- a/resources/js/admin/mobile/theme.ts +++ b/resources/js/admin/mobile/theme.ts @@ -98,21 +98,35 @@ function isDarkColor(color: string): boolean { export function useAdminTheme() { const theme = useTheme(); - const background = String(theme.background?.val ?? ADMIN_COLORS.surfaceMuted); + const cssValue = (name: string): string => { + if (typeof document === 'undefined') { + return ''; + } + + return getComputedStyle(document.documentElement).getPropertyValue(name).trim(); + }; + + const cssBackground = cssValue('--background'); + const cssSurface = cssValue('--surface'); + const cssMuted = cssValue('--muted'); + const cssBorder = cssValue('--borderColor'); + const cssText = cssValue('--color'); + + const background = cssBackground || String(theme.background?.val ?? ADMIN_COLORS.surfaceMuted); const isDark = isDarkColor(background); // Resolve core colors const primary = String(theme.primary?.val ?? ADMIN_COLORS.primary); - const surface = String(theme.surface?.val ?? (isDark ? '#0F1B36' : ADMIN_COLORS.surface)); - const border = String(theme.borderColor?.val ?? (isDark ? '#1F2A4A' : ADMIN_COLORS.border)); - const text = String(theme.color?.val ?? (isDark ? '#F8FAFF' : ADMIN_COLORS.text)); + const surface = cssSurface || String(theme.surface?.val ?? (isDark ? '#0F1B36' : ADMIN_COLORS.surface)); + const border = cssBorder || String(theme.borderColor?.val ?? (isDark ? '#1F2A4A' : ADMIN_COLORS.border)); + const text = cssText || String(theme.color?.val ?? (isDark ? '#F8FAFF' : ADMIN_COLORS.text)); // Muted/Subtle should NOT use theme.muted (which is a background color in Tamagui standard) // Instead, we derive them from Text with opacity or use specific palette values if available // But safer is Alpha since it works in both Light (Dark Text) and Dark (Light Text) modes. const muted = withAlpha(text, 0.65); const subtle = withAlpha(text, 0.45); - const surfaceMuted = String(theme.muted?.val ?? (isDark ? '#121F3D' : ADMIN_COLORS.surfaceMuted)); + const surfaceMuted = cssMuted || String(theme.muted?.val ?? (isDark ? '#121F3D' : ADMIN_COLORS.surfaceMuted)); const glassSurface = withAlpha(surface, isDark ? 0.90 : 0.85); const glassSurfaceStrong = withAlpha(surface, isDark ? 0.96 : 0.95);