Add selected theme computed

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()
 

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'),

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()

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
+})