From faadb347a61fba7610abe04a459ac65470c3c52c Mon Sep 17 00:00:00 2001 From: samaradel Date: Thu, 17 Oct 2024 13:26:31 +0300 Subject: [PATCH 1/4] Fix theme switch --- packages/playground/src/components/app_theme.vue | 8 ++++---- packages/playground/src/views/settings.vue | 7 +++++-- 2 files changed, 9 insertions(+), 6 deletions(-) diff --git a/packages/playground/src/components/app_theme.vue b/packages/playground/src/components/app_theme.vue index ee6b3a3bd4..01d2d6595f 100644 --- a/packages/playground/src/components/app_theme.vue +++ b/packages/playground/src/components/app_theme.vue @@ -12,7 +12,7 @@ diff --git a/packages/playground/src/views/settings.vue b/packages/playground/src/views/settings.vue index 5b136a8cca..9fa5606c5a 100644 --- a/packages/playground/src/views/settings.vue +++ b/packages/playground/src/views/settings.vue @@ -7,7 +7,7 @@ Theme Pick an application theme! - + { + selectedTheme.value = currentTheme.value = `${theme} Mode`; + }); + const deploymentTimeoutdefaultMinutes = gridStore?.client.clientOptions.deploymentTimeoutMinutes; const selectedDeploymentTimeout = ref(0); const currentDeploymentTimeout = ref(0); @@ -238,7 +242,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; From 28c21e8832d7aade317a2938311ddb586f7423e9 Mon Sep 17 00:00:00 2001 From: samaradel Date: Thu, 17 Oct 2024 17:26:16 +0300 Subject: [PATCH 2/4] Fix switching theme on refresh --- packages/playground/src/components/app_theme.vue | 10 +++++++--- packages/playground/src/views/settings.vue | 8 ++++++-- 2 files changed, 13 insertions(+), 5 deletions(-) diff --git a/packages/playground/src/components/app_theme.vue b/packages/playground/src/components/app_theme.vue index 01d2d6595f..397c687d35 100644 --- a/packages/playground/src/components/app_theme.vue +++ b/packages/playground/src/components/app_theme.vue @@ -12,7 +12,7 @@ diff --git a/packages/playground/src/views/settings.vue b/packages/playground/src/views/settings.vue index 9fa5606c5a..005128eabb 100644 --- a/packages/playground/src/views/settings.vue +++ b/packages/playground/src/views/settings.vue @@ -212,7 +212,8 @@ export default { }); watch(theme.global.name, theme => { - selectedTheme.value = currentTheme.value = `${theme} Mode`; + selectedTheme.value = currentTheme.value = theme.includes("mode") ? theme : `${theme} mode`; + localStorage.setItem(LocalStorageSettingsKey.THEME_KEY, theme); }); const deploymentTimeoutdefaultMinutes = gridStore?.client.clientOptions.deploymentTimeoutMinutes; @@ -223,6 +224,8 @@ export default { const isValidPassword = ref(false); onMounted(async () => { + if (!selectedTheme.value) return; + selectedTheme.value = selectedTheme.value.includes("mode") ? selectedTheme.value : `${selectedTheme.value} mode`; currentQueryTimeout.value = +localStorage.getItem(LocalStorageSettingsKey.TIMEOUT_QUERY_KEY)!; selectedQueryTimeout.value = currentQueryTimeout.value; if (localStorage.getItem(LocalStorageSettingsKey.TIMEOUT_DEPLOYMENT_KEY)) { @@ -235,7 +238,8 @@ export default { }); function isCurrentTheme() { - return selectedTheme.value == currentTheme.value; + if (!currentTheme.value) return; + return selectedTheme.value?.includes(currentTheme.value); } function UpdateTheme() { switch (selectedTheme.value) { From f34c145ede2747e0d8213a02b0870e2b5d7e51c6 Mon Sep 17 00:00:00 2001 From: samaradel Date: Thu, 17 Oct 2024 17:36:00 +0300 Subject: [PATCH 3/4] Add watch option --- packages/playground/src/views/settings.vue | 14 ++++++++------ 1 file changed, 8 insertions(+), 6 deletions(-) diff --git a/packages/playground/src/views/settings.vue b/packages/playground/src/views/settings.vue index 005128eabb..e8dd13f360 100644 --- a/packages/playground/src/views/settings.vue +++ b/packages/playground/src/views/settings.vue @@ -211,10 +211,14 @@ export default { } }); - watch(theme.global.name, theme => { - selectedTheme.value = currentTheme.value = theme.includes("mode") ? theme : `${theme} mode`; - localStorage.setItem(LocalStorageSettingsKey.THEME_KEY, theme); - }); + 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); @@ -224,8 +228,6 @@ export default { const isValidPassword = ref(false); onMounted(async () => { - if (!selectedTheme.value) return; - selectedTheme.value = selectedTheme.value.includes("mode") ? selectedTheme.value : `${selectedTheme.value} mode`; currentQueryTimeout.value = +localStorage.getItem(LocalStorageSettingsKey.TIMEOUT_QUERY_KEY)!; selectedQueryTimeout.value = currentQueryTimeout.value; if (localStorage.getItem(LocalStorageSettingsKey.TIMEOUT_DEPLOYMENT_KEY)) { From 5b97678c52a9190a05011345b189e4f13266924a Mon Sep 17 00:00:00 2001 From: samaradel Date: Mon, 21 Oct 2024 16:19:40 +0300 Subject: [PATCH 4/4] Fix app theme --- packages/playground/src/App.vue | 32 +++++++++++++--------- packages/playground/src/utils/app_theme.ts | 1 + packages/playground/src/views/settings.vue | 3 +- 3 files changed, 21 insertions(+), 15 deletions(-) diff --git a/packages/playground/src/App.vue b/packages/playground/src/App.vue index 27738d3d90..4379d4292d 100644 --- 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/utils/app_theme.ts b/packages/playground/src/utils/app_theme.ts index 2a5568b4f2..35c1780dd3 100644 --- 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 index e8dd13f360..1af0a12c60 100644 --- a/packages/playground/src/views/settings.vue +++ b/packages/playground/src/views/settings.vue @@ -240,8 +240,7 @@ export default { }); function isCurrentTheme() { - if (!currentTheme.value) return; - return selectedTheme.value?.includes(currentTheme.value); + return selectedTheme.value == currentTheme.value; } function UpdateTheme() { switch (selectedTheme.value) {