From 298cd1afae8204ee44c1849aab80166245ffc4bb Mon Sep 17 00:00:00 2001
From: wvffle <funkwhale@wvffle.net>
Date: Wed, 2 Nov 2022 18:14:01 +0000
Subject: [PATCH] Add selected theme computed

---
 front/src/components/Sidebar.vue          |  2 +-
 front/src/components/common/UserMenu.vue  |  2 +-
 front/src/components/common/UserModal.vue |  2 +-
 front/src/composables/useTheme.ts         | 14 ++++++++++++--
 4 files changed, 15 insertions(+), 5 deletions(-)

diff --git a/front/src/components/Sidebar.vue b/front/src/components/Sidebar.vue
index f8ce4441b..0a7b4498d 100644
--- a/front/src/components/Sidebar.vue
+++ b/front/src/components/Sidebar.vue
@@ -28,7 +28,7 @@ const emit = defineEmits<Events>()
 defineProps<Props>()
 
 const store = useStore()
-const theme = useTheme()
+const { theme } = useTheme()
 const themes = useThemeList()
 const { $pgettext } = useGettext()
 
diff --git a/front/src/components/common/UserMenu.vue b/front/src/components/common/UserMenu.vue
index 6037eccea..056ee6204 100644
--- a/front/src/components/common/UserMenu.vue
+++ b/front/src/components/common/UserMenu.vue
@@ -13,7 +13,7 @@ const emit = defineEmits<Events>()
 
 const { $pgettext } = useGettext()
 const themes = useThemeList()
-const theme = useTheme()
+const { theme } = useTheme()
 
 const labels = computed(() => ({
   profile: $pgettext('*/*/*/Noun', 'Profile'),
diff --git a/front/src/components/common/UserModal.vue b/front/src/components/common/UserModal.vue
index 58e261980..77a6e5d2a 100644
--- a/front/src/components/common/UserModal.vue
+++ b/front/src/components/common/UserModal.vue
@@ -21,7 +21,7 @@ const props = defineProps<Props>()
 
 const show = useVModel(props, 'show', emit)
 
-const theme = useTheme()
+const { theme } = useTheme()
 const themes = useThemeList()
 
 const { $pgettext } = useGettext()
diff --git a/front/src/composables/useTheme.ts b/front/src/composables/useTheme.ts
index cfe3e9d2d..5d922c332 100644
--- a/front/src/composables/useTheme.ts
+++ b/front/src/composables/useTheme.ts
@@ -1,4 +1,5 @@
-import { useColorMode } from '@vueuse/core'
+import { useColorMode, usePreferredDark } from '@vueuse/core'
+import { computed } from 'vue'
 
 const theme = useColorMode({
   selector: 'body',
@@ -10,4 +11,13 @@ const theme = useColorMode({
   emitAuto: true
 })
 
-export default () => theme
+const preferredDark = usePreferredDark({ window })
+const selectedTheme = computed(() => theme.value === 'auto'
+  ? preferredDark.value ? 'dark' : 'light'
+  : theme.value
+)
+
+export default () => ({
+  theme,
+  selectedTheme
+})