updated layout

src/main.js

@@ -9,10 +9,13 @@ import App from './App.vue';
 import router from './router';
 
 
+import Aura from '@primevue/themes/aura';
+import Lara from '@primevue/themes/lara';
 import Nora from '@primevue/themes/nora';
 import PrimeVue from 'primevue/config';
 import ConfirmationService from 'primevue/confirmationservice';
 import ToastService from 'primevue/toastservice';
+import { definePreset } from '@primevue/themes';
 
 import BlockViewer from '@/components/BlockViewer.vue';
 
@@ -63,14 +66,78 @@ axios.defaults.baseURL = import.meta.env.VITE_BACKEND_URL;//'http://localhost:80
 console.log(import.meta.env.VITE_BACKEND_URL);
 
 const app = createApp(App);
-const pinia = createPinia()
+const pinia = createPinia();
+const preset = definePreset(Nora, {
+    semantic: {
+        primary: {
+            50: '{violet.50}',
+            100: '{violet.100}',
+            200: '{violet.200}',
+            300: '{violet.300}',
+            400: '{violet.400}',
+            500: '{violet.500}',
+            600: '{violet.600}',
+            700: '{violet.700}',
+            800: '{violet.800}',
+            900: '{violet.900}',
+            950: '{violet.950}'
+        },
+        colorScheme: {
+            light: {
+                surface: {
+                    0: '#f3f3f3',
+                    50: '{viva.50}',
+                    100: '{viva.100}',
+                    200: '{viva.200}',
+                    300: '{viva.300}',
+                    400: '{viva.400}',
+                    500: '{viva.500}',
+                    600: '{viva.600}',
+                    700: '{viva.700}',
+                    800: '{viva.800}',
+                    900: '{viva.900}',
+                    950: '{viva.950}'
+                },
+                formField: {
+                    hoverBorderColor: '{primary.color}',
+                    borderColor: '{primary.color}',
+                }
+            },
+            dark: {
+                surface: {
+                    0: '#ffffff',
+                    50: '{slate.50}',
+                    100: '{slate.100}',
+                    200: '{slate.200}',
+                    300: '{slate.300}',
+                    400: '{slate.400}',
+                    500: '{slate.500}',
+                    600: '{slate.600}',
+                    700: '{slate.700}',
+                    800: '{slate.800}',
+                    900: '{slate.900}',
+                    950: '{slate.950}'
+                },
+                formField: {
+                    hoverBorderColor: '{primary.color}',
+                    borderColor: '{primary.color}',
+                }
+            }
+        },
+        focusRing: {
+            width: '2px',
+            color: '{primary.color}',
+            offset: '1px'
+        }
+    }
+});
 
 app.use(pinia);
 app.use(router);
 
 app.use(PrimeVue, {
     theme: {
-        preset: Nora,
+        preset: preset,
         options: {
             prefix: 'p',
             darkModeSelector: '.app-dark',