feat(extension): Add theme and dynamic icon support (#1894)

* feat: add theme selection support to browser extension

- integrate theme settings with plugin settings storage
- add theme selector dropdown to options page
- implement custom ThemeProvider using plugin settings
- include new Select UI component for theme selection

* feat(extension): add dynamic icon theme switching (#1100)

Add updateIcon() function to dynamically change extension icon based on
selected theme (light/dark/system). Update icon on initial load and when
settings change to reflect current theme preference.

Closes #1100

* fix(extension): switch dark mode strategy from media to selector

This allows manual control over dark mode via class toggling rather
than relying on the OS/browser preference.

* fix(extension): move icon update logic to content script

The `window` object is inaccessible in the background script, causing
icon updates to fail. This change relocates the icon update logic to the
content script where `window.matchMedia` is available.

- Remove `updateIcon` function from background script
- Add icon update logic to `ThemeProvider` component
- Consolidate theme and icon updates in single effect

* feat(settings): make theme field required in settings schema

Remove optional flag from theme field to enforce presence in
settings validation schema.

* deps: Upgrade the extension deps

* minor fixes

---------

Co-authored-by: MohamedBassem <me@mbassem.com>

1 files changed, 1 insertions, 3 deletions

diff --git a/apps/browser-extension/src/utils/providers.tsx b/apps/browser-extension/src/utils/providers.tsx
index 827cc84e..86489d6d 100644
--- a/apps/browser-extension/src/utils/providers.tsx
+++ b/apps/browser-extension/src/utils/providers.tsx
@@ -8,9 +8,7 @@ export function Providers({ children }: { children: React.ReactNode }) {
 
   return (
     <TRPCProvider settings={settings}>
-      <ThemeProvider defaultTheme="system" storageKey="vite-ui-theme">
-        {children}
-      </ThemeProvider>
+      <ThemeProvider>{children}</ThemeProvider>
     </TRPCProvider>
   );
 }