Change main theme colors

assets/variables.scss

@@ -1,4 +1,23 @@
 // Ref: https://github.com/nuxt-community/vuetify-module#customvariables
 //
 // The variables you want to modify
-// $font-size-root: 20px;
+// $font-size-root: 20px;
+
+p a {
+    color: rgb(var(--v-theme-primary)) !important;
+    text-decoration: none !important;
+
+    &:hover {
+        text-decoration: underline !important;
+    }
+}
+
+.link {
+    color: inherit;
+    text-decoration: none;
+    transition: all 0.28s cubic-bezier(0.4, 0, 0.2, 1);
+
+    &:hover {
+        color: rgb(var(--v-theme-primary));
+    }
+}

plugins/vuetify.ts

@@ -1,6 +1,7 @@
 import { createVuetify, ThemeDefinition  } from 'vuetify'
 import * as components from 'vuetify/components'
 import * as directives from 'vuetify/directives'
+import { md3 } from 'vuetify/blueprints'
 import '@mdi/font/css/materialdesignicons.css'
 import { mdi } from 'vuetify/iconsets/mdi'
 import { brands } from '~/iconsets/brands'
@@ -12,27 +13,20 @@ const myCustomDarkTheme: ThemeDefinition = {
   colors: {
     background: '#0A192F',
     backgroundSecondary: '#112240',
-    primary: '#64FFDA',
+    primary: '#00DC82',
+    // primary: '#64FFDA',
+    secondary: '#8892B0',
+    "on-background": '#CCD6F6',
+    "on-backgroundSecondary": '#CCD6F6',
     accent: colors.grey.darken3,
-    secondary: colors.amber.darken3,
+    // secondary: colors.amber.darken3,
     info: colors.teal.lighten1,
     warning: colors.amber.base,
     error: colors.deepOrange.accent4,
     success: colors.green.accent3
   }
-  // Bert
-  /* dark: {
-    background: '#0B0C10',
-    primary: '#66FCF1',
-    accent: colors.grey.darken3,
-    secondary: colors.amber.darken3,
-    info: colors.teal.lighten1,
-    warning: colors.amber.base,
-    error: colors.deepOrange.accent4,
-    success: colors.green.accent3,
-  },
   // Nuxt Default
-  dark: {
+  /* colors: {
     primary: colors.blue.darken2,
     accent: colors.grey.darken3,
     secondary: colors.amber.darken3,
@@ -47,6 +41,12 @@ export default defineNuxtPlugin(nuxtApp => {
   const vuetify = createVuetify({
     components,
     directives,
+    blueprint: md3,
+    defaults: {
+      VCard: {
+        elevation: 0,
+      },
+    },
     theme: {
       // customVariables: ['~/assets/variables.scss'],
       defaultTheme: 'myCustomDarkTheme',
@@ -67,4 +67,5 @@ export default defineNuxtPlugin(nuxtApp => {
 
   // Define global variables
   nuxtApp.provide('myName', 'Manuel Veigel')
+  nuxtApp.provide('myEmail', 'maveigel@gmail.com')
 })