Set Vuetify theme and default settings.

Fixes colors, pagination styling (without an ugly hack from v2), change of field L&F in Vuetify 3.

Refs #156

source/demyo-vue-frontend/src/components/CardTextIndex.vue

@@ -17,7 +17,7 @@
 
 		<div v-if="splitByFirstLetter">
 			<div v-for="(value, letter) in groupedItems" :key="letter">
-				<h2 class="c-CardTextIndex__firstLetter text-h4 mx-2 my-4 accent--text">
+				<h2 class="c-CardTextIndex__firstLetter text-h4 mx-2 my-4 text-secondary">
 					{{ letter }}
 				</h2>
 				<div class="c-CardTextIndex__panel">
@@ -31,9 +31,7 @@
 			v-if="pageCount > 1"
 			v-model="currentPage"
 			:length="pageCount"
-			total-visible="10"
-			class="my-2"
-			@input="$emit('page-change')"
+			@update:model-value="$emit('page-change')"
 		/>
 	</div>
 </template>

source/demyo-vue-frontend/src/plugins/vuetify.js

@@ -2,38 +2,50 @@ import { cspStyleNonce } from '@/myenv'
 // import { TiptapVuetifyPlugin } from 'tiptap-vuetify'
 // import 'tiptap-vuetify/dist/main.css'
 import { createVuetify } from 'vuetify'
-import 'vuetify/styles'
-// TODO: Vue 3: maybe we can remove the separate mdi import then?
 import { aliases, mdi } from 'vuetify/iconsets/mdi'
+import 'vuetify/styles'
+import colors from 'vuetify/util/colors'
+
+const demyoTheme = {
+	dark: false,
+	colors: {
+		primary: colors.blue.base,
+		secondary: colors.pink.base,
+		// Custom colors
+		footer: colors.grey.darken3
+	}
+}
 
 const vuetify = createVuetify({
+	// Use the MDI icons which we still must include manually as a dependency (so we control the version)
 	icons: {
 		defaultSet: 'mdi',
 		aliases,
 		sets: {
 			mdi
 		}
 	},
+	// Set the color and CSP nonce
 	theme: {
-		cspNonce: cspStyleNonce
-	}
-
-	// TODO: Vue 3
-	/*
-	theme: {
-		options: {
-			customProperties: true
-		},
-
+		cspNonce: cspStyleNonce,
+		defaultTheme: 'demyoTheme',
 		themes: {
-			light: {
-				primary: colors.blue,
-				anchor: colors.pink.base,
-				accent: colors.pink
-			}
+			demyoTheme
+		}
+	},
+	// Set some defaults for components to keep the Demyo 2 style that we like
+	defaults: {
+		VPagination: {
+			variant: 'flat',
+			activeColor: 'primary',
+			rounded: 'circle',
+			totalVisible: 8,
+			class: 'my-4'
+		},
+		VTextField: {
+			variant: 'underlined'
 		}
 	}
-	*/
 })
 
 export default vuetify