add some userinfo display

examples/demo/src/app/global.css

@@ -4,12 +4,12 @@
 
 
 :root {
-  --background: white;
+  --background: rgb(240, 240, 240);
   --foreground: black;
 }
 
 html:has(head > [data-stack-theme="dark"]) {
-  --background: black;
+  --background: rgb(16, 16, 18);
   --foreground: white;
 }
 

examples/demo/src/app/page-client.tsx

@@ -41,6 +41,21 @@ export default function PageClient() {
             </CardHeader>
             <CardContent>
               <Typography>Click on your user&apos;s image at the top right to see your account settings.</Typography>
+              <div className="mt-4 space-y-2">
+                <Typography className="font-medium">User Information:</Typography>
+                <div className="flex flex-col gap-2 text-sm">
+                  <div className="flex">
+                    <div className="w-32 font-semibold">User ID:</div>
+                    <div className="font-mono">{user.id}</div>
+                  </div>
+                  {user.primaryEmail && (
+                    <div className="flex">
+                      <div className="w-32 font-semibold">Email:</div>
+                      <div>{user.primaryEmail}</div>
+                    </div>
+                  )}
+                </div>
+              </div>
             </CardContent>
             <CardFooter>
               <div className='flex gap-2'>

examples/demo/src/components/header.tsx

@@ -9,7 +9,7 @@ export default function Header() {
   const { theme, setTheme } = useTheme();
   return (
     <>
-      <div className="fixed w-full z-50 p-4 h-12 flex items-center py-4 border-b justify-between dark:bg-black dark:border-gray-800">
+      <div className="fixed w-full z-50 p-4 h-12 flex items-center py-4 border-b justify-between bg-white dark:bg-black dark:border-gray-800">
         <div className="flex items-center gap-4">
           <Link href="/" className="font-semibold flex items-center gap-2">
             <Image