Vue 3 and Vuetify 3 SASS variable overrides

variables.scss

// src/scss/variables.scss

$body-font-family: 'Noto Sans', sans-serif;

@use 'vuetify' with (
  $body-font-family: $body-font-family,
  $heading-font-family: $body-font-family
);

vuetify.ts

// src/plugins/vuetify.ts

import '@mdi/font/css/materialdesignicons.css';
import 'vuetify/styles';
import '@/scss/variables.scss'

import { createVuetify, ThemeDefinition } from 'vuetify';
import * as components from 'vuetify/components';
import * as directives from 'vuetify/directives';

const customLightTheme: ThemeDefinition = {
  dark: false,
  colors: {
    primary: '#00004E',
    secondary: '#C3B195',
    accent: '#0DBDBA',
  }
}

export default createVuetify({
  components,
  directives,
  theme: {
    defaultTheme: 'customLightTheme',
    variations: {
      colors: ['primary', 'secondary', 'accent', 'error', 'info', 'success', 'warning'],
      lighten: 5,
      darken: 5,
    },
    themes: {
      customLightTheme,
    }
  },
})