Merge pull request #4057 from nocodb/feat/default-theme

refactor(nc-gui): add default nocodb theme color to picker

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,
   }
 })

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)"
                         />
 

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',