Fix theme switch (#3534)

* Fix theme switch * Fix switching theme on refresh * Add watch option * Fix app theme
threefoldtech · Oct 22, 2024 · 1b54bd9 · 1b54bd9
1 parent 6d524ec
commit 1b54bd9
Show file tree

Hide file tree

Showing 4 changed files with 35 additions and 16 deletions.
diff --git a/packages/playground/src/App.vue b/packages/playground/src/App.vue
@@ -294,22 +294,29 @@ function setSidebarOnResize() {
 
 window.addEventListener("resize", setSidebarOnResize);
 
-const themeMatcher = window.matchMedia("(prefers-color-scheme: dark)");
-// changes theme based on changes in system mode
-themeMatcher.addEventListener("change", updateTheme);
+const themeMatchers = {
+  light: window.matchMedia("(prefers-color-scheme: light)"),
+  dark: window.matchMedia("(prefers-color-scheme: dark)"),
+};
+
+themeMatchers.dark.addEventListener("change", updateTheme);
+themeMatchers.light.addEventListener("change", updateTheme);
+
 function updateTheme() {
-  if (themeMatcher.matches) {
-    theme.global.name.value = AppThemeSelection.dark;
-  } else {
-    theme.global.name.value = AppThemeSelection.light;
+  const themeKey = getThemeKey();
+  theme.global.name.value = AppThemeSelection[themeKey];
+  localStorage.setItem(LocalStorageSettingsKey.THEME_KEY, AppThemeSelection[themeKey]);
+}
+
+function getThemeKey() {
+  if (themeMatchers.dark.matches) {
+    return "dark";
+  } else if (themeMatchers.light.matches) {
+    return "light";
   }
-  localStorage.setItem(LocalStorageSettingsKey.THEME_KEY, ThemeSettingsInterface.System);
+  return "system";
 }
 
-// sets theme to system mode on application mount
-onMounted(() => {
-  updateTheme();
-});
 watch(
   () => $route.meta,
   meta => {
@@ -551,7 +558,6 @@ import type { GridClient } from "@threefold/grid_client";
 
 import { DashboardRoutes } from "@/router/routes";
 import { AppThemeSelection } from "@/utils/app_theme";
-import { ThemeSettingsInterface } from "@/utils/settings";
 
 import AppTheme from "./components/app_theme.vue";
 import DeploymentListManager from "./components/deployment_list_manager.vue";

diff --git a/packages/playground/src/components/app_theme.vue b/packages/playground/src/components/app_theme.vue
@@ -21,7 +21,11 @@ const theme = useTheme();
 const light = ref(false);
 
 watch(light, light => (theme.global.name.value = light ? "light" : "dark"));
-watch(theme.global.name, theme => localStorage.setItem(LocalStorageSettingsKey.THEME_KEY, theme));
+watch(theme.global.name, theme => {
+  localStorage.setItem(LocalStorageSettingsKey.THEME_KEY, theme);
+  light.value = theme === "light";
+});
+
 onMounted(() => {
   const theme = localStorage.getItem(LocalStorageSettingsKey.THEME_KEY);
   light.value = theme === "light";

diff --git a/packages/playground/src/utils/app_theme.ts b/packages/playground/src/utils/app_theme.ts
@@ -1,4 +1,5 @@
 export enum AppThemeSelection {
   dark = "dark",
   light = "light",
+  system = "system",
 }
diff --git a/packages/playground/src/views/settings.vue b/packages/playground/src/views/settings.vue
@@ -7,7 +7,7 @@
     <v-card class="my-5"
       ><v-card-title>Theme</v-card-title> <v-card-text>Pick an application theme!</v-card-text>
 
-      <v-select class="pa-3" :items="themes" v-model="selectedTheme" />
+      <v-select class="pa-3 capitalize" :items="themes" v-model="selectedTheme" />
 
       <v-card-actions class="justify-end mb-3 mx-3">
         <v-btn :disabled="isCurrentTheme()" @click="UpdateTheme" class="justify-end ml-auto"
@@ -211,6 +211,15 @@ export default {
       }
     });
 
+    watch(
+      theme.global.name,
+      theme => {
+        selectedTheme.value = currentTheme.value = theme.includes("mode") ? theme : `${theme} mode`;
+        localStorage.setItem(LocalStorageSettingsKey.THEME_KEY, theme);
+      },
+      { immediate: true },
+    );
+
     const deploymentTimeoutdefaultMinutes = gridStore?.client.clientOptions.deploymentTimeoutMinutes;
     const selectedDeploymentTimeout = ref(0);
     const currentDeploymentTimeout = ref(0);
@@ -238,7 +247,6 @@ export default {
         case ThemeInterface.Dark:
           currentTheme.value = ThemeInterface.Dark;
           theme.global.name.value = AppThemeSelection.dark;
-          localStorage.se;
           break;
         case ThemeInterface.Light:
           currentTheme.value = ThemeInterface.Light;