From 043443322bf3180ab23690f25444bc093861f5f3 Mon Sep 17 00:00:00 2001
From: braks <78412429+bcakmakoglu@users.noreply.github.com>
Date: Mon, 19 Sep 2022 21:18:40 +0200
Subject: [PATCH] refactor(nc-gui): use global state for useTheme

---
 packages/nc-gui/app.vue                       |  4 +---
 packages/nc-gui/composables/useTheme/index.ts | 20 +++----------------
 2 files changed, 4 insertions(+), 20 deletions(-)

diff --git a/packages/nc-gui/app.vue b/packages/nc-gui/app.vue
index 46c1784d71..933ebfc3d6 100644
--- a/packages/nc-gui/app.vue
+++ b/packages/nc-gui/app.vue
@@ -1,11 +1,9 @@
 <script setup lang="ts">
-import { computed, provideTheme, useRoute } from '#imports'
+import { computed, useRoute } from '#imports'
 
 const route = useRoute()
 
 const disableBaseLayout = computed(() => route.path.startsWith('/nc/view') || route.path.startsWith('/nc/form'))
-
-provideTheme()
 </script>
 
 <template>
diff --git a/packages/nc-gui/composables/useTheme/index.ts b/packages/nc-gui/composables/useTheme/index.ts
index 8370380855..f0b4eb0220 100644
--- a/packages/nc-gui/composables/useTheme/index.ts
+++ b/packages/nc-gui/composables/useTheme/index.ts
@@ -1,14 +1,14 @@
 import { ConfigProvider } from 'ant-design-vue'
 import type { Theme as AntTheme } from 'ant-design-vue/es/config-provider'
 import tinycolor from 'tinycolor2'
-import { hexToRGB, themeV2Colors, useCssVar, useInjectionState } from '#imports'
+import { createGlobalState, hexToRGB, ref, themeV2Colors, useCssVar } from '#imports'
 
 export interface ThemeConfig extends AntTheme {
   primaryColor: string
   accentColor: string
 }
 
-const [setup, use] = useInjectionState((config?: Partial<ThemeConfig>) => {
+export const useTheme = createGlobalState((config?: Partial<ThemeConfig>) => {
   const primaryColor = useCssVar('--color-primary', typeof document !== 'undefined' ? document.documentElement : null)
   const accentColor = useCssVar('--color-accent', typeof document !== 'undefined' ? document.documentElement : null)
 
@@ -46,18 +46,4 @@ const [setup, use] = useInjectionState((config?: Partial<ThemeConfig>) => {
     theme: currentTheme,
     setTheme,
   }
-}, 'theme')
-
-export const provideTheme = setup
-
-export function useTheme(config?: Partial<ThemeConfig>) {
-  const theme = use()
-
-  if (!theme) {
-    return setup(config)
-  } else {
-    if (config) theme.setTheme(config)
-  }
-
-  return theme
-}
+})