How to customise a theme?

[jvolker]

I would like to change the colours and font family of the current theme. This is described in the Vuetify documentation. Unfortunately, adding src/plugins/vuetify.js with one of those examples doesn't work with Nuxt Vuetify. What would be the correct way to customise a theme with Nuxt Vuetify? Is there anything missing?

Thanks in advance.

[maximarhipkin]

same here cant modify colors

[bujji1]

Here is the vuetify.js plugin. This worked for me, But getting lot of warnings...

import { createVuetify, ThemeDefinition } from "vuetify";
import { md3 } from "vuetify/blueprints";

const myCustomLightTheme = {
  dark: false,
  colors: {
    background: "#FFFFFF",
    surface: "#FFFFFF",
    primary: "#36AFCA",
    "primary-darken-1": "#3700B3",
    secondary: "#03DAC6",
    "secondary-darken-1": "#018786",
    error: "#B00020",
    info: "#2196F3",
    success: "#4CAF50",
    warning: "#FB8C00",
  },
};

export default defineNuxtPlugin((app) => {
  /*  const vuetify = createVuetify({
    blueprint: md3,
  });
  app.vueApp.use(vuetify); */

  const vuetify = createVuetify({
    theme: {
      defaultTheme: "myCustomLightTheme",
      themes: {
        myCustomLightTheme,
      },
    },
  });
  app.vueApp.use(vuetify);
});

[canhnd58]

Putting the theme in nuxt.config.ts works for me

import { ThemeDefinition } from "vuetify";

const lightTheme: ThemeDefinition = {
  dark: false,
  colors: {
    primary: "#6B261F",
    accent: "#FFCA28",
    secondary: "FF8F00",
    info: "#26A69A",
    warning: "#FFC107",
    error: "#DD2C00",
    success: "#4CAF50",
  },
};

export default defineNuxtConfig({
  ...
  vuetify: {
    vuetifyOptions: {
      theme: {
        defaultTheme: "lightTheme",
        themes: {
          lightTheme,
        },
      },
    },
  },
  ...
});