1 files changed, 22 insertions, 0 deletions
diff --git a/apps/browser-extension/src/OptionsPage.tsx b/apps/browser-extension/src/OptionsPage.tsx
index 41b72178..ef51bc02 100644
--- a/apps/browser-extension/src/OptionsPage.tsx
+++ b/apps/browser-extension/src/OptionsPage.tsx
@@ -2,14 +2,23 @@ import React, { useEffect } from "react";
 import { useNavigate } from "react-router-dom";
 
 import { Button } from "./components/ui/button";
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "./components/ui/select";
 import Logo from "./Logo";
 import Spinner from "./Spinner";
 import usePluginSettings from "./utils/settings";
+import { useTheme } from "./utils/ThemeProvider";
 import { api } from "./utils/trpc";
 
 export default function OptionsPage() {
   const navigate = useNavigate();
   const { settings, setSettings } = usePluginSettings();
+  const { setTheme, theme } = useTheme();
 
   const { data: whoami, error: whoAmIError } = api.users.whoami.useQuery(
     undefined,
@@ -63,6 +72,19 @@ export default function OptionsPage() {
         <span className="my-auto">Logged in as:</span>
         {loggedInMessage}
       </div>
+      <div className="flex gap-2">
+        <span className="my-auto">Theme:</span>
+        <Select value={theme} onValueChange={setTheme}>
+          <SelectTrigger className="w-24">
+            <SelectValue placeholder="Theme" />
+          </SelectTrigger>
+          <SelectContent>
+            <SelectItem value="light">Light</SelectItem>
+            <SelectItem value="dark">Dark</SelectItem>
+            <SelectItem value="system">System</SelectItem>
+          </SelectContent>
+        </Select>
+      </div>
       <Button onClick={onLogout}>Logout</Button>
     </div>
   );