CODEWITHSUNDEEP
javascriptvue.jsfrontendnuxt.jsvuetify.js
Gonzalo Molina
Gonzalo Molina

Reputation: 29

Add Colours to Vuetify Theme - Nuxt project

I am trying to change the colors on my Vuetify theme so I can call them via (class="") for my Nuxt project. Having checked most of the related threads, I am not able to make it work.

Most of the threads approach this same matter without building the project directly with Vuetify, which means that one would need to:

Install vuetify and @mdi/font

Create a file vuetify.js in your plugins directory with the following code:

import Vue from 'vue'
import Vuetify from 'vuetify'

import colors from './../config/colors'

import 'vuetify/dist/vuetify.min.css'
import '@mdi/font/css/materialdesignicons.css'
Vue.use(Vuetify)

export default ctx => {
  const vuetify = new Vuetify({
    theme: {
      themes: {
        light: {
          ...colors
        },
        dark: {
          // colors
        }
      }
    }
  })
  ctx.app.vuetify = vuetify
  ctx.$vuetify = vuetify.framework
}

Call it from nuxt.config.js file with:

plugins: ['~/plugins/vuetify.js']

MY CASE: When initializing a new Nuxt project via npm init nuxt-app@version, you are able to set the project to be based on Vuetify by selecting the configuration options. While doing this, nuxt builds the project with Vuetify, where the nuxt.config.js file has the following:

  buildModules: [
    // https://go.nuxtjs.dev/vuetify
    '@nuxtjs/vuetify',
  ],

  // Vuetify module configuration: https://go.nuxtjs.dev/config-vuetify
  vuetify: {
    customVariables: ['~/assets/variables.scss'],
    theme: {
      dark: false,
      themes: {
        dark: {
          primary: colors.blue.darken2,
          accent: colors.grey.darken3,
          secondary: colors.amber.darken3,
          info: colors.teal.lighten1,
          warning: colors.amber.base,
          error: colors.deepOrange.accent4,
          success: colors.green.accent3,
        },
      }
    }
  },

From my understanding, it should be as simple as adding my own color variables to the preexistent theme (dark) at nuxt.config.js as follows:

  vuetify: {
    customVariables: ['~/assets/variables.scss'],
    theme: {
      dark: false,
      themes: {
        dark: {
          myColor: '#e456',
          primary: colors.blue.darken2,
          accent: colors.grey.darken3,
          secondary: colors.amber.darken3,
          info: colors.teal.lighten1,
          warning: colors.amber.base,
          error: colors.deepOrange.accent4,
          success: colors.green.accent3,
        },

and then calling it at the HTML to use it:

<template>
  <v-app class="myColor">
    <v-main>
      <v-container fluid >
        <Nuxt />
      </v-container>
    </v-main>
  </v-app>
</template>

Does anybody know how this can be done?

Find below the details of my Nuxt project:

{
  "name": "code",
  "version": "1.0.0",
  "lockfileVersion": 2,
  "requires": true,
  "packages": {
    "": {
      "name": "code",
      "version": "1.0.0",
      "dependencies": {
        "@nuxt/content": "^1.15.1",
        "@nuxtjs/axios": "^5.13.6",
        "core-js": "^3.19.3",
        "nuxt": "^2.15.8",
        "vue": "^2.6.14",
        "vue-server-renderer": "^2.6.14",
        "vue-template-compiler": "^2.6.14",
        "vuetify": "^2.6.1",
        "webpack": "^4.46.0"
      },
      "devDependencies": {
        "@nuxtjs/vuetify": "^1.12.3"
      }
    },

Upvotes: 0

Views: 625

Answers (1)

hamid niakan
hamid niakan

Reputation: 2851

you have defined your custom color in the themes.dark object but set the theme.dark property to false so your app does not read its colors from that object.

you have to either set your custom color in the themes.light object OR set the theme.dark property to true to make it work correctly.

Upvotes: 0

Related Questions