From e983a58b78aaf2455de20ecaa0e7dcbcecc35552 Mon Sep 17 00:00:00 2001
From: braks <78412429+bcakmakoglu@users.noreply.github.com>
Date: Thu, 13 Oct 2022 14:06:46 +0200
Subject: [PATCH] feat(nc-gui): add default nocodb theme color to picker

---
 packages/nc-gui/composables/useTheme/index.ts          | 10 ++++++----
 .../nc-gui/pages/[projectType]/[projectId]/index.vue   |  9 +++++++--
 packages/nc-gui/utils/colorsUtils.ts                   |  2 +-
 3 files changed, 14 insertions(+), 7 deletions(-)

diff --git a/packages/nc-gui/composables/useTheme/index.ts b/packages/nc-gui/composables/useTheme/index.ts
index b980b5d0e0..c618bf37e8 100644
--- a/packages/nc-gui/composables/useTheme/index.ts
+++ b/packages/nc-gui/composables/useTheme/index.ts
@@ -6,12 +6,13 @@ import type { ThemeConfig } from '~/lib'
 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)
-
-  /** current theme config */
-  const currentTheme = ref({
+  const defaultTheme = {
     primaryColor: themeV2Colors['royal-blue'].DEFAULT,
     accentColor: themeV2Colors.pink['500'],
-  })
+  }
+
+  /** current theme config */
+  const currentTheme = ref(defaultTheme)
 
   /** set initial config */
   setTheme(config ?? currentTheme.value)
@@ -40,5 +41,6 @@ export const useTheme = createGlobalState((config?: Partial<ThemeConfig>) => {
   return {
     theme: currentTheme,
     setTheme,
+    defaultTheme,
   }
 })
diff --git a/packages/nc-gui/pages/[projectType]/[projectId]/index.vue b/packages/nc-gui/pages/[projectType]/[projectId]/index.vue
index e37fac58bd..288cab8d96 100644
--- a/packages/nc-gui/pages/[projectType]/[projectId]/index.vue
+++ b/packages/nc-gui/pages/[projectType]/[projectId]/index.vue
@@ -29,7 +29,7 @@ definePageMeta({
   hideHeader: true,
 })
 
-const { theme } = useTheme()
+const { theme, defaultTheme } = useTheme()
 
 const { t } = useI18n()
 
@@ -71,9 +71,13 @@ function toggleDialog(value?: boolean, key?: string) {
   openDialogKey.value = key
 }
 
-const handleThemeColor = async (mode: 'swatch' | 'primary' | 'accent', color: string) => {
+const handleThemeColor = async (mode: 'swatch' | 'primary' | 'accent', color?: string) => {
   switch (mode) {
     case 'swatch': {
+      if (color === defaultTheme.primaryColor) {
+        return await saveTheme(defaultTheme)
+      }
+
       const tcolor = tinycolor(color)
       if (tcolor.isValid()) {
         const complement = tcolor.complement()
@@ -338,6 +342,7 @@ onBeforeUnmount(reset)
                           :colors="projectThemeColors"
                           :row-size="9"
                           :advanced="false"
+                          class="rounded-t"
                           @input="handleThemeColor('swatch', $event)"
                         />
 
diff --git a/packages/nc-gui/utils/colorsUtils.ts b/packages/nc-gui/utils/colorsUtils.ts
index fd51959a37..24e9b2d102 100644
--- a/packages/nc-gui/utils/colorsUtils.ts
+++ b/packages/nc-gui/utils/colorsUtils.ts
@@ -85,6 +85,7 @@ export const hexToRGB = (hex: string) => {
 }
 
 export const projectThemeColors = [
+  themeV2Colors['royal-blue'].DEFAULT,
   '#2D7FF9',
   '#18BFFF',
   '#60DAD5',
@@ -93,7 +94,6 @@ export const projectThemeColors = [
   '#F57134',
   '#1BAF2C',
   '#8B46FF',
-  '#666666',
   '#1B51A2',
   '#146C8E',
   '#24716E',