fix: 🐛 修复主题

Author: gitboyzcf

eslint.config.js

@@ -22,6 +22,7 @@ export default [
   },
   {
     languageOptions: {
+      ecmaVersion: '2022',
       globals: {
         ...globals.browser,
         ...globals.node

package.json

@@ -10,10 +10,11 @@
     "lint": "oxlint && eslint",
     "lint:fix": "oxlint --fix && eslint --fix",
     "preinstall": "npx only-allow pnpm",
-    "prepare": "husky init",
+    "prepare": "husky",
     "cz": "git-cz"
   },
   "dependencies": {
+    "@primevue/core": "^4.2.5",
     "@primevue/themes": "^4.2.1",
     "@vueuse/core": "^11.2.0",
     "animate.css": "^4.1.1",
@@ -27,6 +28,7 @@
     "lodash-es": "^4.17.21",
     "mitt": "^3.0.1",
     "pinia": "^2.2.6",
+    "primeicons": "^7.0.0",
     "primevue": "^4.2.1",
     "swiper": "^11.1.14",
     "uuid": "^11.0.2",

pnpm-lock.yaml

@@ -3,7 +3,7 @@ import { createApp } from 'vue'
 import App from './App.vue'
 import directives from './directives'
 import PrimeVue from 'primevue/config'
-import Nora from '@primevue/themes/nora'
+import Preset from '@/themes/app-theme'
 import { i18n } from '@/locales'
 import { setupStore } from '@/stores'
 import { setupRouter, router } from './router'
@@ -12,18 +12,15 @@ import { urlParamsLogin } from './router/helper'
 import './assets/main.css'
 import 'virtual:uno.css'
 import 'animate.css'
+import 'primeicons/primeicons.css'
 import '@/assets/scss/reset.scss'
 import '@/assets/scss/adapter.scss'
 import '@/assets/scss/theme.scss'
 
 async function bootstrap() {
   const app = createApp(App)
 
-  app.use(PrimeVue, {
-    theme: {
-      preset: Nora
-    }
-  })
+  app.use(PrimeVue, { theme: Preset, ripple: true })
   app.use(directives)
   app.use(i18n)
 

src/main.js

@@ -0,0 +1,58 @@
+import { definePreset } from '@primevue/themes'
+import Aura from '@primevue/themes/aura'
+
+export const NoirPreset = definePreset(Aura, {
+  semantic: {
+    primary: {
+      50: '{blue.50}',
+      100: '{blue.100}',
+      200: '{blue.200}',
+      300: '{blue.300}',
+      400: '{blue.400}',
+      500: '{blue.500}',
+      600: '{blue.600}',
+      700: '{blue.700}',
+      800: '{blue.800}',
+      900: '{blue.900}',
+      950: '{blue.950}'
+    },
+    colorScheme: {
+      light: {
+        primary: {
+          color: '{blue.950}',
+          contrastColor: '#ffffff',
+          hoverColor: '{blue.800}',
+          activeColor: '{blue.700}'
+        },
+
+        highlight: {
+          background: '{blue.950}',
+          focusBackground: '{blue.700}',
+          color: '#ffffff',
+          focusColor: '#ffffff'
+        },
+      },
+      dark: {
+        primary: {
+          color: '{primary.50}',
+          contrastColor: '{primary.950}',
+          hoverColor: '{primary.200}',
+          activeColor: '{primary.300}'
+        },
+        highlight: {
+          background: '{primary.50}',
+          focusBackground: '{primary.300}',
+          color: '{primary.950}',
+          focusColor: '{primary.950}'
+        }
+      }
+    }
+  }
+})
+
+export default {
+  preset: NoirPreset,
+  options: {
+    darkModeSelector: '.dark'
+  }
+}