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>

3 files changed, 39 insertions, 31 deletions

diff --git a/apps/browser-extension/src/utils/ThemeProvider.tsx b/apps/browser-extension/src/utils/ThemeProvider.tsx
index 79a0b32f..20a928e1 100644
--- a/apps/browser-extension/src/utils/ThemeProvider.tsx
+++ b/apps/browser-extension/src/utils/ThemeProvider.tsx
@@ -1,11 +1,11 @@
-import { createContext, useContext, useEffect, useState } from "react";
+import { createContext, useContext, useEffect } from "react";
+
+import usePluginSettings from "./settings";
 
 type Theme = "dark" | "light" | "system";
 
 interface ThemeProviderProps {
   children: React.ReactNode;
-  defaultTheme?: Theme;
-  storageKey?: string;
 }
 
 interface ThemeProviderState {
@@ -20,39 +20,47 @@ const initialState: ThemeProviderState = {
 
 const ThemeProviderContext = createContext<ThemeProviderState>(initialState);
 
-export function ThemeProvider({
-  children,
-  defaultTheme = "system",
-  storageKey = "vite-ui-theme",
-  ...props
-}: ThemeProviderProps) {
-  const [theme, setTheme] = useState<Theme>(
-    () => (localStorage.getItem(storageKey) as Theme) || defaultTheme,
-  );
+export function ThemeProvider({ children, ...props }: ThemeProviderProps) {
+  const { settings, setSettings } = usePluginSettings();
+  const theme = settings.theme;
 
   useEffect(() => {
     const root = window.document.documentElement;
 
-    root.classList.remove("light", "dark");
-
-    if (theme === "system") {
-      const systemTheme = window.matchMedia("(prefers-color-scheme: dark)")
-        .matches
-        ? "dark"
-        : "light";
-
-      root.classList.add(systemTheme);
-      return;
-    }
-
-    root.classList.add(theme);
+    const updateIcon = (useDarkModeIcons: boolean) => {
+      const iconSuffix = useDarkModeIcons ? "-darkmode.png" : ".png";
+
+      const iconPaths = {
+        "16": `logo-16${iconSuffix}`,
+        "48": `logo-48${iconSuffix}`,
+        "128": `logo-128${iconSuffix}`,
+      };
+      chrome.action.setIcon({ path: iconPaths });
+    };
+
+    const applyThemeAndIcon = () => {
+      root.classList.remove("light", "dark");
+
+      let currentTheme: "light" | "dark";
+      if (theme === "system") {
+        currentTheme = window.matchMedia("(prefers-color-scheme: dark)").matches
+          ? "dark"
+          : "light";
+      } else {
+        currentTheme = theme;
+      }
+
+      root.classList.add(currentTheme);
+      updateIcon(currentTheme === "dark");
+    };
+
+    applyThemeAndIcon();
   }, [theme]);
 
   const value = {
     theme,
-    setTheme: (theme: Theme) => {
-      localStorage.setItem(storageKey, theme);
-      setTheme(theme);
+    setTheme: (newTheme: Theme) => {
+      setSettings((s) => ({ ...s, theme: newTheme }));
     },
   };
 
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>
   );
 }
diff --git a/apps/browser-extension/src/utils/settings.ts b/apps/browser-extension/src/utils/settings.ts
index c273acfa..523699b4 100644
--- a/apps/browser-extension/src/utils/settings.ts
+++ b/apps/browser-extension/src/utils/settings.ts
@@ -5,11 +5,13 @@ const zSettingsSchema = z.object({
   apiKey: z.string(),
   apiKeyId: z.string().optional(),
   address: z.string(),
+  theme: z.enum(["light", "dark", "system"]).optional().default("system"),
 });
 
 const DEFAULT_SETTINGS: Settings = {
   apiKey: "",
   address: "",
+  theme: "system",
 };
 
 export type Settings = z.infer<typeof zSettingsSchema>;