feat: update theme color

Author: cwandev

src/stores/modules/app.ts

@@ -1,5 +1,6 @@
 import { defineStore } from 'pinia'
-import { StyleProvider, Themes } from '@varlet/ui'
+import { darkTheme } from '@/styles/dark'
+import { lightTheme } from '@/styles/light'
 
 export interface AppStore {
   swithMode: (val: string) => void
@@ -17,9 +18,7 @@ const useAppStore = defineStore('app', () => {
   const mode = ref(theme)
 
   const swithMode = (val: string) => {
-    const rootStyleVars = val === 'light'
-      ? Themes.toViewport({ '--color-body': '#f7f8fa', '--result-title-font-size': '32px', '--result-description-font-size': '14px' })
-      : Themes.toViewport({ ...Themes.dark, '--result-title-font-size': '32px', '--result-description-font-size': '14px' })
+    const rootStyleVars = val === 'light' ? lightTheme : darkTheme
     StyleProvider(rootStyleVars)
 
     mode.value = val

src/styles/app.less

@@ -32,12 +32,12 @@ body {
 // NProgress Style
 #nprogress {
   .bar {
-    background: #81d8d0 !important;
+    background: var(--color-nprogress) !important;
   }
 
   .spinner-icon {
-    border-top-color: #81d8d0;
-    border-left-color: #81d8d0;
+    border-top-color: var(--color-nprogress);
+    border-left-color: var(--color-nprogress);
   }
 }
 

src/styles/dark.ts

@@ -0,0 +1,7 @@
+import { Themes } from '@varlet/ui'
+
+export const darkTheme = Themes.toViewport({
+  ...Themes.dark,
+  '--color-primary': '#00C16A',
+  '--color-nprogress': '#D9FBE8',
+})

src/styles/light.ts

@@ -0,0 +1,7 @@
+import { Themes } from '@varlet/ui'
+
+export const lightTheme = Themes.toViewport({
+  '--color-primary': '#00C16A',
+  '--color-nprogress': '#75EDAE',
+  '--color-body': '#f7f8fa',
+})