Replace ColorInput to PaletteInput in the Agida theme

src/components/themes/agida/index.tsx

@@ -3,6 +3,7 @@ import { AppModule } from '@/store/app'
 import { Wavery } from './lib/wave'
 import { Debounce } from '@/utils/helper'
 import { changeHsl, hexToRgb, rgbToHsl } from '@/utils/color'
+import { AppInputThemeGeneral } from '@/models/app'
 
 export const OPACITY_ARR = [0.265, 0.4, 0.53, 1]
 export const topColors = ['#03C79C', '#00A5B2', '#0080A5', '#005A8D']
@@ -22,7 +23,7 @@ export default class AgidaTheme extends Vue {
     variance: 1,
     animation: {
       steps: 2,
-      time: 4000
+      time: 40000
     }
   }
 
@@ -31,12 +32,20 @@ export default class AgidaTheme extends Vue {
     height: window.innerHeight
   }
 
+  get palette(): string[] {
+    const input = AppModule.getThemeInput('palette') as AppInputThemeGeneral
+    const index = input?.value as number || 0
+    const values = input?.values || ['#00CC99', '#6600FF']
+
+    return values[index] as string[]
+  }
+
   get topColor(): string {
-    return AppModule.getThemeInput('top-color')?.value as string || '#00CC99'
+    return this.palette[0]
   }
 
   get bottomColor(): string {
-    return AppModule.getThemeInput('bottom-color')?.value as string || '#6600FF'
+    return this.palette[1]
   }
 
   get animationSpeed(): number {
@@ -54,9 +63,9 @@ export default class AgidaTheme extends Vue {
 
   get bottomColors(): string[] {
     const initHSL = rgbToHsl(hexToRgb(this.bottomColor))
-    const second = changeHsl(initHSL, 10, -3, 5)
-    const third = changeHsl(initHSL, 25, -3, 10)
-    const fourth = changeHsl(initHSL, 33, -3, 20)
+    const second = changeHsl(initHSL, 5, -3, -5)
+    const third = changeHsl(initHSL, 10, -3, -10)
+    const fourth = changeHsl(initHSL, 15, -3, -20)
 
     return [initHSL, second, third, fourth]
   }
@@ -155,7 +164,7 @@ export default class AgidaTheme extends Vue {
   }
 
   get activeFragment() {
-    return this.knifeSVG
+    return this.agidaSVG
   }
 
   get width(): number {

src/utils/constant.ts

@@ -31,14 +31,6 @@ export const defaultTheme: AppTheme = {
   ]
 }
 
-const colorInput: AppInputThemeGeneral = {
-  name: 'top-color',
-  type: 'color',
-  label: 'input.color-active',
-  value: '#00CC99',
-  options: { class: 'w-50' }
-}
-
 export const AppThemes: AppTheme[] = [
   {
     name: 'Agida',
@@ -48,19 +40,22 @@ export const AppThemes: AppTheme[] = [
       background: '#19102e'
     },
     settings: [
-      colorInput,
       {
-        name: 'bottom-color',
-        type: 'color',
-        label: 'input.color-active',
-        value: '#6600FF',
-        options: { class: 'w-50' }
+        name: 'palette',
+        type: 'palette',
+        label: 'input.slider-amount',
+        value: 0,
+        values: [
+          ['#00CC99', '#6600FF'],
+          ['#B9E0FF', '#9F73AB'],
+          ['#CBCB68', '#3E9C8F'],
+          ['#51eaea', '#D62E93'],
+          ['#AC3ABB', '#511e78'],
+          ['#B5D115', '#FB044F'],
+          ['#fc5185', '#3fc1c9'],
+          ['#f5f5f5', '#364f6b']
+        ]
       }
-      // buildInputColor({
-      //   name: 'bottom-color',
-      //   value: '#6600FF',
-      //   options: { class: 'w-50' }
-      // })
     ]
   },
   defaultTheme,