fix: improve system theme handling and local development experience (#234)

[priyanshujoshi99]

This PR addresses the request for system-based theme synchronization and improves the local development environment setup.

Closes: #234

Changes

🎨 System Theme Support

Fixed System Theme Logic: Enhanced the Header component to properly handle the "System" theme preference.
Dynamic Icons: The theme icon now dynamically switches between Sun (IoMdSunny) and Moon (BsMoonFill) to match the resolved system state (Dark vs. Light).
Live Updates: Added a media query listener so the UI and icons update immediately when the OS theme changes without requiring a refresh.

🛠️ Developer Experience (DX)

Graceful Auth Fallback: Added a mock for Firebase Auth when the API key is missing, allowing developers to run the project locally without full Firebase configuration.
Enhanced Documentation:

• Updated README.md with the correct Vite dev port (5173).
• Added a detailed environment variable guide.
• Specified Node.js 18 requirement and documented platform-specific build commands.

Verification Results

[x] System Theme: Confirmed theme and icons toggle correctly when switching Windows/macOS appearance settings.
[x] Setup: Verified yarn start works with a minimal .env file.
[x] Documentation: Links and commands in README verified against current project structure.

[medyo]

We should have a dedicated icon for the system theme option. Currently, switching between light and dark requires clicking the moon icon twice because the intermediate state belongs to system which is confusing.
What do you think?

[priyanshujoshi99]

We should have a dedicated icon for the system theme option. Currently, switching between light and dark requires clicking the moon icon twice because the intermediate state belongs to system which is confusing. What do you think?

Fair observation @medyo, I've pushed some changes now. We'll see the monitor icon for the system-selected theme.

[medyo]

It looks good. However, I’m a bit skeptical about keeping the theme preference button in the header since it’s a one-time setting that users rarely change. What do you think about removing it from the header?

[priyanshujoshi99]

I’ve kept it where it is for now, since existing users are used to seeing it there, and removing it might make it feel like the theme option is no longer available. That said, I’m fine with moving it out of the header and keeping it only on the Settings screen if that works better. Let me know what you think.