feat: Themes feature redesign

[Punnawit9285]

No description provided.

[ittipatken]

The theme is too specific and hard-coded. I am sorry, but I can’t endorse this pull request yet.
I suggests writing a generalized theme, e.g. https://github.com/docchula/el-player.

[Punnawit9285]

Commit Summary :

Theme System Redesign & Smooth Transition Animations

1. Generalized Theme Dropdown Menu:

   • Light
   • Dark
   • Pink
   • Device default
     (Note: Selected theme explicitly overrides system/device OS settings. For example, selecting Pink Mode will display the bright pink theme regardless of whether the device OS is set to Dark or Light mode).

2. Smooth Theme Switching Animation:

   • Added smooth transition animations across all UI elements (inspired by el-player).

3. Per-User Theme Persistence:

   • Theme preferences are saved across login/logout sessions.
   • Settings are stored per user's unique Firebase user ID (UID) in localStorage.
   • 3.1 User Login (loadForUser(uid)): When a user logs in, ThemeService looks up themePrefs_<user_uid> on that browser/device.
   • 3.2 User Logout (clearForUser()): When the user logs out, it clears active theme state so the next person signing into that device doesn't inherit someone else's theme.
   • Performance note: Storing in localStorage is purely synchronous local memory access (<0.1ms) with zero database read/writes, ensuring no slowdown to the login flow.

4. Hard-coded Proof Architecture:

   • Centralized THEME_OPTIONS registry array in ThemeService.
   • Uses @for loop to dynamically render data arrays in templates instead of duplicate HTML elements.
   • Theme styling utilizes standard CSS design tokens (var(--ion-color-*)).

---

P.S. Thank you for the constructive feedback last time! I learned from my mistakes and the docchula/el-player repository you provided to come up with this new version. If there are any mistakes or anything that needs to be fixed, please let me know. I'm eager to learn and improve it!