fix(header): sync theme icon state after mount

[QuentinHsu]

Problem

• The Header component reads theme state during initial render, which can cause the first client render to disagree with the server-rendered icon.
• The theme toggle renders light/dark icons before mount, creating a hydration mismatch risk.

Solution

• Change the dark state to start from a stable default and sync the actual theme from document.documentElement in useEffect after mount.
• Add a mounted flag and render a placeholder before the component is mounted.
• Keep the existing theme toggle behavior unchanged while adjusting only the initial sync and render timing.

Testing

• Verify the header theme icon renders consistently on first page load.
• Verify both desktop and mobile toggle buttons update correctly after switching themes.
• Verify the icon stays aligned with the current document theme after a page refresh.

[vercel]

@QuentinHsu is attempting to deploy a commit to the crazyboym's projects Team on Vercel.

A member of the Team first needs to authorize it.