Lift the state up

layouts/AppConfigurator.vue

@@ -58,8 +58,6 @@ export default {
     data() {
         return {
             presets: Object.keys(presets),
-            selectedPrimaryColor: 'noir',
-            selectedSurfaceColor: null,
             primaryColors: [
                 { name: 'noir', palette: {} },
                 { 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' } },
@@ -248,8 +246,11 @@ export default {
             }
         },
         updateColors(type, color) {
-            if (type === 'primary') this.selectedPrimaryColor = color.name;
-            else if (type === 'surface') this.selectedSurfaceColor = color.name;
+            if (type === 'primary') {
+                this.$appState.primary = color.name;
+            } else if (type === 'surface') {
+                this.$appState.surface = color.name;
+            }
 
             this.applyTheme(type, color);
         },
@@ -276,6 +277,12 @@ export default {
     computed: {
         rippleActive() {
             return this.$primevue.config.ripple;
+        },
+        selectedPrimaryColor() {
+            return this.$appState.primary;
+        },
+        selectedSurfaceColor() {
+            return this.$appState.surface;
         }
     }
 };

plugins/app-state.js

@@ -6,6 +6,8 @@ const $appState = {
     install: (Vue, options) => {
         Vue.config.globalProperties.$appState = reactive({
             preset: 'Aura',
+            primary: 'noir',
+            surface: null,
             darkTheme: false,
             codeSandbox: false,
             sourceType: 'options-api',