diff --git a/refact-agent/gui/src/app/middleware.ts b/refact-agent/gui/src/app/middleware.ts
index 3fc9575e0..bd094bd66 100644
--- a/refact-agent/gui/src/app/middleware.ts
+++ b/refact-agent/gui/src/app/middleware.ts
@@ -28,7 +28,7 @@ import {
   setError,
   setIsAuthError,
 } from "../features/Errors/errorsSlice";
-import { updateConfig } from "../features/Config/configSlice";
+import { setThemeMode, updateConfig } from "../features/Config/configSlice";
 import { resetAttachedImagesSlice } from "../features/AttachedImages";
 import { nextTip } from "../features/TipOfTheDay";
 import { telemetryApi } from "../services/refact/telemetry";
@@ -528,3 +528,18 @@ startListening({
     }
   },
 });
+
+startListening({
+  matcher: isAnyOf(updateConfig.match, setThemeMode.match),
+  effect: (_action, listenerApi) => {
+    const appearance = listenerApi.getState().config.themeProps.appearance;
+    if (appearance === "light" && document.body.className !== "vscode-light") {
+      document.body.className = "vscode-light";
+    } else if (
+      appearance === "dark" &&
+      document.body.className !== "vscode-dark"
+    ) {
+      document.body.className = "vscode-dark";
+    }
+  },
+});