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

Align admin theme with Tamagui v2
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-02-03 22:40:16 +01:00
parent 4f910b2d2a
commit 0535f63b40
7 changed files with 121 additions and 48 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -1,4 +1,4 @@
import { useTheme } from '@tamagui/core';
import { useTheme, useThemeName } from '@tamagui/core';
export const ADMIN_COLORS = {
primary: '#4F46E5', // Indigo 600
@@ -85,54 +85,40 @@ export function withAlpha(color: string, alpha: number): string {
return `rgba(${rgb.r}, ${rgb.g}, ${rgb.b}, ${alpha})`;
}
function isDarkColor(color: string): boolean {
const rgb = parseRgb(color);
if (! rgb) {
return false;
}
const luminance = (0.2126 * rgb.r + 0.7152 * rgb.g + 0.0722 * rgb.b) / 255;
return luminance < 0.5;
}
export function useAdminTheme() {
const theme = useTheme();
const themeName = useThemeName();
const themeLabel = String(themeName ?? '').toLowerCase();
const isDark = themeLabel.includes('dark') || themeLabel.includes('night');
const cssValue = (name: string): string => {
if (typeof document === 'undefined') {
return '';
const resolveThemeValue = (value: unknown, fallback: string): string => {
if (value === undefined || value === null || value === '') {
return fallback;
}
return getComputedStyle(document.documentElement).getPropertyValue(name).trim();
return String(value);
};
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 background = resolveThemeValue(theme.background?.val, ADMIN_COLORS.surfaceMuted);
// Resolve core colors
const primary = String(theme.primary?.val ?? ADMIN_COLORS.primary);
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));
const primary = resolveThemeValue(theme.primary?.val, ADMIN_COLORS.primary);
const surface = resolveThemeValue(theme.surface?.val, isDark ? '#0F1B36' : ADMIN_COLORS.surface);
const border = resolveThemeValue(theme.borderColor?.val, isDark ? '#1F2A4A' : ADMIN_COLORS.border);
const text = resolveThemeValue(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 = cssMuted || String(theme.muted?.val ?? (isDark ? '#121F3D' : ADMIN_COLORS.surfaceMuted));
const surfaceMuted = resolveThemeValue(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);
const glassBorder = withAlpha(border, 0.5);
const glassShadow = isDark ? 'rgba(0, 0, 0, 0.55)' : 'rgba(15, 23, 42, 0.08)';
const appBackground = isDark ? ADMIN_GRADIENTS.appBackgroundDark : ADMIN_GRADIENTS.appBackground;
const appBackground = `linear-gradient(180deg, ${background} 0%, ${isDark ? surface : surfaceMuted} 100%)`;
return {
theme,
@@ -147,22 +133,22 @@ export function useAdminTheme() {
muted, // Now properly derived from text color
subtle, // Now properly derived from text color
primary,
accent: String(theme.accent?.val ?? ADMIN_COLORS.accent),
accentSoft: String(theme.blue3?.val ?? ADMIN_COLORS.accentSoft),
accentStrong: String(theme.blue11?.val ?? ADMIN_COLORS.primaryStrong),
successBg: String(theme.backgroundStrong?.val ?? '#DCFCE7'),
successText: String(theme.green10?.val ?? ADMIN_COLORS.success),
dangerBg: String(theme.red3?.val ?? '#FEE2E2'),
dangerText: String(theme.red11?.val ?? ADMIN_COLORS.danger),
warningBg: String(theme.yellow3?.val ?? '#FEF3C7'),
warningBorder: String(theme.yellow6?.val ?? '#FCD34D'),
warningText: String(theme.yellow11?.val ?? ADMIN_COLORS.warning),
infoBg: String(theme.blue3?.val ?? ADMIN_COLORS.accentSoft),
infoText: String(theme.blue10?.val ?? ADMIN_COLORS.primaryStrong),
danger: String(theme.danger?.val ?? ADMIN_COLORS.danger),
backdrop: String(theme.backgroundStrong?.val ?? ADMIN_COLORS.backdrop),
overlay: withAlpha(ADMIN_COLORS.backdrop, 0.7),
shadow: String(theme.shadowColor?.val ?? 'rgba(15, 23, 42, 0.08)'),
accent: resolveThemeValue(theme.accent?.val, ADMIN_COLORS.accent),
accentSoft: resolveThemeValue(theme.blue3?.val, ADMIN_COLORS.accentSoft),
accentStrong: resolveThemeValue(theme.blue11?.val, ADMIN_COLORS.primaryStrong),
successBg: resolveThemeValue(theme.backgroundStrong?.val, '#DCFCE7'),
successText: resolveThemeValue(theme.green10?.val, ADMIN_COLORS.success),
dangerBg: resolveThemeValue(theme.red3?.val, '#FEE2E2'),
dangerText: resolveThemeValue(theme.red11?.val, ADMIN_COLORS.danger),
warningBg: resolveThemeValue(theme.yellow3?.val, '#FEF3C7'),
warningBorder: resolveThemeValue(theme.yellow6?.val, '#FCD34D'),
warningText: resolveThemeValue(theme.yellow11?.val, ADMIN_COLORS.warning),
infoBg: resolveThemeValue(theme.blue3?.val, ADMIN_COLORS.accentSoft),
infoText: resolveThemeValue(theme.blue10?.val, ADMIN_COLORS.primaryStrong),
danger: resolveThemeValue(theme.danger?.val, ADMIN_COLORS.danger),
backdrop: resolveThemeValue(theme.backgroundStrong?.val, ADMIN_COLORS.backdrop),
overlay: withAlpha(resolveThemeValue(theme.backgroundStrong?.val, ADMIN_COLORS.backdrop), 0.7),
shadow: resolveThemeValue(theme.shadowColor?.val, 'rgba(15, 23, 42, 0.08)'),
glassSurface,
glassSurfaceStrong,
glassBorder,