feat(gui-v2): add colors composable

packages/nc-gui-v2/composables/useColors.ts

@@ -0,0 +1,27 @@
+import type { MaybeRef } from '@vueuse/core'
+import { unref } from '@vue/reactivity'
+import { useNuxtApp } from '#app'
+import theme from '~/utils/colorsUtils'
+
+export default function useColors(darkMode?: MaybeRef<boolean>) {
+  let mode = $ref(unref(darkMode))
+  const { $state } = useNuxtApp()
+
+  if (!mode) mode = $state.value.darkMode
+
+  watch(
+    () => $state.value.darkMode,
+    (newMode) => {
+      mode = newMode
+    },
+  )
+
+  watchEffect(() => {
+    const newMode = unref(darkMode)
+    if (newMode) mode = newMode
+  })
+
+  const colors = computed(() => (mode ? theme.dark : theme.light))
+
+  return { colors, getColorByIndex: (i: number) => colors.value[i % colors.value.length] }
+}

packages/nc-gui-v2/composables/useGlobalState.ts

@@ -1,4 +1,4 @@
-import { createGlobalState, usePreferredLanguages, useStorage } from '@vueuse/core'
+import { createGlobalState, usePreferredDark, usePreferredLanguages, useStorage } from '@vueuse/core'
 import type { GlobalState } from '~/lib/types'
 
 const storageKey = 'nocodb-gui-v2'
@@ -8,7 +8,8 @@ const storageKey = 'nocodb-gui-v2'
  */
 export const useGlobalState = () => {
   const preferredLanguages = $(usePreferredLanguages())
+  const darkMode = $(usePreferredDark())
   return createGlobalState(() =>
-    useStorage<GlobalState>(storageKey, { token: undefined, user: undefined, lang: preferredLanguages[0] || 'en' }),
+    useStorage<GlobalState>(storageKey, { token: undefined, user: undefined, lang: preferredLanguages[0] || 'en', darkMode }),
   )
 }

packages/nc-gui-v2/lib/types.ts

@@ -2,4 +2,5 @@ export interface GlobalState {
   token?: string
   user?: Record<string, any>
   lang: string
+  darkMode: boolean
 }

packages/nc-gui-v2/nuxt.config.ts

@@ -9,7 +9,7 @@ export default defineNuxtConfig({
 
   ssr: false,
 
-  css: ['virtual:windi.css', 'virtual:windi-devtools', 'vuetify/lib/styles/main.sass'],
+  css: ['virtual:windi.css', 'virtual:windi-devtools', 'vuetify/lib/styles/main.sass', '~/assets/style.css', '~/assets/css/global.css'],
 
   build: {
     transpile: ['vuetify'],