diff --git a/index.js b/index.js
index a40d1a1..b1cd06e 100644
--- a/index.js
+++ b/index.js
@@ -186,6 +186,19 @@ app.on('ready', () => {
 				},
 			];
 
+			const darkModeToggle = {
+				label: 'Toggle Dark Mode',
+				accelerator: 'CommandorControl+Shift+L',
+				type: 'checkbox',
+				checked: store.get('darkMode', false),
+				click: () => {
+					store.set('darkMode', !store.get('darkMode', false));
+					setTimeout(() => {
+						window.reload();
+					}, 100);
+				},
+			};
+
 			const separator = { type: 'separator' };
 
 			const providersToggles = allProviders.map((provider) => {
@@ -248,6 +261,7 @@ app.on('ready', () => {
 			// Return the complete context menu template
 			return [
 				...menuHeader,
+				darkModeToggle,
 				superPromptEnterKey, // TODO: move into the customize keyboard shortcut window
 				separator,
 				...providersToggles,
diff --git a/interface.js b/interface.js
index 03ffce4..9b6b392 100644
--- a/interface.js
+++ b/interface.js
@@ -47,6 +47,22 @@ window.addEventListener('DOMContentLoaded', () => {
 	updateSplitSizes(panes, splitInstance);
 });
 
+/* ========================================================================== */
+/* Dark Mode Listeners                                                        */
+/* ========================================================================== */
+
+// Get the initial value of isDarkMode from the store
+ipcRenderer.invoke('getStoreValue', 'isDarkMode').then((isDarkMode) => {
+    enabledProviders.forEach((provider) => provider.toggleDarkMode(isDarkMode));
+});
+
+// Listen for changes to the isDarkMode value in the store
+ipcRenderer.on('setStoreValue', (event, key, value) => {
+    if (key === 'isDarkMode') {
+        enabledProviders.forEach((provider) => provider.toggleDarkMode(value));
+    }
+});
+
 /* ========================================================================== */
 /* Prompt Input Listeners                                                     */
 /* ========================================================================== */
diff --git a/providers/openai.js b/providers/openai.js
index 68582bf..509c2d2 100644
--- a/providers/openai.js
+++ b/providers/openai.js
@@ -63,19 +63,43 @@ class OpenAi extends Provider {
 
         `);
 			setTimeout(() => {
-				this.getWebview().executeJavaScript(`
-          // Get the root element
-          const root = document.querySelector(':root');
+        // Get the current dark mode setting from the store
+        const isDarkMode = store.get('darkMode', false);
 
-          // Set the color-scheme CSS variable
-          root.style.setProperty('--color-scheme', 'dark');
+        // Toggle dark mode based on the current setting
+        this.toggleDarkMode(isDarkMode);
+      }, 300);
+		});
+	}
 
-          // Add the .dark class to the body
-          document.body.classList.add('dark');
+  static toggleDarkMode(isDarkMode) {
+		if (isDarkMode) {
+			// Add code to enable dark mode
+			this.getWebview().executeJavaScript(`
+				// Get the root element
+				const root = document.querySelector(':root');
 
-          `);
-			}, 0);
-		});
+				// Set the color-scheme CSS variable
+				root.style.setProperty('--color-scheme', 'dark');
+
+				// Add the .dark class to the body
+				document.body.classList.add('dark');
+        document.body.classList.remove('light');
+			`);
+		} else {
+			// Add code to disable dark mode
+			this.getWebview().executeJavaScript(`
+				// Get the root element
+				const root = document.querySelector(':root');
+
+				// Remove the color-scheme CSS variable
+				root.style.setProperty('--color-scheme', 'light');
+
+				// Remove the .dark class from the body
+        document.body.classList.add('light');
+				document.body.classList.remove('dark');
+			`);
+		}
 	}
 
 	static isEnabled() {