feat(gui-v2): add a simple color picker for primary theme color

packages/nc-gui-v2/components.d.ts

@@ -71,6 +71,8 @@ declare module '@vue/runtime-core' {
     BiFiletypeXlsx: typeof import('~icons/bi/filetype-xlsx')['default']
     CilFullscreen: typeof import('~icons/cil/fullscreen')['default']
     CilFullscreenExit: typeof import('~icons/cil/fullscreen-exit')['default']
+    ClarityColorPickerLine: typeof import('~icons/clarity/color-picker-line')['default']
+    ClarityImageLine: typeof import('~icons/clarity/image-line')['default']
     ClaritySuccessLine: typeof import('~icons/clarity/success-line')['default']
     EvaEmailOutline: typeof import('~icons/eva/email-outline')['default']
     IcBaselineMoreVert: typeof import('~icons/ic/baseline-more-vert')['default']

packages/nc-gui-v2/components/general/ColorPicker.vue

@@ -1,7 +1,6 @@
 <script lang="ts" setup>
 import { Chrome } from '@ckpack/vue-color'
-import { enumColor } from '@/utils'
-import { computed, ref, watch } from '#imports'
+import { computed, enumColor, ref, watch } from '#imports'
 
 interface Props {
   modelValue?: string | any

packages/nc-gui-v2/layouts/base.vue

@@ -36,7 +36,7 @@ const logout = () => {
             <img width="35" alt="NocoDB" src="~/assets/img/icons/512x512-trans.png" />
           </div>
 
-          <div class="flex justify-center">
+          <div class="!text-white flex justify-center">
             <div v-show="isLoading" class="flex items-center gap-2 ml-3">
               {{ $t('general.loading') }}
 

packages/nc-gui-v2/nuxt-shim.d.ts

@@ -29,5 +29,6 @@ declare module 'vue-router' {
   interface RouteMeta {
     requiresAuth?: boolean
     public?: boolean
+    hideHeader?: boolean
   }
 }

packages/nc-gui-v2/pages/[projectType]/[projectId]/index.vue

@@ -1,6 +1,9 @@
 <script setup lang="ts">
+import { Chrome } from '@ckpack/vue-color'
 import { message } from 'ant-design-vue'
 import {
+  computed,
+  definePageMeta,
   navigateTo,
   onKeyStroke,
   openLink,
@@ -12,10 +15,16 @@ import {
   useProject,
   useRoute,
   useTabs,
+  useTheme,
   useUIPermission,
+  watch,
 } from '#imports'
 import { TabType } from '~/composables'
 
+definePageMeta({
+  hideHeader: true,
+})
+
 const route = useRoute()
 
 const { appInfo, token, signOut, signedIn, user } = useGlobal()
@@ -41,16 +50,30 @@ const openDialogKey = ref<string>()
 
 const dropdownOpen = ref(false)
 
+/** Sidebar ref */
+const sidebar = ref()
+
+const pickedColor = ref<any>('')
+
+const pickerActive = ref(false)
+
 const email = computed(() => user.value?.email ?? '---')
 
+const { setTheme } = useTheme()
+
+watch(pickedColor, (nextColor) => {
+  if (nextColor) {
+    setTheme({
+      primaryColor: nextColor.hex,
+    })
+  }
+})
+
 const logout = () => {
   signOut()
   navigateTo('/signin')
 }
 
-/** Sidebar ref */
-const sidebar = ref()
-
 onKeyStroke(
   'Escape',
   () => {
@@ -101,10 +124,6 @@ const copyAuthToken = async () => {
     message.error(e.message)
   }
 }
-
-definePageMeta({
-  hideHeader: true,
-})
 </script>
 
 <template>
@@ -309,6 +328,17 @@ definePageMeta({
                       </a-menu-item>
                     </a-sub-menu>
                   </template>
+
+                  <a-menu-divider />
+
+                  <a-menu-item class="relative">
+                    <div class="nc-project-menu-item group" @click.stop="pickerActive = !pickerActive">
+                      <ClarityImageLine class="group-hover:text-accent" />
+                      Theme
+
+                      <Chrome v-if="pickerActive" v-model="pickedColor" class="absolute top-0 right-5" @click.stop />
+                    </div>
+                  </a-menu-item>
                 </a-menu-item-group>
               </a-menu>
             </template>