Merge pull request #3368 from nocodb/feat/3345-project-theme

feat(gui-v2): project theme/color

packages/nc-gui-v2/assets/style.scss

@@ -214,10 +214,6 @@ a {
   @apply !p-0 !rounded;
 }
 
-.ant-dropdown-menu-submenu-popup {
-  @apply scrollbar-thin-dull min-w-50 max-h-90vh overflow-auto !shadow !rounded;
-}
-
 .ant-tabs-dropdown-menu-title-content {
   @apply flex items-center;
 }

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

@@ -187,6 +187,7 @@ declare module '@vue/runtime-core' {
     MdiMinusCircleOutline: typeof import('~icons/mdi/minus-circle-outline')['default']
     MdiMoonFull: typeof import('~icons/mdi/moon-full')['default']
     MdiNotebookCheckOutline: typeof import('~icons/mdi/notebook-check-outline')['default']
+    MdiNull: typeof import('~icons/mdi/null')['default']
     MdiNumeric: typeof import('~icons/mdi/numeric')['default']
     MdiOpenInNew: typeof import('~icons/mdi/open-in-new')['default']
     MdiPencil: typeof import('~icons/mdi/pencil')['default']

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

@@ -23,22 +23,22 @@ const emit = defineEmits(['update:modelValue'])
 const vModel = computed({
   get: () => props.modelValue,
   set: (val) => {
-    emit('update:modelValue', val.hex ? val.hex : val || null)
+    emit('update:modelValue', val.hex8 ? val.hex8 : val || null)
   },
 })
 
 const picked = ref<string | Record<string, any>>(props.modelValue || enumColor.light[0])
 
 const selectColor = (color: string | Record<string, any>) => {
-  picked.value = typeof color === 'string' ? color : color.hex ? color.hex : color
+  picked.value = typeof color === 'string' ? color : color.hex8 ? color.hex8 : color
-  vModel.value = typeof color === 'string' ? color : color.hex ? color.hex : color
+  vModel.value = typeof color === 'string' ? color : color.hex8 ? color.hex8 : color
 }
 
 const compare = (colorA: string, colorB: string) => colorA.toLowerCase() === colorB.toLowerCase()
 
 watch(picked, (n, _o) => {
   if (!props.pickButton) {
-    vModel.value = typeof n === 'string' ? n : n.hex ? n.hex : n
+    vModel.value = typeof n === 'string' ? n : n.hex8 ? n.hex8 : n
   }
 })
 </script>
@@ -50,11 +50,11 @@ watch(picked, (n, _o) => {
         v-for="(color, i) of colors.slice((colId - 1) * rowSize, colId * rowSize)"
         :key="`color-${colId}-${i}`"
         class="color-selector"
-        :class="compare(picked, color) ? 'selected' : ''"
+        :class="compare(typeof picked === 'string' ? picked : picked.hex8, color) ? 'selected' : ''"
         :style="{ 'background-color': `${color}` }"
         @click="selectColor(color)"
       >
-        {{ compare(picked, color) ? '&#10003;' : '' }}
+        {{ compare(typeof picked === 'string' ? picked : picked.hex8, color) ? '&#10003;' : '' }}
       </button>
     </div>
     <a-card v-if="props.advanced" class="w-full mt-2" :body-style="{ padding: '0px' }" :bordered="false">

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

@@ -4,6 +4,7 @@ import type { MaybeRef } from '@vueuse/core'
 import { useNuxtApp, useRoute, useState } from '#app'
 import type { ProjectMetaInfo } from '~/lib'
 import { USER_PROJECT_ROLES } from '~/lib'
+import type { ThemeConfig } from '@/composables/useTheme'
 
 export function useProject(projectId?: MaybeRef<string>) {
   const projectRoles = useState<Record<string, boolean>>(USER_PROJECT_ROLES, () => ({}))
@@ -14,9 +15,11 @@ export function useProject(projectId?: MaybeRef<string>) {
   const tables = useState<TableType[]>('tables', () => [] as TableType[])
   const route = useRoute()
   const { includeM2M } = useGlobal()
+  const { setTheme } = useTheme()
   const projectMetaInfo = useState<ProjectMetaInfo | undefined>('projectMetaInfo')
   // todo: refactor path param name and variable name
   const projectType = $computed(() => route.params.projectType as string)
+  const isLoaded = ref(false)
 
   const projectBaseType = $computed(() => project.value?.bases?.[0]?.type || '')
   const isMysql = computed(() => ['mysql', 'mysql2'].includes(projectBaseType))
@@ -27,6 +30,14 @@ export function useProject(projectId?: MaybeRef<string>) {
   )
   const isSharedBase = computed(() => projectType === 'base')
 
+  const projectMeta = computed(() => {
+    try {
+      return typeof project.value.meta === 'string' ? JSON.parse(project.value.meta) : project.value.meta
+    } catch (e) {
+      return {}
+    }
+  })
+
   async function loadProjectMetaInfo(force?: boolean) {
     if (!projectMetaInfo.value || force) {
       const data = await $api.project.metaGet(project.value.id!, {}, {})
@@ -71,16 +82,51 @@ export function useProject(projectId?: MaybeRef<string>) {
     } else {
       _projectId = route.params.projectId as string
     }
+    isLoaded.value = true
     project.value = await $api.project.read(_projectId!)
     await loadProjectRoles()
     await loadTables()
+    setTheme(projectMeta.value?.theme)
+  }
+
+  async function updateProject(data: Partial<ProjectType>) {
+    if (unref(projectId)) {
+      _projectId = unref(projectId)!
+    } else if (projectType === 'base') {
+      return
+    } else {
+      _projectId = route.params.projectId as string
     }
 
+    await $api.project.update(_projectId, data)
+  }
+
+  async function saveTheme(theme: Partial<ThemeConfig>) {
+    await updateProject({
+      meta: JSON.stringify({
+        ...projectMeta.value,
+        theme,
+      }),
+    })
+    setTheme(theme)
+  }
+
+  onScopeDispose(() => {
+    if (isLoaded.value === true) {
+      project.value = {}
+      tables.value = []
+      projectMetaInfo.value = undefined
+      projectRoles.value = {}
+      setTheme({})
+    }
+  })
+
   return {
     project,
     tables,
     loadProjectRoles,
     loadProject,
+    updateProject,
     loadTables,
     isMysql,
     isMssql,
@@ -89,5 +135,7 @@ export function useProject(projectId?: MaybeRef<string>) {
     isSharedBase,
     loadProjectMetaInfo,
     projectMetaInfo,
+    projectMeta,
+    saveTheme,
   }
 }

packages/nc-gui-v2/composables/useTheme/index.ts

@@ -1,9 +1,9 @@
 import { ConfigProvider } from 'ant-design-vue'
 import type { Theme as AntTheme } from 'ant-design-vue/es/config-provider'
-import { useStorage } from '@vueuse/core'
+import tinycolor from 'tinycolor2'
-import { NOCO, hexToRGB, themeV2Colors, useCssVar, useInjectionState } from '#imports'
+import { hexToRGB, themeV2Colors, useCssVar, useInjectionState } from '#imports'
 
-interface ThemeConfig extends AntTheme {
+export interface ThemeConfig extends AntTheme {
   primaryColor: string
   accentColor: string
 }
@@ -13,29 +13,32 @@ const [setup, use] = useInjectionState((config?: Partial<ThemeConfig>) => {
   const accentColor = useCssVar('--color-accent', typeof document !== 'undefined' ? document.documentElement : null)
 
   /** current theme config */
-  const currentTheme = useStorage<ThemeConfig>(
+  const currentTheme = ref({
-    `${NOCO}db-theme`,
-    {
     primaryColor: themeV2Colors['royal-blue'].DEFAULT,
     accentColor: themeV2Colors.pink['500'],
-    },
+  })
-    localStorage,
-    { mergeDefaults: true },
-  )
 
   /** set initial config */
   setTheme(config ?? currentTheme.value)
 
   /** set theme (persists in localstorage) */
   function setTheme(theme: Partial<ThemeConfig>) {
-    // convert hex colors to rgb values
+    const themePrimary = theme?.primaryColor ? tinycolor(theme.primaryColor) : tinycolor(themeV2Colors['royal-blue'].DEFAULT)
-    if (theme.primaryColor) primaryColor.value = hexToRGB(theme.primaryColor)
+    const themeAccent = theme?.accentColor ? tinycolor(theme.accentColor) : tinycolor(themeV2Colors.pink['500'])
-    if (theme.accentColor) accentColor.value = hexToRGB(theme.accentColor)
 
-    currentTheme.value = theme as ThemeConfig
+    // convert hex colors to rgb values
+    primaryColor.value = themePrimary.isValid()
+      ? hexToRGB(themePrimary.toHex8String())
+      : hexToRGB(themeV2Colors['royal-blue'].DEFAULT)
+    accentColor.value = themeAccent.isValid() ? hexToRGB(themeAccent.toHex8String()) : hexToRGB(themeV2Colors.pink['500'])
+
+    currentTheme.value = {
+      primaryColor: themePrimary.toHex8String().toUpperCase(),
+      accentColor: themeAccent.toHex8String().toUpperCase(),
+    }
 
     ConfigProvider.config({
-      theme,
+      theme: currentTheme.value,
     })
   }
 

packages/nc-gui-v2/package-lock.json

@@ -23,6 +23,7 @@
         "papaparse": "^5.3.2",
         "socket.io-client": "^4.5.1",
         "sortablejs": "^1.15.0",
+        "tinycolor2": "^1.4.2",
         "unique-names-generator": "^4.7.1",
         "vue-dompurify-html": "^3.0.0",
         "vue-github-button": "^3.0.3",
@@ -50,6 +51,7 @@
         "@types/file-saver": "^2.0.5",
         "@types/papaparse": "^5.3.2",
         "@types/sortablejs": "^1.13.0",
+        "@types/tinycolor2": "^1.4.3",
         "@vitest/ui": "^0.18.0",
         "@vue/compiler-sfc": "^3.2.37",
         "@vue/test-utils": "^2.0.2",
@@ -2446,6 +2448,12 @@
       "integrity": "sha512-C3064MH72iEfeGCYEGCt7FCxXoAXaMPG0QPnstcxvPmbl54erpISu06d++FY37Smja64iWy5L8wOyHHBghWbJQ==",
       "dev": true
     },
+    "node_modules/@types/tinycolor2": {
+      "version": "1.4.3",
+      "resolved": "https://registry.npmjs.org/@types/tinycolor2/-/tinycolor2-1.4.3.tgz",
+      "integrity": "sha512-Kf1w9NE5HEgGxCRyIcRXR/ZYtDv0V8FVPtYHwLxl0O+maGX0erE77pQlD0gpP+/KByMZ87mOA79SjifhSB3PjQ==",
+      "dev": true
+    },
     "node_modules/@types/tough-cookie": {
       "version": "4.0.2",
       "resolved": "https://registry.npmjs.org/@types/tough-cookie/-/tough-cookie-4.0.2.tgz",
@@ -13677,6 +13685,14 @@
       "integrity": "sha512-1Uhn/aqw5C6RI4KejVeTg6mIS7IqxnLJ8Mv2tV5rTc0qWobay7pDUz6Wi392Cnc8ak1H0F2cjoRzb2/AW4+Fvg==",
       "dev": true
     },
+    "node_modules/tinycolor2": {
+      "version": "1.4.2",
+      "resolved": "https://registry.npmjs.org/tinycolor2/-/tinycolor2-1.4.2.tgz",
+      "integrity": "sha512-vJhccZPs965sV/L2sU4oRQVAos0pQXwsvTLkWYdqJ+a8Q5kPFzJTuOFwy7UniPli44NKQGAglksjvOcpo95aZA==",
+      "engines": {
+        "node": "*"
+      }
+    },
     "node_modules/tinypool": {
       "version": "0.2.2",
       "resolved": "https://registry.npmjs.org/tinypool/-/tinypool-0.2.2.tgz",
@@ -17077,6 +17093,12 @@
       "integrity": "sha512-C3064MH72iEfeGCYEGCt7FCxXoAXaMPG0QPnstcxvPmbl54erpISu06d++FY37Smja64iWy5L8wOyHHBghWbJQ==",
       "dev": true
     },
+    "@types/tinycolor2": {
+      "version": "1.4.3",
+      "resolved": "https://registry.npmjs.org/@types/tinycolor2/-/tinycolor2-1.4.3.tgz",
+      "integrity": "sha512-Kf1w9NE5HEgGxCRyIcRXR/ZYtDv0V8FVPtYHwLxl0O+maGX0erE77pQlD0gpP+/KByMZ87mOA79SjifhSB3PjQ==",
+      "dev": true
+    },
     "@types/tough-cookie": {
       "version": "4.0.2",
       "resolved": "https://registry.npmjs.org/@types/tough-cookie/-/tough-cookie-4.0.2.tgz",
@@ -25393,6 +25415,11 @@
       "integrity": "sha512-1Uhn/aqw5C6RI4KejVeTg6mIS7IqxnLJ8Mv2tV5rTc0qWobay7pDUz6Wi392Cnc8ak1H0F2cjoRzb2/AW4+Fvg==",
       "dev": true
     },
+    "tinycolor2": {
+      "version": "1.4.2",
+      "resolved": "https://registry.npmjs.org/tinycolor2/-/tinycolor2-1.4.2.tgz",
+      "integrity": "sha512-vJhccZPs965sV/L2sU4oRQVAos0pQXwsvTLkWYdqJ+a8Q5kPFzJTuOFwy7UniPli44NKQGAglksjvOcpo95aZA=="
+    },
     "tinypool": {
       "version": "0.2.2",
       "resolved": "https://registry.npmjs.org/tinypool/-/tinypool-0.2.2.tgz",

packages/nc-gui-v2/package.json

@@ -11,7 +11,6 @@
     "coverage": "vitest -c test/vite.config.ts run --coverage",
     "build:copy": "npm run generate; rm -rf ../nc-lib-gui-v2/lib/dist/; rsync -rvzh ./dist/ ../nc-lib-gui-v2/lib/dist/",
     "build:copy:publish": "npm run generate; rm -rf ../nc-lib-gui-v2/lib/dist/; rsync -rvzh ./dist/ ../nc-lib-gui-v2/lib/dist/; npm publish ../nc-lib-gui-v2"
-
   },
   "dependencies": {
     "@ckpack/vue-color": "^1.2.0",
@@ -32,6 +31,7 @@
     "papaparse": "^5.3.2",
     "socket.io-client": "^4.5.1",
     "sortablejs": "^1.15.0",
+    "tinycolor2": "^1.4.2",
     "unique-names-generator": "^4.7.1",
     "vue-dompurify-html": "^3.0.0",
     "vue-github-button": "^3.0.3",
@@ -59,6 +59,7 @@
     "@types/file-saver": "^2.0.5",
     "@types/papaparse": "^5.3.2",
     "@types/sortablejs": "^1.13.0",
+    "@types/tinycolor2": "^1.4.3",
     "@vitest/ui": "^0.18.0",
     "@vue/compiler-sfc": "^3.2.37",
     "@vue/test-utils": "^2.0.2",

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

@@ -1,9 +1,11 @@
 <script setup lang="ts">
-import { Chrome } from '@ckpack/vue-color'
 import { message } from 'ant-design-vue'
+import { Chrome } from '@ckpack/vue-color'
+import tinycolor from 'tinycolor2'
 import {
   computed,
   definePageMeta,
+  enumColor,
   navigateTo,
   onKeyStroke,
   openLink,
@@ -29,7 +31,7 @@ const route = useRoute()
 
 const { appInfo, token, signOut, signedIn, user } = useGlobal()
 
-const { project, loadProject, loadTables, isSharedBase, loadProjectMetaInfo, projectMetaInfo } = useProject()
+const { project, loadProject, loadTables, isSharedBase, loadProjectMetaInfo, projectMetaInfo, saveTheme } = useProject()
 
 const { addTab, clearTabs } = useTabs()
 
@@ -53,22 +55,9 @@ const dropdownOpen = ref(false)
 /** Sidebar ref */
 const sidebar = ref()
 
-const pickedColor = ref<any>('#ffffff')
-
-let pickerActive = $ref<boolean | 'primary' | 'accent'>(false)
-
 const email = computed(() => user.value?.email ?? '---')
 
-const { setTheme, theme } = useTheme()
+const { theme } = useTheme()
-
-watch(pickedColor, (nextColor) => {
-  if (pickerActive && nextColor.hex) {
-    setTheme({
-      primaryColor: pickerActive === 'primary' ? nextColor.hex : theme.value.primaryColor,
-      accentColor: pickerActive === 'accent' ? nextColor.hex : theme.value.accentColor,
-    })
-  }
-})
 
 const logout = () => {
   signOut()
@@ -94,6 +83,31 @@ await loadProject()
 
 await loadTables()
 
+const themePrimaryColor = ref<any>(theme.value.primaryColor)
+
+const themeAccentColor = ref<any>(theme.value.accentColor)
+
+// Chrome provides object so if custom picker used we only edit primary otherwise use analogous as accent
+watch(themePrimaryColor, (nextColor) => {
+  const hexColor = nextColor.hex ? nextColor.hex : nextColor
+  const tcolor = tinycolor(hexColor)
+  if (tcolor) {
+    const analogous = tcolor.complement()
+    saveTheme({
+      primaryColor: hexColor,
+      accentColor: nextColor.hex ? theme.value.accentColor : analogous.toHexString(),
+    })
+  }
+})
+
+watch(themeAccentColor, (nextColor) => {
+  const hexColor = nextColor.hex ? nextColor.hex : nextColor
+  saveTheme({
+    primaryColor: theme.value.primaryColor,
+    accentColor: hexColor,
+  })
+})
+
 if (!route.params.type && isUIAllowed('teamAndAuth')) {
   addTab({ type: TabType.AUTH, title: 'Team & Auth' })
 }
@@ -125,22 +139,6 @@ const copyAuthToken = async () => {
     message.error(e.message)
   }
 }
-
-const openColorPicker = (type: 'primary' | 'accent') => {
-  if (!pickerActive || pickerActive !== type) {
-    pickedColor.value = type === 'primary' ? theme.value.primaryColor : theme.value.accentColor
-    pickerActive = type
-  } else {
-    pickerActive = false
-  }
-}
-
-const onMenuClose = (visible: boolean) => {
-  if (!visible) {
-    pickedColor.value = '#ffffff'
-    pickerActive = false
-  }
-}
 </script>
 
 <template>
@@ -188,7 +186,7 @@ const onMenuClose = (visible: boolean) => {
             </template>
           </div>
 
-          <a-dropdown v-else class="h-full min-w-0 flex-1" :trigger="['click']" placement="bottom" @visible-change="onMenuClose">
+          <a-dropdown v-else class="h-full min-w-0 flex-1" :trigger="['click']" placement="bottom">
             <div
               :style="{ width: isOpen ? 'calc(100% - 40px) pr-2' : '100%' }"
               :class="[isOpen ? '' : 'justify-center']"
@@ -272,6 +270,63 @@ const onMenuClose = (visible: boolean) => {
                     </div>
                   </a-menu-item>
 
+                  <template v-if="isUIAllowed('projectTheme')">
+                    <a-sub-menu key="theme">
+                      <template #title>
+                        <div class="nc-project-menu-item group">
+                          <ClarityImageLine class="group-hover:text-accent" />
+                          Project Theme
+
+                          <div class="flex-1" />
+
+                          <MaterialSymbolsChevronRightRounded
+                            class="transform group-hover:(scale-115 text-accent) text-xl text-gray-400"
+                          />
+                        </div>
+                      </template>
+
+                      <template #expandIcon></template>
+
+                      <GeneralColorPicker v-model="themePrimaryColor" :colors="enumColor.dark" :row-size="5" :advanced="false" />
+                      <a-sub-menu key="theme-2">
+                        <template #title>
+                          <div class="nc-project-menu-item group">
+                            Custom Theme
+
+                            <div class="flex-1" />
+
+                            <MaterialSymbolsChevronRightRounded
+                              class="transform group-hover:(scale-115 text-accent) text-xl text-gray-400"
+                            />
+                          </div>
+                        </template>
+
+                        <template #expandIcon></template>
+                        <a-sub-menu key="pick-primary">
+                          <template #title>
+                            <div class="nc-project-menu-item group">
+                              <ClarityColorPickerSolid class="group-hover:text-accent" />
+                              Primary Color
+                            </div>
+                          </template>
+                          <template #expandIcon></template>
+                          <Chrome v-model="themePrimaryColor" />
+                        </a-sub-menu>
+
+                        <a-sub-menu key="pick-accent">
+                          <template #title>
+                            <div class="nc-project-menu-item group">
+                              <ClarityColorPickerSolid class="group-hover:text-accent" />
+                              Accent Color
+                            </div>
+                          </template>
+                          <template #expandIcon></template>
+                          <Chrome v-model="themeAccentColor" />
+                        </a-sub-menu>
+                      </a-sub-menu>
+                    </a-sub-menu>
+                  </template>
+
                   <a-menu-divider />
 
                   <a-sub-menu v-if="isUIAllowed('previewAs')" key="preview-as">
@@ -293,7 +348,11 @@ const onMenuClose = (visible: boolean) => {
                     <GeneralPreviewAs />
                   </a-sub-menu>
 
-                  <a-sub-menu key="language" class="lang-menu scrollbar-thin-dull min-w-50 max-h-90vh overflow-auto !py-0">
+                  <a-sub-menu
+                    key="language"
+                    class="lang-menu !py-0"
+                    popup-class-name="scrollbar-thin-dull min-w-50 max-h-90vh !overflow-auto"
+                  >
                     <template #title>
                       <div class="nc-project-menu-item group">
                         <MaterialSymbolsTranslate class="group-hover:text-accent nc-language" />
@@ -345,47 +404,6 @@ const onMenuClose = (visible: boolean) => {
                       </a-menu-item>
                     </a-sub-menu>
                   </template>
-
-                  <a-menu-divider />
-
-                  <a-sub-menu>
-                    <template #title>
-                      <div class="nc-project-menu-item group">
-                        <ClarityImageLine class="group-hover:text-accent" />
-                        Theme
-
-                        <div class="flex-1" />
-
-                        <MaterialSymbolsChevronRightRounded
-                          class="transform group-hover:(scale-115 text-accent) text-xl text-gray-400"
-                        />
-                      </div>
-                    </template>
-
-                    <template #expandIcon></template>
-
-                    <a-menu-item>
-                      <div class="nc-project-menu-item group" @click.stop="openColorPicker('primary')">
-                        <ClarityColorPickerSolid class="group-hover:text-accent" />
-                        Primary Color
-                      </div>
-                    </a-menu-item>
-
-                    <a-menu-item>
-                      <div class="nc-project-menu-item group" @click.stop="openColorPicker('accent')">
-                        <ClarityColorPickerSolid class="group-hover:text-accent" />
-                        Accent Color
-                      </div>
-                    </a-menu-item>
-                  </a-sub-menu>
-
-                  <Chrome
-                    v-if="pickerActive"
-                    v-model="pickedColor"
-                    class="z-99 absolute right-[-225px]"
-                    @click.stop
-                    @blur="onMenuClose(false)"
-                  />
                 </a-menu-item-group>
               </a-menu>
             </template>

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

@@ -1,7 +1,8 @@
 <script lang="ts" setup>
 import type { Form } from 'ant-design-vue'
-import type { ProjectType } from 'nocodb-sdk'
 import { message } from 'ant-design-vue'
+import type { ProjectType } from 'nocodb-sdk'
+import tinycolor from 'tinycolor2'
 import {
   extractSdkResponseErrorMsg,
   navigateTo,
@@ -15,12 +16,16 @@ import {
   useSidebar,
 } from '#imports'
 
-const { api, isLoading } = useApi()
+const { isLoading } = useApi()
 
 useSidebar({ hasSidebar: false })
 
 const route = useRoute()
 
+const { project, loadProject, updateProject } = useProject(route.params.id as string)
+
+await loadProject()
+
 const nameValidationRules = [
   {
     required: true,
@@ -31,22 +36,15 @@ const nameValidationRules = [
 
 const form = ref<typeof Form>()
 
-const formState = reactive({
+const formState = reactive<Partial<ProjectType>>({
   title: '',
+  color: '#FFFFFF00',
 })
 
-const getProject = async () => {
-  try {
-    const result: ProjectType = await api.project.read(route.params.id as string)
-    formState.title = result.title as string
-  } catch (e: any) {
-    message.error(await extractSdkResponseErrorMsg(e))
-  }
-}
-
 const renameProject = async () => {
+  formState.color = formState.color === '#FFFFFF00' ? '' : formState.color
   try {
-    await api.project.update(route.params.id as string, formState)
+    await updateProject(formState)
 
     navigateTo(`/nc/${route.params.id}`)
   } catch (e: any) {
@@ -56,6 +54,8 @@ const renameProject = async () => {
 
 // select and focus title field on load
 onMounted(async () => {
+  formState.title = project.value.title as string
+  formState.color = project.value.color && tinycolor(project.value.color).isValid() ? project.value.color : '#FFFFFF00'
   await nextTick(() => {
     // todo: replace setTimeout and follow better approach
     setTimeout(() => {
@@ -67,8 +67,6 @@ onMounted(async () => {
     }, 500)
   })
 })
-
-await getProject()
 </script>
 
 <template>
@@ -100,6 +98,27 @@ await getProject()
         <a-input v-model:value="formState.title" name="title" class="nc-metadb-project-name" />
       </a-form-item>
 
+      <div class="flex items-center">
+        <span>Project color: </span>
+        <a-menu class="!border-0 !m-0 !p-0">
+          <a-sub-menu key="project-color">
+            <template #title>
+              <button type="button" class="color-selector" :style="{ 'background-color': formState.color }">
+                <MdiNull v-if="formState.color === '#FFFFFF00'" />
+              </button>
+            </template>
+            <template #expandIcon></template>
+            <GeneralColorPicker v-model="formState.color" name="color" class="nc-metadb-project-color" />
+          </a-sub-menu>
+        </a-menu>
+        <MdiClose
+          v-show="formState.color !== '#FFFFFF00'"
+          class="cursor-pointer"
+          :style="{ color: 'red' }"
+          @click="formState.color = '#FFFFFF00'"
+        />
+      </div>
+
       <div class="text-center">
         <button type="submit" class="submit">
           <span class="flex items-center gap-2">
@@ -112,7 +131,7 @@ await getProject()
   </div>
 </template>
 
-<style lang="scss">
+<style lang="scss" scoped>
 .update-project {
   .ant-input-affix-wrapper,
   .ant-input {
@@ -137,4 +156,23 @@ await getProject()
     }
   }
 }
+
+:deep(.ant-menu-submenu-title) {
+  @apply !p-0 !mx-2;
+}
+
+.color-selector {
+  position: relative;
+  height: 32px;
+  width: 32px;
+  border-radius: 5px;
+  -webkit-text-stroke-width: 1px;
+  -webkit-text-stroke-color: white;
+  @apply flex text-gray-500 border-4 items-center justify-center;
+}
+
+.color-selector:hover {
+  filter: brightness(90%);
+  -webkit-filter: brightness(90%);
+}
 </style>

packages/nc-gui-v2/pages/index/index/index.vue

@@ -158,9 +158,13 @@ await loadProjects()
       >
         <!-- Title -->
         <a-table-column key="title" :title="$t('general.title')" data-index="title">
-          <template #default="{ text }">
+          <template #default="{ text, record }">
             <div
-              class="capitalize color-transition group-hover:text-primary !w-[400px] overflow-hidden overflow-ellipsis whitespace-nowrap"
+              class="capitalize color-transition group-hover:text-primary !w-[400px] h-full overflow-hidden overflow-ellipsis whitespace-nowrap pl-2"
+              :class="{ 'border-l-4': record.color }"
+              :style="{
+                'border-color': record.color,
+              }"
             >
               {{ text }}
             </div>

packages/nocodb/src/lib/meta/api/projectApis.ts

@@ -23,6 +23,7 @@ import getColumnUiType from '../helpers/getColumnUiType';
 import mapDefaultPrimaryValue from '../helpers/mapDefaultPrimaryValue';
 import { extractAndGenerateManyToManyRelations } from './metaDiffApis';
 import { metaApiMetrics } from '../helpers/apiMetrics';
+import { extractPropsAndSanitize } from '../helpers/extractProps';
 
 const nanoid = customAlphabet('1234567890abcdefghijklmnopqrstuvwxyz_', 4);
 
@@ -46,12 +47,15 @@ export async function projectUpdate(
   req: Request<any, any, any>,
   res: Response<ProjectListType>
 ) {
-  // only support updating title at this moment
+  const project = await Project.getWithInfo(req.params.projectId);
-  const data: any = {
+
-    title: DOMPurify.sanitize(req?.body?.title),
+  const data: Partial<Project> = extractPropsAndSanitize(req?.body, [
-  };
+    'title',
+    'meta',
+    'color',
+  ]);
 
-  if (await Project.getByTitle(data.title)) {
+  if (data?.title && project.title !== data.title && await Project.getByTitle(data.title)) {
     NcError.badRequest('Project title already in use');
   }
 

packages/nocodb/src/lib/meta/helpers/extractProps.ts

@@ -1,7 +1,17 @@
-export default function extractProps<T>(body: T, props: string[]): Partial<T> {
+import DOMPurify from 'isomorphic-dompurify';
+
+export function extractProps<T>(body: T, props: string[]): Partial<T> {
   // todo: throw error if no props found
   return props.reduce((o, key) => {
     if (key in body) o[key] = body[key];
     return o;
   }, {});
 }
+
+export function extractPropsAndSanitize<T>(body: T, props: string[]): Partial<T> {
+  // todo: throw error if no props found
+  return props.reduce((o, key) => {
+    if (key in body) o[key] = body[key] === '' ? null : DOMPurify.sanitize(body[key]);
+    return o;
+  }, {});
+}

packages/nocodb/src/lib/models/Base.ts

@@ -10,7 +10,7 @@ import Model from './Model';
 import { BaseType } from 'nocodb-sdk';
 import NocoCache from '../cache/NocoCache';
 import CryptoJS from 'crypto-js';
-import extractProps from '../meta/helpers/extractProps';
+import { extractProps } from '../meta/helpers/extractProps';
 
 // todo: hide credentials
 export default class Base implements BaseType {

packages/nocodb/src/lib/models/FormViewColumn.ts

@@ -3,7 +3,7 @@ import { CacheGetType, CacheScope, MetaTable } from '../utils/globals';
 import { FormColumnType } from 'nocodb-sdk';
 import View from './View';
 import NocoCache from '../cache/NocoCache';
-import extractProps from '../meta/helpers/extractProps';
+import { extractProps } from '../meta/helpers/extractProps';
 
 export default class FormViewColumn implements FormColumnType {
   id?: string;

packages/nocodb/src/lib/models/FormulaColumn.ts

@@ -1,7 +1,7 @@
 import Noco from '../Noco';
 import { CacheGetType, CacheScope, MetaTable } from '../utils/globals';
 import NocoCache from '../cache/NocoCache';
-import extractProps from '../meta/helpers/extractProps';
+import { extractProps } from '../meta/helpers/extractProps';
 
 export default class FormulaColumn {
   formula: string;

packages/nocodb/src/lib/models/GridViewColumn.ts

@@ -1,7 +1,7 @@
 import Noco from '../Noco';
 import { CacheGetType, CacheScope, MetaTable } from '../utils/globals';
 import { GridColumnType } from 'nocodb-sdk';
-import extractProps from '../meta/helpers/extractProps';
+import { extractProps } from '../meta/helpers/extractProps';
 import View from './View';
 import NocoCache from '../cache/NocoCache';
 

packages/nocodb/src/lib/models/HookLog.ts

@@ -1,6 +1,6 @@
 import { MetaTable } from '../utils/globals';
 import Noco from '../Noco';
-import extractProps from '../meta/helpers/extractProps';
+import { extractProps } from '../meta/helpers/extractProps';
 import Hook from './Hook';
 import { HookLogType } from 'nocodb-sdk';
 

packages/nocodb/src/lib/models/Project.ts

@@ -7,7 +7,7 @@ import {
   CacheScope,
   MetaTable,
 } from '../utils/globals';
-import extractProps from '../meta/helpers/extractProps';
+import { extractProps } from '../meta/helpers/extractProps';
 import NocoCache from '../cache/NocoCache';
 
 export default class Project implements ProjectType {

packages/nocodb/src/lib/models/SyncSource.ts

@@ -1,6 +1,6 @@
 import Noco from '../Noco';
 import { MetaTable } from '../utils/globals';
-import extractProps from '../meta/helpers/extractProps';
+import { extractProps } from '../meta/helpers/extractProps';
 import User from './User';
 
 export default class SyncSource {

packages/nocodb/src/lib/models/User.ts

@@ -1,7 +1,7 @@
 import { UserType } from 'nocodb-sdk';
 import { CacheGetType, CacheScope, MetaTable } from '../utils/globals';
 import Noco from '../Noco';
-import extractProps from '../meta/helpers/extractProps';
+import { extractProps } from '../meta/helpers/extractProps';
 import NocoCache from '../cache/NocoCache';
 export default class User implements UserType {
   id: string;

packages/nocodb/src/lib/models/View.ts

@@ -18,7 +18,7 @@ import GalleryViewColumn from './GalleryViewColumn';
 import FormViewColumn from './FormViewColumn';
 import Column from './Column';
 import NocoCache from '../cache/NocoCache';
-import extractProps from '../meta/helpers/extractProps';
+import { extractProps } from '../meta/helpers/extractProps';
 
 const { v4: uuidv4 } = require('uuid');
 export default class View implements ViewType {