diff --git a/public/ext/shared/_locales/en/messages.json b/public/ext/shared/_locales/en/messages.json
index a39bfc24..c17c6cad 100644
--- a/public/ext/shared/_locales/en/messages.json
+++ b/public/ext/shared/_locales/en/messages.json
@@ -85,6 +85,24 @@
 	"settings_global_active_desc": {
 		"message": "Toggle on/off script injection for the pages you visit"
 	},
+	"settings_theme_mode": {
+		"message": "Theme mode"
+	},
+	"settings_theme_mode_desc": {
+		"message": "Toggle theme mode"
+	},
+	"settings_theme_mode_auto": {
+		"message": "Auto (System)"
+	},
+	"settings_theme_mode_dark": {
+		"message": "Dark"
+	},
+	"settings_theme_mode_light": {
+		"message": "Light"
+	},
+	"settings_theme_mode_custom": {
+		"message": "Custom"
+	},
 	"settings_global_exclude_match": {
 		"message": "Global Exclude Match patterns"
 	},
diff --git a/src/ext/action-popup/App.svelte b/src/ext/action-popup/App.svelte
index 5740e7b5..6d593530 100644
--- a/src/ext/action-popup/App.svelte
+++ b/src/ext/action-popup/App.svelte
@@ -242,6 +242,12 @@
 		}
 		platform = pltfm.platform;
 
+		/* Override theme mode  */
+		const theme = await settingsStorage.get("theme_mode");
+		if (theme && theme !== "auto") {
+			document.body.style.setProperty("color-scheme", theme);
+		}
+
 		// display native error if there is
 		const errorNative = await settingsStorage.get("error_native");
 		if (errorNative.error) {
diff --git a/src/ext/extension-page/App.svelte b/src/ext/extension-page/App.svelte
index 22487e8f..1c4ce4d3 100644
--- a/src/ext/extension-page/App.svelte
+++ b/src/ext/extension-page/App.svelte
@@ -19,6 +19,15 @@
 		}
 	});
 
+	/* Override theme mode  */
+	$: if ($settings["theme_mode"]) {
+		if ($settings["theme_mode"] === "auto") {
+			document.body.style.removeProperty("color-scheme");
+		} else {
+			document.body.style.setProperty("color-scheme", $settings["theme_mode"]);
+		}
+	}
+
 	// disables default cmd+s (save) and cmd+f (find) behavior
 	function preventKeyCommands(e) {
 		if (e.metaKey && (e.code === "KeyS" || e.code === "KeyF")) {
diff --git a/src/ext/shared/settings.js b/src/ext/shared/settings.js
index 37d83e1d..6154d6bd 100644
--- a/src/ext/shared/settings.js
+++ b/src/ext/shared/settings.js
@@ -124,6 +124,14 @@ const settingsDefinition = /** @type {const} */ [
 		group: "general",
 		nodeType: "Toggle",
 	},
+	{
+		name: "theme_mode",
+		type: "string",
+		values: ["auto", "dark", "light"],
+		default: "auto",
+		group: "general",
+		nodeType: "select",
+	},
 	{
 		name: "global_active",
 		type: "boolean",
diff --git a/src/shared/variables.css b/src/shared/variables.css
index 225c2ae6..f014eba2 100644
--- a/src/shared/variables.css
+++ b/src/shared/variables.css
@@ -24,80 +24,52 @@
 	--editor-matched-highlight: rgb(116 178 235 / 0.2);
 	--editor-search-highlight: rgb(255 166 0 / 0.3);
 
-	/* Dark theme (default) */
-	--color-bg-primary: #323639;
-	--color-bg-secondary: #2f3337;
-	--color-bg-theme: var(--color-black);
-	--color-script-highlighted: #364049;
-	--color-black: #1d2023;
-	--color-white: #fff;
-	--color-blue: #74b1eb;
-	--color-green: #60f36c;
-	--color-grey: rgb(255 255 255 / 0.15);
-	--color-red: #ff453a;
-	--color-yellow: #e4f360;
-	--text-color-primary: rgb(255 255 255);
-	--text-color-secondary: rgb(255 255 255 / 0.65);
-	--text-color-disabled: rgb(255 255 255 / 0.4);
-	--box-shadow: 0 0.5rem 1rem 0 rgb(0 0 0 / 0.25);
-	--button-color: var(--color-black);
-	--border-color: var(--color-black);
+	/* Color Theme */
+	color-scheme: light dark;
+	--color-bg-primary: light-dark(#fafafa, #323639);
+	--color-bg-secondary: light-dark(#f1f1f1, #2f3337);
+	--color-bg-theme: light-dark(var(--color-white), var(--color-black));
+	--color-script-highlighted: light-dark(#e2ebf3, #364049);
+	--color-black: light-dark(#333, #1d2023);
+	--color-white: light-dark(#fff, #fff);
+	--color-blue: light-dark(#317eff, #74b1eb);
+	--color-green: light-dark(#2bb239, #60f36c);
+	--color-grey: light-dark(rgb(51 51 51 / 0.15), rgb(255 255 255 / 0.15));
+	--color-red: light-dark(#ff453a, #ff453a);
+	--color-yellow: light-dark(#b8722c, #e4f360);
+	--text-color-primary: light-dark(rgb(51 51 51), rgb(255 255 255));
+	--text-color-secondary: light-dark(
+		rgb(51 51 51 / 0.65),
+		rgb(255 255 255 / 0.65)
+	);
+	--text-color-disabled: light-dark(
+		rgb(51 51 51 / 0.35),
+		rgb(255 255 255 / 0.4)
+	);
+	--box-shadow: 0 0.5rem 1rem 0 light-dark(rgb(0 0 0 / 0.15), rgb(0 0 0 / 0.25));
+	--button-color: light-dark(var(--color-white), var(--color-black));
+	--border-color: light-dark(var(--color-grey), var(--color-black));
 
-	/* Editor dark theme colors */
-	--editor-invisible: rgb(255 255 255 / 0.15);
-	--editor-number: #77e26a;
-	--editor-comment: rgb(255 255 255 / 0.35);
-	--editor-def: #efc371;
-	--editor-default: #cdcfd1;
-	--editor-keyword: #96c3ed;
-	--editor-atom: #59ebf5;
-	--editor-operator: #8c99a7;
-	--editor-property: #e86c8a;
-	--editor-string: #f5eea2;
-	--editor-string-2: #cdabff;
-	--editor-cursor: #e3e7eb;
-	--editor-matching-bracket-color: #fff;
-	--editor-matching-bracket-border: var(--editor-number);
-	--editor-blurred-background: rgb(50 54 57 / 0.65);
-}
-
-/* Light theme */
-@media (prefers-color-scheme: light) {
-	:root {
-		color-scheme: light dark;
-		--color-bg-primary: #fafafa;
-		--color-bg-secondary: #f1f1f1;
-		--color-bg-theme: var(--color-white);
-		--color-script-highlighted: #e2ebf3;
-		--color-black: #333;
-		--color-white: #fff;
-		--color-blue: #317eff;
-		--color-green: #2bb239;
-		--color-grey: rgb(51 51 51 / 0.15);
-		--color-red: #ff453a;
-		--color-yellow: #b8722c;
-		--text-color-primary: rgb(51 51 51);
-		--text-color-secondary: rgb(51 51 51 / 0.65);
-		--text-color-disabled: rgb(51 51 51 / 0.35);
-		--box-shadow: 0 0.25rem 1rem 0 rgb(0 0 0 / 0.15);
-		--button-color: var(--color-white);
-		--border-color: var(--color-grey);
-
-		/* Editor light theme colors */
-		--editor-invisible: rgb(51 51 51 / 0.15);
-		--editor-number: var(--color-green);
-		--editor-comment: var(--text-color-disabled);
-		--editor-def: #b86d17;
-		--editor-default: #777;
-		--editor-keyword: #3a68ff;
-		--editor-atom: #00adad;
-		--editor-operator: #8c99a7;
-		--editor-property: #ff453a;
-		--editor-string: var(--editor-atom);
-		--editor-string-2: #a34fe6;
-		--editor-cursor: #7e7e7f;
-		--editor-matching-bracket-color: var(--text-color-primary);
-		--editor-matching-bracket-border: #ff00ea;
-		--editor-blurred-background: rgb(255 255 255 / 0.65);
-	}
+	/* Editor colors */
+	--editor-invisible: light-dark(rgb(51 51 51 / 0.15), rgb(255 255 255 / 0.15));
+	--editor-number: light-dark(var(--color-green), #77e26a);
+	--editor-comment: light-dark(
+		var(--text-color-disabled),
+		rgb(255 255 255 / 0.35)
+	);
+	--editor-def: light-dark(#b86d17, #efc371);
+	--editor-default: light-dark(#777, #cdcfd1);
+	--editor-keyword: light-dark(#3a68ff, #96c3ed);
+	--editor-atom: light-dark(#00adad, #59ebf5);
+	--editor-operator: light-dark(#8c99a7, #8c99a7);
+	--editor-property: light-dark(#ff453a, #e86c8a);
+	--editor-string: light-dark(var(--editor-atom), #f5eea2);
+	--editor-string-2: light-dark(#a34fe6, #cdabff);
+	--editor-cursor: light-dark(#7e7e7f, #e3e7eb);
+	--editor-matching-bracket-color: light-dark(var(--text-color-primary), #fff);
+	--editor-matching-bracket-border: light-dark(#ff00ea, var(--editor-number));
+	--editor-blurred-background: light-dark(
+		rgb(255 255 255 / 0.65),
+		rgb(50 54 57 / 0.65)
+	);
 }