Align admin theme with Tamagui v2

resources/js/admin/mobile/__tests__/AdminTheme.test.tsx

@@ -0,0 +1,60 @@
+import React from 'react';
+import { describe, expect, it } from 'vitest';
+import { render, screen } from '@testing-library/react';
+import { TamaguiProvider, Theme } from 'tamagui';
+import { useTheme } from '@tamagui/core';
+import tamaguiConfig from '../../../../../tamagui.config';
+import { useAdminTheme } from '../theme';
+
+const ThemeProbe = () => {
+  const adminTheme = useAdminTheme();
+  const theme = useTheme();
+
+  return (
+    <div
+      data-testid="probe"
+      data-admin-bg={adminTheme.background}
+      data-theme-bg={String(theme.background?.val ?? '')}
+      data-admin-text={adminTheme.text}
+      data-theme-text={String(theme.color?.val ?? '')}
+    />
+  );
+};
+
+const renderWithTheme = (name: 'light' | 'dark') =>
+  render(
+    <TamaguiProvider config={tamaguiConfig} defaultTheme={name}>
+      <Theme name={name}>
+        <ThemeProbe />
+      </Theme>
+    </TamaguiProvider>
+  );
+
+describe('useAdminTheme', () => {
+  it('tracks Tamagui theme values across light and dark modes', () => {
+    const { rerender } = renderWithTheme('light');
+    const probe = screen.getByTestId('probe');
+    const lightAdminBg = probe.getAttribute('data-admin-bg');
+    const lightThemeBg = probe.getAttribute('data-theme-bg');
+    const lightAdminText = probe.getAttribute('data-admin-text');
+    const lightThemeText = probe.getAttribute('data-theme-text');
+
+    expect(lightAdminBg).toBe(lightThemeBg);
+    expect(lightAdminText).toBe(lightThemeText);
+
+    rerender(
+      <TamaguiProvider config={tamaguiConfig} defaultTheme="dark">
+        <Theme name="dark">
+          <ThemeProbe />
+        </Theme>
+      </TamaguiProvider>
+    );
+
+    const darkProbe = screen.getByTestId('probe');
+    const darkAdminBg = darkProbe.getAttribute('data-admin-bg');
+    const darkThemeBg = darkProbe.getAttribute('data-theme-bg');
+
+    expect(darkAdminBg).toBe(darkThemeBg);
+    expect(darkAdminBg).not.toBe(lightAdminBg);
+  });
+});