From 6146ce3e6580c892b441fcd33f9c5cd3d2adb6fa Mon Sep 17 00:00:00 2001 From: pat-s Date: Tue, 30 Jan 2024 09:28:49 +0100 Subject: [PATCH 1/8] reload site on theme change --- web/src/compositions/useTheme.ts | 16 ++++++++++++++-- 1 file changed, 14 insertions(+), 2 deletions(-) diff --git a/web/src/compositions/useTheme.ts b/web/src/compositions/useTheme.ts index 159fe8ed9a..1a7d27255b 100644 --- a/web/src/compositions/useTheme.ts +++ b/web/src/compositions/useTheme.ts @@ -1,3 +1,4 @@ +import { onMounted, onUnmounted } from 'vue'; import { useColorMode } from '@vueuse/core'; import { watch } from 'vue'; @@ -21,11 +22,22 @@ function updateTheme() { watch(storeTheme, updateTheme); -updateTheme(); - export function useTheme() { + let mql: MediaQueryList; + + onMounted(() => { + mql = window.matchMedia('(prefers-color-scheme: dark)'); + mql.addEventListener('change', updateTheme); + }); + + onUnmounted(() => { + mql.removeEventListener('change', updateTheme); + }); + return { theme: resolvedTheme, storeTheme, }; } + +updateTheme(); From 1686b85db86ca243ea7aaf0d842b238d898b43d2 Mon Sep 17 00:00:00 2001 From: pat-s Date: Tue, 30 Jan 2024 09:44:47 +0100 Subject: [PATCH 2/8] sort --- web/src/compositions/useTheme.ts | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/web/src/compositions/useTheme.ts b/web/src/compositions/useTheme.ts index 1a7d27255b..a9aa777128 100644 --- a/web/src/compositions/useTheme.ts +++ b/web/src/compositions/useTheme.ts @@ -1,6 +1,5 @@ -import { onMounted, onUnmounted } from 'vue'; import { useColorMode } from '@vueuse/core'; -import { watch } from 'vue'; +import { onMounted, onUnmounted, watch } from 'vue'; const { store: storeTheme, state: resolvedTheme } = useColorMode({ storageKey: 'woodpecker:theme', From d6e0df0d9eb3d1bfd26caf8b0e16e45d954d9f8f Mon Sep 17 00:00:00 2001 From: Patrick Schratz Date: Tue, 30 Jan 2024 10:14:46 +0100 Subject: [PATCH 3/8] Update web/src/compositions/useTheme.ts Co-authored-by: Anbraten --- web/src/compositions/useTheme.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/web/src/compositions/useTheme.ts b/web/src/compositions/useTheme.ts index a9aa777128..5050337d12 100644 --- a/web/src/compositions/useTheme.ts +++ b/web/src/compositions/useTheme.ts @@ -19,7 +19,7 @@ function updateTheme() { } } -watch(storeTheme, updateTheme); +watch([storeTheme, systemTheme], updateTheme); export function useTheme() { let mql: MediaQueryList; From e1810e10b452a3e743cefb2ab7b25fb70de2a583 Mon Sep 17 00:00:00 2001 From: Patrick Schratz Date: Tue, 30 Jan 2024 10:14:51 +0100 Subject: [PATCH 4/8] Update web/src/compositions/useTheme.ts Co-authored-by: Anbraten --- web/src/compositions/useTheme.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/web/src/compositions/useTheme.ts b/web/src/compositions/useTheme.ts index 5050337d12..8e12f50591 100644 --- a/web/src/compositions/useTheme.ts +++ b/web/src/compositions/useTheme.ts @@ -1,7 +1,7 @@ import { useColorMode } from '@vueuse/core'; import { onMounted, onUnmounted, watch } from 'vue'; -const { store: storeTheme, state: resolvedTheme } = useColorMode({ +const { store: storeTheme, state: resolvedTheme, system: systemTheme } = useColorMode({ storageKey: 'woodpecker:theme', }); From 15f08c4742311a4928c757ae8c5736b9a8968c1b Mon Sep 17 00:00:00 2001 From: Patrick Schratz Date: Tue, 30 Jan 2024 10:26:44 +0100 Subject: [PATCH 5/8] Update web/src/compositions/useTheme.ts Co-authored-by: Anbraten --- web/src/compositions/useTheme.ts | 11 ----------- 1 file changed, 11 deletions(-) diff --git a/web/src/compositions/useTheme.ts b/web/src/compositions/useTheme.ts index 8e12f50591..1b329527f4 100644 --- a/web/src/compositions/useTheme.ts +++ b/web/src/compositions/useTheme.ts @@ -22,17 +22,6 @@ function updateTheme() { watch([storeTheme, systemTheme], updateTheme); export function useTheme() { - let mql: MediaQueryList; - - onMounted(() => { - mql = window.matchMedia('(prefers-color-scheme: dark)'); - mql.addEventListener('change', updateTheme); - }); - - onUnmounted(() => { - mql.removeEventListener('change', updateTheme); - }); - return { theme: resolvedTheme, storeTheme, From 31321a9b5bc0b4add732fedbd25de4c511e54026 Mon Sep 17 00:00:00 2001 From: Patrick Schratz Date: Tue, 30 Jan 2024 10:26:48 +0100 Subject: [PATCH 6/8] Update web/src/compositions/useTheme.ts Co-authored-by: Anbraten --- web/src/compositions/useTheme.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/web/src/compositions/useTheme.ts b/web/src/compositions/useTheme.ts index 1b329527f4..b3af67b0fa 100644 --- a/web/src/compositions/useTheme.ts +++ b/web/src/compositions/useTheme.ts @@ -19,7 +19,7 @@ function updateTheme() { } } -watch([storeTheme, systemTheme], updateTheme); +watch([storeTheme, systemTheme], updateTheme, { immediate: true }); export function useTheme() { return { From 79133f79eae945ed02c35120733c47b8dd19aee3 Mon Sep 17 00:00:00 2001 From: Patrick Schratz Date: Tue, 30 Jan 2024 10:26:53 +0100 Subject: [PATCH 7/8] Update web/src/compositions/useTheme.ts Co-authored-by: Anbraten --- web/src/compositions/useTheme.ts | 2 -- 1 file changed, 2 deletions(-) diff --git a/web/src/compositions/useTheme.ts b/web/src/compositions/useTheme.ts index b3af67b0fa..de6649aea7 100644 --- a/web/src/compositions/useTheme.ts +++ b/web/src/compositions/useTheme.ts @@ -27,5 +27,3 @@ export function useTheme() { storeTheme, }; } - -updateTheme(); From 9709d40e2c0dd6b69f60648a513e8403628b9a47 Mon Sep 17 00:00:00 2001 From: pat-s Date: Tue, 30 Jan 2024 10:33:17 +0100 Subject: [PATCH 8/8] lint --- web/src/compositions/useTheme.ts | 8 ++++++-- 1 file changed, 6 insertions(+), 2 deletions(-) diff --git a/web/src/compositions/useTheme.ts b/web/src/compositions/useTheme.ts index de6649aea7..8476cb925a 100644 --- a/web/src/compositions/useTheme.ts +++ b/web/src/compositions/useTheme.ts @@ -1,7 +1,11 @@ import { useColorMode } from '@vueuse/core'; -import { onMounted, onUnmounted, watch } from 'vue'; +import { watch } from 'vue'; -const { store: storeTheme, state: resolvedTheme, system: systemTheme } = useColorMode({ +const { + store: storeTheme, + state: resolvedTheme, + system: systemTheme, +} = useColorMode({ storageKey: 'woodpecker:theme', });