Next iteration

owncloud · Nov 7, 2023 · a231701 · a231701
1 parent 7e0c956
commit a231701
Show file tree

Hide file tree

Showing 6 changed files with 20 additions and 28 deletions.
diff --git a/packages/web-pkg/src/composables/piniaStores/theme.ts b/packages/web-pkg/src/composables/piniaStores/theme.ts
@@ -1,6 +1,6 @@
 import { defineStore } from 'pinia'
-import { ref, computed } from 'vue'
-import { ThemeName } from '../../../../web-runtime/src/composables/theme/useDefaultThemeName'
+import { ref, computed, unref } from 'vue'
+import { useLocalStorage, usePreferredDark } from '@vueuse/core'
 
 interface CommonTheme {
   name: string
@@ -33,6 +33,11 @@ interface WebTheme {
   }
 }
 
+const themeNameLight = 'default'
+const themeNameDark = 'default-dark'
+
+type ThemeName = typeof themeNameDark | typeof themeNameLight
+
 export const useThemeStore = defineStore('theme', () => {
   const commonTheme = ref<CommonTheme | undefined>()
   const currentTheme = ref<WebTheme | undefined>()
@@ -48,17 +53,19 @@ export const useThemeStore = defineStore('theme', () => {
       availableThemes.value.some((x) => x.isDark !== true)
   )
 
-  const initializeThemes = (
-    themes: WebTheme[],
-    newCommonTheme: CommonTheme,
-    defaultThemeName: ThemeName
-  ) => {
+  const initializeThemes = (themes: WebTheme[], newCommonTheme: CommonTheme) => {
     availableThemes.value = themes
     commonTheme.value = newCommonTheme
 
+    const currentThemeName = useLocalStorage('oc_currentThemeName', null) // note: use null as default so that we can fall back to system preferences
+    // Set default fallback theme names
+    if (unref(currentThemeName) === null) {
+      currentThemeName.value = usePreferredDark().value ? themeNameDark : themeNameLight
+    }
+
     // TODO: Fix this by passing full theme?
     // TODO: Discuss handling (former) default scenario
-    setCurrentTheme(availableThemes.value.find((x) => x.general.name === defaultThemeName))
+    setCurrentTheme(availableThemes.value.find((x) => x.general.name === currentThemeName.value))
   }
 
   const setCurrentTheme = (theme: WebTheme) => {

diff --git a/packages/web-runtime/src/composables/index.ts b/packages/web-runtime/src/composables/index.ts
diff --git a/packages/web-runtime/src/composables/theme/index.ts b/packages/web-runtime/src/composables/theme/index.ts
diff --git a/packages/web-runtime/src/composables/theme/useDefaultThemeName.ts b/packages/web-runtime/src/composables/theme/useDefaultThemeName.ts
diff --git a/packages/web-runtime/src/container/bootstrap.ts b/packages/web-runtime/src/container/bootstrap.ts
@@ -3,13 +3,12 @@ import { RuntimeConfiguration } from './types'
 import { buildApplication, NextApplication } from './application'
 import { Store } from 'vuex'
 import { Router } from 'vue-router'
-import { App, computed, unref } from 'vue'
+import { App, computed } from 'vue'
 import { loadTheme } from '../helpers/theme'
 import OwnCloud from 'owncloud-sdk'
 import { createGettext, GetTextOptions, Language } from 'vue3-gettext'
 import { getBackendVersion, getWebVersion } from './versions'
-import { useLocalStorage, useThemeStore } from '@ownclouders/web-pkg'
-import { useDefaultThemeName } from '../composables'
+import { useThemeStore } from '@ownclouders/web-pkg'
 import { authService } from '../services/auth'
 import {
   ClientService,
@@ -288,12 +287,8 @@ export const announceTheme = async ({
   const { currentTheme, initializeThemes } = useThemeStore()
 
   const { web, common } = await loadTheme(runtimeConfiguration?.theme)
-  const currentThemeName = useLocalStorage('oc_currentThemeName', null) // note: use null as default so that we can fall back to system preferences
-  if (unref(currentThemeName) === null) {
-    currentThemeName.value = useDefaultThemeName()
-  }
 
-  await initializeThemes([web], common, unref(currentThemeName))
+  await initializeThemes([web], common)
 
   app.use(designSystem, {
     tokens: currentTheme.designTokens

diff --git a/packages/web-runtime/src/helpers/theme.ts b/packages/web-runtime/src/helpers/theme.ts
@@ -3,7 +3,7 @@ import defaultTheme from '../../themes/owncloud/theme.json'
 import { v4 as uuidV4 } from 'uuid'
 
 export const loadTheme = async (location = '') => {
-  const defaults = { web: defaultTheme.web || defaultTheme, common: defaultTheme.common || {} }
+  const defaults = { web: defaultTheme.web, common: defaultTheme.common }
 
   if (location.split('.').pop() !== 'json') {
     if (isEqual(process.env.NODE_ENV, 'development')) {
@@ -18,7 +18,7 @@ export const loadTheme = async (location = '') => {
       return defaults
     }
     const theme = await response.json()
-    return { web: theme.web || theme, common: theme.common || {} }
+    return { web: theme.web, common: theme.common || {} }
   } catch (e) {
     console.error(
       `Failed to load theme '${location}' is not a valid json file, using default theme.`