added some UX improvements

settings.js

@@ -7,6 +7,7 @@ const addTaskBtn = document.getElementById("addTaskBtn");
 const tasksContainer = document.getElementById("tasks");
 const statusEl = document.getElementById("status");
 const toggleKeyBtn = document.getElementById("toggleKey");
+const themeSelect = document.getElementById("themeSelect");
 
 function getStorage(keys) {
   return new Promise((resolve) => chrome.storage.local.get(keys, resolve));
@@ -20,6 +21,11 @@ function setStatus(message) {
   }, 2000);
 }
 
+function applyTheme(theme) {
+  const value = theme || "system";
+  document.documentElement.dataset.theme = value;
+}
+
 function newTaskId() {
   if (crypto?.randomUUID) return crypto.randomUUID();
   return `task-${Date.now()}-${Math.random().toString(16).slice(2, 8)}`;
@@ -101,13 +107,21 @@ function collectTasks() {
 }
 
 async function loadSettings() {
-  const { apiKey = "", model = "", systemPrompt = "", resume = "", tasks = [] } =
-    await getStorage(["apiKey", "model", "systemPrompt", "resume", "tasks"]);
+  const {
+    apiKey = "",
+    model = "",
+    systemPrompt = "",
+    resume = "",
+    tasks = [],
+    theme = "system"
+  } = await getStorage(["apiKey", "model", "systemPrompt", "resume", "tasks", "theme"]);
 
   apiKeyInput.value = apiKey;
   modelInput.value = model;
   systemPromptInput.value = systemPrompt;
   resumeInput.value = resume;
+  themeSelect.value = theme;
+  applyTheme(theme);
 
   tasksContainer.innerHTML = "";
   if (!tasks.length) {
@@ -129,7 +143,8 @@ async function saveSettings() {
     model: modelInput.value.trim(),
     systemPrompt: systemPromptInput.value,
     resume: resumeInput.value,
-    tasks
+    tasks,
+    theme: themeSelect.value
   });
   setStatus("Saved.");
 }
@@ -145,4 +160,6 @@ toggleKeyBtn.addEventListener("click", () => {
   toggleKeyBtn.textContent = isPassword ? "Hide" : "Show";
 });
 
+themeSelect.addEventListener("change", () => applyTheme(themeSelect.value));
+
 loadSettings();