diff --git a/src/client/web/src/components/root_frame.tsx b/src/client/web/src/components/root_frame.tsx
index 1281adce7..8aa4007e8 100644
--- a/src/client/web/src/components/root_frame.tsx
+++ b/src/client/web/src/components/root_frame.tsx
@@ -80,10 +80,14 @@ export class RootFrame extends React.Component<Props, State, {}> {
 
   render() {
     const bgStyle = this.makeBgStyle();
-    const theme =
+    const autoTheme =
+      updater().getCurrentTheme() === "light" ? "theme-default" : "theme-dark";
+    const fixedTheme =
       this.props.login.preferences.theme === "light"
         ? "theme-default"
         : "theme-dark";
+    const theme = this.props.ui.clientCfg.autoTheme ? autoTheme : fixedTheme;
+
     const fontSizeClass = "font-m";
 
     const displaying = this.props.ui.control.controls.get(controlName);
diff --git a/src/client/web/src/components/state_updater.ts b/src/client/web/src/components/state_updater.ts
index a1794b8fa..2fb5eafce 100644
--- a/src/client/web/src/components/state_updater.ts
+++ b/src/client/web/src/components/state_updater.ts
@@ -789,20 +789,23 @@ export class Updater {
     this.props.login.preferences.theme = theme;
   };
 
-  autoSwitchTheme = () => {
-    if (!this.props.ui.clientCfg.autoTheme) {
-      return;
-    }
-
+  getCurrentTheme = () => {
     const date = new Date();
+
     if (
       (date.getHours() >= 18 && date.getHours() <= 23) ||
       (date.getHours() >= 0 && date.getHours() <= 6)
     ) {
-      this.setTheme("dark");
-    } else {
-      this.setTheme("light");
+      return "dark";
+    }
+    return "light";
+  };
+
+  autoSwitchTheme = () => {
+    if (!this.props.ui.clientCfg.autoTheme) {
+      return;
     }
+    this.setTheme(this.getCurrentTheme());
   };
 
   setControlOption = (controlName: string, option: string): boolean => {