CODEWITHSUNDEEP
vue.jsvuetify.js
Developer
Developer

Reputation: 541

How to customize the theme colors in Vuetify?

The graphQL and apollo is OK.

The typescript AllColors.ts is:

import gql from 'graphql-tag'
export const ALL_COLORS = gql`
    query allColors {
        allColors {
            primary
            secondary
        }
    }
`

I've tried this in plugin/vuetify.ts but doesn't walk.

import   Vue          from 'vue';
import   Vuetify      from 'vuetify/lib/framework';
import   colors       from 'vuetify/lib/util/colors';
import { ALL_COLORS } from '@/graphql/AllColors'

Vue.use(Vuetify);

export default new Vuetify({
  data() {
    return {
      allColors: []
    }
  },
  theme: {
    themes: {
      dark: {
        primary:    this.allColors.primary,
        secondary:  this.allColors.secondary
      },
    },
  },
  apollo: {
    allColors: {
      query: ALL_COLORS
    }
  }
});

Gives this error:

 DONE  Compiled successfully in 240ms                                                                              12:54:25

Type checking in progress...

  App running at:
  - Local:   http://localhost:8080/ 
  - Network: http://192.168.0.102:8080/

ERROR in /home/user1/sites/app1/src/plugins/vuetify.ts(24,19):
26:19 Element implicitly has an 'any' type because type 'typeof globalThis' has no index signature.
    24 |         primary: this.allColors.primary,
       |                       ^
    25 |         secondary: this.allColors.secondary
    26 |       },
    27 |     },
    28 |   },

ERROR in /home/user1/sites/app1/src/plugins/vuetify.ts(25,21):
26:19 Element implicitly has an 'any' type because type 'typeof globalThis' has no index signature.
    24 |         primary: this.allColors.primary,
    25 |         secondary: this.allColors.secondary
       |                         ^
    26 |       },
    27 |     },
    28 |   },
Version: typescript 3.9.7
Time: 313ms

Any idea?

Upvotes: 1

Views: 757

Answers (2)

tony19
tony19

Reputation: 138276

It looks like you're conflating the Vue constructor and the Vuetify constructor. Only the former has data() for creating local reactive properties, and the apollo property for vue-apollo.

To correct the issue:

  1. In @/plugins/vuetify.ts, remove data() and apollo from the Vuetify constructor options, and move apollo to the Vue constructor in main.ts.
  2. Move allColors to the top level before creating the Vuetify instance with the theme setting.
// @/plugins/vuetify.ts
import Vue from 'vue';
import Vuetify from 'vuetify/lib';
import 'vuetify/dist/vuetify.min.css';

Vue.use(Vuetify);

const allColors = {
  primary: '#1976D2',
  secondary: '#424242',
}

export default new Vuetify({
  theme: {
    themes: {
      dark: {
        primary:   allColors.primary,
        secondary: allColors.secondary
      },
    },
  },
});

// main.ts
import Vue            from 'vue';
import vuetify        from '@/plugins/vuetify';
import { ALL_COLORS } from '@/graphql/AllColors'

new Vue({
  vuetify,
  apollo: {
    allColors: {
      query: ALL_COLORS
    }
  }
});

Upvotes: 1

Leo Giesen
Leo Giesen

Reputation: 136

Vuetify does not like the way you call allColors since it does not recognize the variables: I assume that within the API call the primary and secondary colors are defined. Then you would still need to specify the path to them. How are the colors stored in vuetify? Because it looks like the variable path is incomplete, so it could be more like this: this.apollo.AllColors.query.response.data.primary (you might not need to say response.data) SASS variables could help you store the color variables.

Upvotes: 0

Related Questions