fix: auto switch theme behavior & footer indicator

Changing manually to a preset or custom theme now turns auto switch theme mode off with a notification. And now the auto switch mode does override the custom theme as well (statement in settings also updated) if it the later one set. Fixes monkeytypegame#4659, that is the footer theme is now correctly displayed with auto switch themes as well.
sanidhyas3s · Sep 28, 2023 · b9c1229 · b9c1229
1 parent c39fdb0
commit b9c1229
Show file tree

Hide file tree

Showing 3 changed files with 37 additions and 22 deletions.
diff --git a/frontend/src/ts/config.ts b/frontend/src/ts/config.ts
@@ -1324,6 +1324,16 @@ export function setAutoSwitchTheme(
   return true;
 }
 
+export function setAutoSwitchThemeOff(
+): void {
+  if (!config.autoSwitchTheme) return;
+  config.autoSwitchTheme = false;
+  saveToLocalStorage("autoSwitchTheme", undefined);
+  ConfigEvent.dispatch("autoSwitchTheme", config.autoSwitchTheme);
+  Notifications.add("Auto switch theme disabled", 0);
+  return;
+}
+
 export function setCustomTheme(boolean: boolean, nosave?: boolean): boolean {
   if (!isConfigValueValid("custom theme", boolean, ["boolean"])) return false;
 

diff --git a/frontend/src/ts/controllers/theme-controller.ts b/frontend/src/ts/controllers/theme-controller.ts
@@ -9,6 +9,7 @@ import * as Notifications from "../elements/notifications";
 import * as Loader from "../elements/loader";
 import * as AnalyticsController from "../controllers/analytics-controller";
 import { debounce } from "throttle-debounce";
+import { setAutoSwitchThemeOff } from '../config';
 
 export let randomTheme: string | null = null;
 let isPreviewingTheme = false;
@@ -120,10 +121,10 @@ export async function loadStyle(name: string): Promise<void> {
 function apply(
   themeName: string,
   customColorsOverride?: string[],
-  isPreview = false
+  isPreview = false,
+  isAutoSwitch = false
 ): void {
   clearCustomTheme();
-
   const name = customColorsOverride ? "custom" : themeName;
 
   ThemeColors.reset();
@@ -152,6 +153,10 @@ function apply(
     // }
     updateFooterThemeName(isPreview ? themeName : undefined);
   });
+
+  if (!isAutoSwitch) {
+    setAutoSwitchThemeOff();
+  }
 }
 
 function updateFooterThemeName(nameOverride?: string): void {
@@ -177,8 +182,8 @@ const debouncedPreview = debounce(
   }
 );
 
-function set(themeIdentifier: string): void {
-  apply(themeIdentifier);
+function set(themeIdentifier: string, isAutoSwitch: boolean = false): void {
+  apply(themeIdentifier, undefined, true, isAutoSwitch);
 }
 
 export function clearPreview(applyTheme = true): void {
@@ -315,9 +320,9 @@ window
   ?.addEventListener?.("change", (event) => {
     if (!Config.autoSwitchTheme || Config.customTheme) return;
     if (event.matches) {
-      set(Config.themeDark);
+      set(Config.themeDark, true);
     } else {
-      set(Config.themeLight);
+      set(Config.themeLight, true);
     }
   });
 
@@ -337,18 +342,18 @@ ConfigEvent.subscribe((eventKey, eventValue, nosave) => {
   }
   if (eventKey === "setThemes") {
     clearPreview(false);
-    if (eventValue) {
-      set("custom");
+    if (Config.autoSwitchTheme) {
+      if (
+        window.matchMedia &&
+        window.matchMedia("(prefers-color-scheme: dark)").matches
+      ) {
+        set(Config.themeDark, true);
+      } else {
+        set(Config.themeLight, true);
+      }
     } else {
-      if (Config.autoSwitchTheme) {
-        if (
-          window.matchMedia &&
-          window.matchMedia("(prefers-color-scheme: dark)").matches
-        ) {
-          set(Config.themeDark);
-        } else {
-          set(Config.themeLight);
-        }
+      if (eventValue) {
+        set("custom");
       } else {
         set(Config.theme);
       }
@@ -363,9 +368,9 @@ ConfigEvent.subscribe((eventKey, eventValue, nosave) => {
         window.matchMedia &&
         window.matchMedia("(prefers-color-scheme: dark)").matches
       ) {
-        set(Config.themeDark);
+        set(Config.themeDark, true);
       } else {
-        set(Config.themeLight);
+        set(Config.themeLight, true);
       }
     } else {
       set(Config.theme);
@@ -380,7 +385,7 @@ ConfigEvent.subscribe((eventKey, eventValue, nosave) => {
     ) &&
     !nosave
   ) {
-    set(Config.themeLight);
+    set(Config.themeLight, true);
   }
   if (
     eventKey === "themeDark" &&
@@ -389,6 +394,6 @@ ConfigEvent.subscribe((eventKey, eventValue, nosave) => {
     window.matchMedia("(prefers-color-scheme: dark)").matches &&
     !nosave
   ) {
-    set(Config.themeDark);
+    set(Config.themeDark, true);
   }
 });
diff --git a/frontend/static/html/pages/settings.html b/frontend/static/html/pages/settings.html
@@ -2094,7 +2094,7 @@
       </div>
       <div class="text">
         Enabling this will automatically switch the theme between light and dark
-        depending on the system theme (this will not override custom theme).
+        depending on the system theme.
       </div>
       <div class="buttons">
         <div