Update config

layouts/AppConfigurator.vue

@@ -47,7 +47,7 @@
 
 <script>
 import EventBus from '@/layouts/AppEventBus';
-import { updatePreset, updateSurfacePalette, $dt } from 'primevue/themes';
+import { updatePreset, updateSurfacePalette, $t } from 'primevue/themes';
 import Lara from 'primevue/themes/lara';
 import Aura from 'primevue/themes/aura';
 
@@ -55,11 +55,10 @@ export default {
     data() {
         return {
             selectedPreset: 'Lara',
-            presets: ['Lara', 'Aura'],
-            selectedPrimaryColor: 'default',
+            presets: ['Aura', 'Lara'],
+            selectedPrimaryColor: 'noir',
             selectedSurfaceColor: null,
             primaryColors: [
-                { name: 'default', palette: this.getPrimaryPaletteInTheme() },
                 { name: 'noir', palette: { 50: '#fafafa', 100: '#f4f4f5', 200: '#e4e4e7', 300: '#d4d4d8', 400: '#a1a1aa', 500: '#71717a', 600: '#52525b', 700: '#3f3f46', 800: '#27272a', 900: '#18181b', 950: '#09090b' } },
                 { name: 'emerald', palette: { 50: '#ecfdf5', 100: '#d1fae5', 200: '#a7f3d0', 300: '#6ee7b7', 400: '#34d399', 500: '#10b981', 600: '#059669', 700: '#047857', 800: '#065f46', 900: '#064e3b', 950: '#022c22' } },
                 { name: 'green', palette: { 50: '#f0fdf4', 100: '#dcfce7', 200: '#bbf7d0', 300: '#86efac', 400: '#4ade80', 500: '#22c55e', 600: '#16a34a', 700: '#15803d', 800: '#166534', 900: '#14532d', 950: '#052e16' } },
@@ -115,23 +114,11 @@ export default {
         };
     },
     methods: {
-        getPrimaryPaletteInTheme() {
-            return [50, 100, 200, 300, 400, 500, 600, 700, 800, 900, 950].reduce((acc, k) => {
-                acc[k] = $dt(`primary.${k}`).value;
+        getPresetExt() {
+            const color = this.primaryColors.find((c) => c.name === this.selectedPrimaryColor);
 
-                return acc;
-            }, {});
-        },
-        updateColors(type, color) {
-            if (type === 'primary') this.selectedPrimaryColor = color.name;
-            else if (type === 'surface') this.selectedSurfaceColor = color.name;
-
-            this.applyTheme(type, color);
-        },
-        applyTheme(type, color) {
-            if (type === 'primary') {
             if (color.name === 'noir') {
-                    updatePreset({
+                return {
                     semantic: {
                         primary: color.palette,
                         colorScheme: {
@@ -165,9 +152,9 @@ export default {
                             }
                         }
                     }
-                    });
+                };
             } else {
-                    updatePreset({
+                return {
                     semantic: {
                         primary: color.palette,
                         colorScheme: {
@@ -201,8 +188,18 @@ export default {
                             }
                         }
                     }
-                    });
+                };
             }
+        },
+        updateColors(type, color) {
+            if (type === 'primary') this.selectedPrimaryColor = color.name;
+            else if (type === 'surface') this.selectedSurfaceColor = color.name;
+
+            this.applyTheme(type, color);
+        },
+        applyTheme(type, color) {
+            if (type === 'primary') {
+                updatePreset(this.getPresetExt());
             } else if (type === 'surface') {
                 updateSurfacePalette(color.palette);
             }
@@ -213,23 +210,10 @@ export default {
             this.$appState.ripple = value;
         },
         onPresetChange(value) {
-            switch (value) {
-                case 'Lara':
-                    updatePreset(Lara);
-                    break;
+            const preset = value === 'Lara' ? Lara : Aura;
+            const surfacePalette = this.surfaces.find((s) => s.name === this.selectedSurfaceColor)?.palette;
 
-                case 'Aura':
-                    updatePreset(Aura);
-                    break;
-
-                default:
-                    break;
-            }
-
-            // @todo
-            this.primaryColors.find((c) => c.name === 'default').palette = this.getPrimaryPaletteInTheme();
-            this.selectedPrimaryColor = 'default';
-            this.selectedSurfaceColor = null;
+            $t().preset(preset).preset(this.getPresetExt()).surfacePalette(surfacePalette).update();
         }
     },
     computed: {

plugins/app-state.js

@@ -1,6 +1,5 @@
-//import Noir from '@/themes/app-theme';
+import Noir from '@/themes/app-theme';
 import PrimeVue from 'primevue/config';
-import Lara from 'primevue/themes/lara';
 import { reactive } from 'vue';
 
 const $appState = {
@@ -21,11 +20,6 @@ const $appState = {
 export default defineNuxtPlugin((nuxtApp) => {
     nuxtApp.vueApp.use($appState);
     nuxtApp.vueApp.use(PrimeVue, {
-        theme: {
-            preset: Lara,
-            options: {
-                darkModeSelector: '.p-dark'
-            }
-        }
+        theme: Noir
     });
 });

themes/app-theme.js

@@ -1,7 +1,8 @@
 import { definePreset } from 'primevue/themes';
-import Aura from 'primevue/themes/aura';
+import Lara from 'primevue/themes/lara';
+//import Aura from 'primevue/themes/aura';
 
-const Noir = definePreset(Aura, {
+const Noir = definePreset(Lara, {
     semantic: {
         primary: {
             50: '{zinc.50}',