diff --git a/icons/icon.png b/icons/icon.png
index a440e0a..5854739 100644
Binary files a/icons/icon.png and b/icons/icon.png differ
diff --git a/settings.css b/settings.css
index ef854ce..d3abf54 100644
--- a/settings.css
+++ b/settings.css
@@ -8,8 +8,8 @@ body {
   font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Helvetica Neue', Arial, sans-serif;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
-  background: #f7f7f8;
-  color: #343541;
+  background: var(--bg-primary);
+  color: var(--text-primary);
 }
 
 .settings-container {
@@ -28,21 +28,21 @@ body {
 .settings-header h1 {
   font-size: 28px;
   font-weight: 600;
-  color: #343541;
+  color: var(--text-primary);
   margin-bottom: 8px;
 }
 
 .settings-header p {
-  color: #8e8ea0;
+  color: var(--text-secondary);
   font-size: 14px;
 }
 
 .settings-content {
-  background: #ffffff;
+  background: var(--bg-primary);
   border-radius: 12px;
   padding: 32px;
   box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
-  border: 1px solid #e5e7eb;
+  border: 1px solid var(--border-primary);
 }
 
 .setting-group {
@@ -57,7 +57,7 @@ body {
   display: block;
   font-weight: 500;
   margin-bottom: 10px;
-  color: #343541;
+  color: var(--text-primary);
   font-size: 14px;
 }
 
@@ -69,49 +69,49 @@ body {
 
 .provider-button {
   padding: 14px 12px;
-  border: 1.5px solid #d9d9e3;
+  border: 1.5px solid var(--border-secondary);
   border-radius: 8px;
-  background: #ffffff;
+  background: var(--bg-primary);
   cursor: pointer;
   font-size: 14px;
   font-weight: 500;
   transition: all 0.15s ease;
-  color: #343541;
+  color: var(--text-primary);
   text-align: center;
 }
 
 .provider-button:hover {
-  border-color: #2563eb;
-  background: #f7f7f8;
+  border-color: var(--accent-color);
+  background: var(--bg-secondary);
 }
 
 .provider-button.active {
-  border-color: #2563eb;
-  background: #2563eb;
-  color: white;
+  border-color: var(--accent-color);
+  background: var(--accent-color);
+  color: #ffffff;
 }
 
 .model-select {
   width: 100%;
   padding: 12px 14px;
-  border: 1.5px solid #d9d9e3;
+  border: 1.5px solid var(--border-secondary);
   border-radius: 8px;
   font-size: 14px;
-  background: #ffffff;
+  background: var(--bg-primary);
   cursor: pointer;
   transition: all 0.15s ease;
-  color: #343541;
+  color: var(--text-primary);
   font-family: inherit;
 }
 
 .model-select:hover {
-  border-color: #2563eb;
+  border-color: var(--accent-color);
 }
 
 .model-select:focus {
   outline: none;
-  border-color: #2563eb;
-  box-shadow: 0 0 0 1px #2563eb;
+  border-color: var(--accent-color);
+  box-shadow: 0 0 0 1px var(--accent-color);
 }
 
 .api-key-input-wrapper {
@@ -123,38 +123,38 @@ body {
 .api-key-input {
   flex: 1;
   padding: 12px 14px;
-  border: 1.5px solid #d9d9e3;
+  border: 1.5px solid var(--border-secondary);
   border-radius: 8px;
   font-size: 14px;
   font-family: 'SF Mono', Monaco, 'Cascadia Code', 'Roboto Mono', Courier, monospace;
   transition: all 0.15s ease;
-  background: #ffffff;
-  color: #343541;
+  background: var(--bg-primary);
+  color: var(--text-primary);
 }
 
 .api-key-input:hover {
-  border-color: #2563eb;
+  border-color: var(--accent-color);
 }
 
 .api-key-input:focus {
   outline: none;
-  border-color: #2563eb;
-  box-shadow: 0 0 0 1px #2563eb;
+  border-color: var(--accent-color);
+  box-shadow: 0 0 0 1px var(--accent-color);
 }
 
 .api-key-input::placeholder {
-  color: #8e8ea0;
+  color: var(--text-secondary);
 }
 
 .toggle-visibility {
   padding: 12px 14px;
-  border: 1.5px solid #d9d9e3;
+  border: 1.5px solid var(--border-secondary);
   border-radius: 8px;
-  background: #ffffff;
+  background: var(--bg-primary);
   cursor: pointer;
   font-size: 16px;
   transition: all 0.15s ease;
-  color: #343541;
+  color: var(--text-primary);
   min-width: 48px;
   display: flex;
   align-items: center;
@@ -162,19 +162,19 @@ body {
 }
 
 .toggle-visibility:hover {
-  border-color: #2563eb;
-  background: #f7f7f8;
+  border-color: var(--accent-color);
+  background: var(--bg-secondary);
 }
 
 .help-text {
   margin-top: 8px;
   font-size: 12px;
-  color: #8e8ea0;
+  color: var(--text-secondary);
   line-height: 1.5;
 }
 
 .help-text a {
-  color: #2563eb;
+  color: var(--accent-color);
   text-decoration: none;
   font-weight: 500;
 }
@@ -188,9 +188,9 @@ body {
   font-size: 12px;
   width: 100%;
   padding: 12px;
-  background-color: #000000;
-  color: #ffffff;
-  border: 1px solid rgba(0, 0, 0, 0.2);
+  background-color: var(--save-button-bg);
+  color: var(--text-primary);
+  border: 1px solid var(--border-secondary);
   border-radius: 4px;
   font-weight: 500;
   cursor: pointer;
@@ -207,8 +207,8 @@ body {
 }
 
 .save-button:hover:not(:disabled) {
-  background-color: #1a1a1a;
-  border-color: rgba(0, 0, 0, 0.4);
+  background-color: var(--bg-primary);
+  border-color: var(--border-secondary);
 }
 
 .save-button:active:not(:disabled) {
@@ -221,7 +221,7 @@ body {
 }
 
 .save-button.saved {
-  background-color: #000000;
+  background-color: var(--save-button-bg);
 }
 
 .feature-cards {
@@ -233,15 +233,15 @@ body {
 
 .feature-card {
   padding: 20px;
-  background: #ffffff;
-  border: 1px solid #e5e7eb;
+  background: var(--bg-primary);
+  border: 1px solid var(--border-primary);
   border-radius: 8px;
   text-align: center;
   transition: all 0.15s ease;
 }
 
 .feature-card:hover {
-  border-color: #2563eb;
+  border-color: var(--accent-color);
   box-shadow: 0 2px 8px rgba(37, 99, 235, 0.1);
 }
 
@@ -266,8 +266,8 @@ body {
 .info-box {
   margin-top: 24px;
   padding: 16px;
-  background: #eff6ff;
-  border: 1px solid #dbeafe;
+  background: var(--info-box-bg);
+  border: 1px solid var(--info-box-border);
   border-radius: 8px;
 }
 
@@ -275,12 +275,12 @@ body {
   font-size: 13px;
   font-weight: 600;
   margin-bottom: 6px;
-  color: #1e40af;
+  color: var(--info-box-heading);
 }
 
 .info-box p {
   font-size: 12px;
-  color: #1e3a8a;
+  color: var(--info-box-text);
   line-height: 1.6;
 }
 
diff --git a/settings.html b/settings.html
index b961007..7f53e74 100644
--- a/settings.html
+++ b/settings.html
@@ -4,6 +4,7 @@
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>Atlas Settings</title>
+  <link rel="stylesheet" href="theme.css">
   <link rel="stylesheet" href="settings.css">
 </head>
 <body>
diff --git a/settings.tsx b/settings.tsx
index 2704ac2..1a0c64a 100644
--- a/settings.tsx
+++ b/settings.tsx
@@ -17,6 +17,7 @@ function SettingsPage() {
     model: 'gemini-2.5-pro',
     toolMode: 'tool-router',
     composioApiKey: '',
+    theme: 'system',
   });
   const [saved, setSaved] = useState(false);
   const [showApiKey, setShowApiKey] = useState(false);
@@ -26,11 +27,40 @@ function SettingsPage() {
     // Load settings from chrome.storage
     chrome.storage.local.get(['atlasSettings'], (result) => {
       if (result.atlasSettings) {
-        setSettings(result.atlasSettings);
+        setSettings({
+          ...result.atlasSettings,
+          theme: result.atlasSettings.theme || 'system',
+        });
       }
     });
   }, []);
 
+  // Apply theme on load and changes
+  useEffect(() => {
+    const applyTheme = () => {
+      let theme = settings.theme || 'system';
+
+      if (theme === 'system') {
+        theme = window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light';
+      }
+
+      document.documentElement.setAttribute('data-theme', theme);
+    };
+
+    applyTheme();
+
+    // Listen for system theme changes
+    const mediaQuery = window.matchMedia('(prefers-color-scheme: dark)');
+    const handleChange = () => {
+      if (settings.theme === 'system') {
+        applyTheme();
+      }
+    };
+
+    mediaQuery.addEventListener('change', handleChange);
+    return () => mediaQuery.removeEventListener('change', handleChange);
+  }, [settings.theme]);
+
   const handleSave = () => {
     chrome.storage.local.set({ atlasSettings: settings }, () => {
       setSaved(true);
@@ -53,6 +83,30 @@ function SettingsPage() {
       </div>
 
       <div className="settings-content">
+        <div className="setting-group">
+          <label>Theme</label>
+          <div className="provider-buttons">
+            <button
+              className={`provider-button ${settings.theme === 'light' ? 'active' : ''}`}
+              onClick={() => setSettings({ ...settings, theme: 'light' })}
+            >
+              ☀️ Light
+            </button>
+            <button
+              className={`provider-button ${settings.theme === 'dark' ? 'active' : ''}`}
+              onClick={() => setSettings({ ...settings, theme: 'dark' })}
+            >
+              🌙 Dark
+            </button>
+            <button
+              className={`provider-button ${settings.theme === 'system' ? 'active' : ''}`}
+              onClick={() => setSettings({ ...settings, theme: 'system' })}
+            >
+              💻 System
+            </button>
+          </div>
+        </div>
+
         <div className="setting-group">
           <label>AI Provider</label>
           <div className="provider-info">
diff --git a/sidepanel.css b/sidepanel.css
index 63a4f3f..4d61e79 100644
--- a/sidepanel.css
+++ b/sidepanel.css
@@ -8,8 +8,8 @@ body {
   font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Helvetica Neue', Arial, sans-serif;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
-  background: #ffffff;
-  color: #343541;
+  background: var(--bg-primary);
+  color: var(--text-primary);
 }
 
 .chat-container {
@@ -17,13 +17,13 @@ body {
   flex-direction: column;
   height: 100vh;
   max-width: 100%;
-  background: #ffffff;
+  background: var(--bg-primary);
 }
 
 .chat-header {
   padding: 12px 16px;
-  background: #ffffff;
-  border-bottom: 1px solid #e5e7eb;
+  background: var(--bg-primary);
+  border-bottom: 1px solid var(--border-primary);
   display: flex;
   align-items: center;
   justify-content: space-between;
@@ -35,13 +35,13 @@ body {
 .chat-header h1 {
   font-size: 16px;
   font-weight: 600;
-  color: #343541;
+  color: var(--text-primary);
   margin: 0;
 }
 
 .chat-header p {
   font-size: 12px;
-  color: #8e8ea0;
+  color: var(--text-secondary);
   margin-top: 2px;
 }
 
@@ -64,19 +64,19 @@ body {
   display: flex;
   position: relative;
   overflow: visible;
-  background-color: #000000;
+  background-color: var(--icon-button-bg);
   will-change: auto;
   opacity: 1;
   border: none;
   border-radius: 0;
   transition: all 0.15s ease;
-  color: #ffffff;
+  color: var(--icon-button-text);
   font-weight: 500;
 }
 
 .settings-icon-btn:hover {
-  background-color: #1a1a1a;
-  border-color: rgba(0, 0, 0, 0.4);
+  background-color: var(--icon-button-hover);
+  border-color: var(--border-secondary);
 }
 
 .settings-icon-btn:disabled {
@@ -85,14 +85,14 @@ body {
 }
 
 .settings-icon-btn.active {
-  background-color: #000000 !important;
-  color: #ffffff !important;
+  background-color: var(--icon-button-bg) !important;
+  color: var(--icon-button-text) !important;
 }
 
 .messages-container {
   flex: 1;
   overflow-y: auto;
-  background: #ffffff;
+  background: var(--bg-primary);
 }
 
 .messages-container::-webkit-scrollbar {
@@ -104,12 +104,12 @@ body {
 }
 
 .messages-container::-webkit-scrollbar-thumb {
-  background: #d9d9e3;
+  background: var(--scrollbar-thumb);
   border-radius: 4px;
 }
 
 .messages-container::-webkit-scrollbar-thumb:hover {
-  background: #c5c5d2;
+  background: var(--scrollbar-thumb-hover);
 }
 
 .welcome-message {
@@ -120,21 +120,21 @@ body {
   height: 100%;
   text-align: center;
   padding: 32px 24px;
-  color: #8e8ea0;
+  color: var(--text-secondary);
 }
 
 .welcome-message h2 {
   font-size: 20px;
   font-weight: 600;
   margin-bottom: 12px;
-  color: #343541;
+  color: var(--text-primary);
 }
 
 .welcome-message p {
   font-size: 14px;
   line-height: 1.6;
   max-width: 400px;
-  color: #8e8ea0;
+  color: var(--text-secondary);
 }
 
 .message {
@@ -172,21 +172,21 @@ body {
   padding: 12px 16px;
   line-height: 1.5;
   font-size: 14px;
-  color: #343541;
+  color: var(--text-primary);
   word-wrap: break-word;
   white-space: normal;
   border-radius: 18px;
 }
 
 .message.user .message-content {
-  background: #000000;
-  color: white;
+  background: var(--message-user-bg);
+  color: var(--message-user-text);
   border-bottom-right-radius: 4px;
 }
 
 .message.assistant .message-content {
-  background: #000000;
-  color: white;
+  background: var(--message-assistant-bg);
+  color: var(--message-assistant-text);
   border-bottom-left-radius: 4px;
 }
 
@@ -200,7 +200,7 @@ body {
 }
 
 .message.assistant .message-content code {
-  background: #e5e7eb;
+  background: var(--code-bg);
   padding: 2px 6px;
   border-radius: 4px;
   font-family: 'SF Mono', Monaco, 'Cascadia Code', 'Roboto Mono', Courier, monospace;
@@ -208,8 +208,8 @@ body {
 }
 
 .message.assistant .message-content pre {
-  background: #1e293b;
-  color: #e2e8f0;
+  background: var(--code-block-bg);
+  color: var(--code-block-text);
   padding: 10px;
   border-radius: 6px;
   overflow-x: auto;
@@ -300,7 +300,7 @@ body {
   width: 8px;
   height: 8px;
   border-radius: 50%;
-  background: #ffffff;
+  background: var(--text-inverted);
   animation: typing 1.4s infinite ease-in-out;
   opacity: 0.6;
 }
@@ -330,8 +330,8 @@ body {
 
 .input-form {
   padding: 12px 16px 24px;
-  background: #ffffff;
-  border-top: 1px solid #e5e7eb;
+  background: var(--bg-primary);
+  border-top: 1px solid var(--border-primary);
   display: flex;
   gap: 8px;
   align-items: center;
@@ -341,14 +341,14 @@ body {
 .chat-input {
   flex: 1;
   padding: 12px 16px;
-  border: 1px solid #d9d9e3;
+  border: 1px solid var(--border-secondary);
   border-radius: 12px;
   font-size: 15px;
   font-family: inherit;
   outline: none;
   transition: all 0.15s ease;
-  background: #f7f7f8;
-  color: #343541;
+  background: var(--chat-input-bg);
+  color: var(--text-primary);
   resize: none;
   min-height: 24px;
   max-height: 200px;
@@ -356,31 +356,31 @@ body {
 }
 
 .chat-input:hover {
-  background: #ffffff;
+  background: var(--chat-input-hover);
   border-color: #b4b4b4;
 }
 
 .chat-input:focus {
-  background: #ffffff;
+  background: var(--chat-input-focus);
   border-color: #2563eb;
   box-shadow: 0 0 0 2px rgba(37, 99, 235, 0.1);
 }
 
 .chat-input:disabled {
-  background: #f7f7f8;
-  color: #8e8ea0;
+  background: var(--chat-input-bg);
+  color: var(--text-secondary);
   cursor: not-allowed;
   opacity: 0.6;
 }
 
 .chat-input::placeholder {
-  color: #8e8ea0;
+  color: var(--text-secondary);
 }
 
 .send-button {
   padding: 0;
-  background: #000000;
-  color: white;
+  background: var(--icon-button-bg);
+  color: var(--icon-button-text);
   border: none;
   border-radius: 0;
   font-size: 18px;
@@ -397,12 +397,12 @@ body {
 }
 
 .send-button:hover:not(:disabled) {
-  background: #1a1a1a;
+  background: var(--icon-button-hover);
 }
 
 .send-button:disabled {
-  background: #d9d9e3;
-  color: #8e8ea0;
+  background: var(--border-secondary);
+  color: var(--text-secondary);
   cursor: not-allowed;
 }
 
@@ -411,92 +411,13 @@ body {
 }
 
 .send-button.stop-button {
-  background: #343541;
+  background: var(--stop-button-bg);
+  color: var(--stop-button-text);
   border-radius: 6px;
   width: 36px;
   height: 36px;
 }
 
 .send-button.stop-button:hover {
-  background: #202123;
-}
-
-/* Dark Mode Styles */
-.chat-container.dark-mode {
-  background: #1a1a1a;
-  color: #ffffff;
-}
-
-.chat-container.dark-mode .chat-header {
-  background: #1a1a1a;
-  border-bottom-color: #333333;
-}
-
-.chat-container.dark-mode .chat-header h1 {
-  color: #ffffff;
-}
-
-.chat-container.dark-mode .chat-header p {
-  color: #a0a0a0;
-}
-
-.chat-container.dark-mode .messages-container {
-  background: #1a1a1a;
-}
-
-.chat-container.dark-mode .message.user .message-content {
-  background: #262626;
-  color: #ffffff;
-}
-
-.chat-container.dark-mode .message.assistant .message-content {
-  background: #262626;
-  color: #ffffff;
-}
-
-.chat-container.dark-mode .message.assistant .message-content code {
-  background: #1a1a1a;
-  color: #ffffff;
-}
-
-.chat-container.dark-mode .welcome-message {
-  color: #a0a0a0;
-}
-
-.chat-container.dark-mode .welcome-message h2 {
-  color: #ffffff;
-}
-
-.chat-container.dark-mode .welcome-message p {
-  color: #a0a0a0;
-}
-
-.chat-container.dark-mode .input-form {
-  background: #1a1a1a;
-  border-top-color: #333333;
-}
-
-.chat-container.dark-mode .chat-input {
-  background: #262626;
-  color: #ffffff;
-  border-color: #333333;
-}
-
-.chat-container.dark-mode .chat-input:hover {
-  background: #333333;
-  border-color: #444444;
-}
-
-.chat-container.dark-mode .chat-input:focus {
-  background: #333333;
-  border-color: #2563eb;
-  box-shadow: 0 0 0 2px rgba(37, 99, 235, 0.1);
-}
-
-.chat-container.dark-mode .chat-input::placeholder {
-  color: #666666;
-}
-
-.chat-container.dark-mode .typing-indicator span {
-  background: #000000;
+  background: var(--stop-button-hover);
 }
diff --git a/sidepanel.html b/sidepanel.html
index 35a486a..a380060 100644
--- a/sidepanel.html
+++ b/sidepanel.html
@@ -4,6 +4,7 @@
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>Atlas Chat</title>
+  <link rel="stylesheet" href="theme.css">
   <link rel="stylesheet" href="sidepanel.css">
 </head>
 <body>
diff --git a/sidepanel.tsx b/sidepanel.tsx
index bcb5db4..73d66a5 100644
--- a/sidepanel.tsx
+++ b/sidepanel.tsx
@@ -54,8 +54,8 @@ const MessageParser = ({ content }: { content: string }) => {
           key={idx}
           style={{
             padding: '10px 12px',
-            backgroundColor: '#2d2d2d',
-            borderLeft: '3px solid #4d4d4d',
+            backgroundColor: 'var(--bg-secondary)',
+            borderLeft: '3px solid var(--border-secondary)',
             borderRadius: '4px',
           }}
         >
@@ -241,6 +241,34 @@ function ChatSidebar() {
     }
   }, []);
 
+  // Apply theme whenever settings change
+  useEffect(() => {
+    if (!settings) return;
+
+    const applyTheme = () => {
+      let theme = settings.theme || 'system';
+
+      if (theme === 'system') {
+        theme = window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light';
+      }
+
+      document.documentElement.setAttribute('data-theme', theme);
+    };
+
+    applyTheme();
+
+    // Listen for system theme changes
+    const mediaQuery = window.matchMedia('(prefers-color-scheme: dark)');
+    const handleChange = () => {
+      if (settings.theme === 'system') {
+        applyTheme();
+      }
+    };
+
+    mediaQuery.addEventListener('change', handleChange);
+    return () => mediaQuery.removeEventListener('change', handleChange);
+  }, [settings?.theme]);
+
   const openSettings = () => {
     chrome.runtime.openOptionsPage();
   };
@@ -1381,7 +1409,7 @@ GUIDELINES:
   }
 
   return (
-    <div className="chat-container dark-mode">
+    <div className="chat-container">
       <div className="chat-header">
         <div style={{ flex: 1 }}>
           <h1>Atlas</h1>
diff --git a/theme.css b/theme.css
new file mode 100644
index 0000000..c52438e
--- /dev/null
+++ b/theme.css
@@ -0,0 +1,77 @@
+:root {
+  /* light mode colors */
+  --bg-primary: #fafafa;
+  --bg-secondary: #f5f5f5;
+  --bg-tertiary: #fafafa;
+  --bg-hover: #f7f7f8;
+  --text-primary: #343541;
+  --text-secondary: #8e8ea0;
+  --text-inverted: #ffffff;
+  --border-primary: #e5e7eb;
+  --border-secondary: #d9d9e3;
+  --button-primary: #2c2c2c;
+  --button-hover: #3c3c3c;
+  --accent-color: #2563eb;
+  --scrollbar-thumb: #d9d9e3;
+  --scrollbar-thumb-hover: #c5c5d2;
+  --code-bg: #e5e7eb;
+  --code-block-bg: #1e293b;
+  --code-block-text: #e2e8f0;
+  --message-user-bg: #e5e7eb;
+  --message-assistant-bg: #e5e7eb;
+  --message-user-text: #343541;
+  --message-assistant-text: #343541;
+  --icon-button-bg: #f0f0f0;
+  --icon-button-hover: #e5e5e5;
+  --icon-button-text: #343541;
+  --stop-button-bg: #d1d5db;
+  --stop-button-hover: #9ca3af;
+  --stop-button-text: #374151;
+  --chat-input-bg: #f7f7f8;
+  --chat-input-hover: #ffffff;
+  --chat-input-focus: #ffffff;
+  --save-button-bg: #f0f0f0;
+  --info-box-bg: #eff6ff;
+  --info-box-border: #dbeafe;
+  --info-box-heading: #1e40af;
+  --info-box-text: #1e3a8a;
+}
+
+[data-theme="dark"] {
+  /* dark mode colors */
+  --bg-primary: #1a1a1a;
+  --bg-secondary: #2d2d2d;
+  --bg-tertiary: #333333;
+  --bg-hover: #333333;
+  --text-primary: #ffffff;
+  --text-secondary: #a0a0a0;
+  --text-inverted: #000000;
+  --border-primary: #333333;
+  --border-secondary: #4d4d4d;
+  --button-primary: #f0f0f0;
+  --button-hover: #e0e0e0;
+  --accent-color: #2563eb;
+  --scrollbar-thumb: #444444;
+  --scrollbar-thumb-hover: #555555;
+  --code-bg: #333333;
+  --code-block-bg: #0d1117;
+  --code-block-text: #e6edf3;
+  --message-user-bg: #262626;
+  --message-assistant-bg: #262626;
+  --message-user-text: #ffffff;
+  --message-assistant-text: #ffffff;
+  --icon-button-bg: #000000;
+  --icon-button-hover: #1a1a1a;
+  --icon-button-text: #ffffff;
+  --stop-button-bg: #6b7280;
+  --stop-button-hover: #4b5563;
+  --stop-button-text: #ffffff;
+  --chat-input-bg: #262626;
+  --chat-input-hover: #333333;
+  --chat-input-focus: #333333;
+  --save-button-bg: #000000;
+  --info-box-bg: #1a2332;
+  --info-box-border: #1e3a5f;
+  --info-box-heading: #60a5fa;
+  --info-box-text: #93bbfc;
+}
diff --git a/types.ts b/types.ts
index f5af831..e2ffa3f 100644
--- a/types.ts
+++ b/types.ts
@@ -9,6 +9,7 @@ export interface Settings {
   model: string;
   toolMode?: ToolMode;
   composioApiKey?: string;
+  theme?: 'light' | 'dark' | 'system';
 }
 
 export interface ComposioSession {