soeren/fotospiel-app
1
0
Fork 0
Code Issues Pull Requests Actions 2 Packages Projects Releases Wiki Activity

Read admin theme colors from CSS vars
Some checks failed
linter / quality (push) Has been cancelled
Details
tests / ci (push) Has been cancelled
Details
tests / ui (push) Has been cancelled
Details

Browse Source
This commit is contained in:
Codex Agent
2026-01-22 22:31:18 +01:00
parent 1313135020
commit 03ee16bb87
1 changed files with 19 additions and 5 deletions
Download Patch File Download Diff File Expand all files Collapse all files

24
resources/js/admin/mobile/theme.ts
View File

@@ -98,21 +98,35 @@ function isDarkColor(color: string): boolean {
export function useAdminTheme() { export function useAdminTheme() {
const theme = useTheme(); 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); const isDark = isDarkColor(background);
// Resolve core colors // Resolve core colors
const primary = String(theme.primary?.val ?? ADMIN_COLORS.primary); const primary = String(theme.primary?.val ?? ADMIN_COLORS.primary);
const surface = String(theme.surface?.val ?? (isDark ? '#0F1B36' : ADMIN_COLORS.surface)); const surface = cssSurface || String(theme.surface?.val ?? (isDark ? '#0F1B36' : ADMIN_COLORS.surface));
const border = String(theme.borderColor?.val ?? (isDark ? '#1F2A4A' : ADMIN_COLORS.border)); const border = cssBorder || String(theme.borderColor?.val ?? (isDark ? '#1F2A4A' : ADMIN_COLORS.border));
const text = String(theme.color?.val ?? (isDark ? '#F8FAFF' : ADMIN_COLORS.text)); 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) // 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 // 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. // But safer is Alpha since it works in both Light (Dark Text) and Dark (Light Text) modes.
const muted = withAlpha(text, 0.65); const muted = withAlpha(text, 0.65);
const subtle = withAlpha(text, 0.45); 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 glassSurface = withAlpha(surface, isDark ? 0.90 : 0.85);
const glassSurfaceStrong = withAlpha(surface, isDark ? 0.96 : 0.95); const glassSurfaceStrong = withAlpha(surface, isDark ? 0.96 : 0.95);