Override theme colors dynamically

[tincho425]

Module version @nuxtjs/vuetify": "^1.10.3"

Describe the bug Changing context.$vuetify.theme.themes.light.primary with Object from HTTP request, no impact on components.

To Reproduce

Steps to reproduce the behavior:

1. Create action in /store/index.js with export const actions = { async nuxtServerInit(nuxt, context) { await context.app.$axios.$get('/www', { [....] }}).then((res) => { context.$vuetify.theme.themes.light.primary = res return {} }).catch(error => { console.log(error) }) } }

2. Check in components / pages / layout that colors didn't change.

Expected behavior The porpouse of this feature is to retrieve data from an API and modify colors of website, that's why I'm trying changing it on nuxtServerInit, I need to get proper colors before anything renders.

[t1mwillis]

Your vuetify.options.js file can return a function, then you can conditionally change themes. If you needed to consume something from a HTTP request, consider mapping the response to the state and then consuming state within the options file from the nuxtState.

import themeOne from '~/vuetify/themes/one.js'
import themeTwo from '~/vuetify/themes/two.js'

export default ({ req, nuxtState }) => {
  const isTwo = process.server ? req.env.ENABLE_TWO : nuxtState.ENABLE_TWO
  return {
    theme: {
      dark: false,
      themes: isTwo ? themeTwo : themeOne,
      options: {
        customProperties: true
      }
    }
  }

[tincho425]

Perfect! It's working now, thanks a lot @t1mwillis and my apologies for not noticing it at docs. Wonderful module people 🎉😍

[tincho425]

I've another question related to this topic 🤔 Is it possible to the default function exporting be asynchronous and make an await axios request? It isn't awaiting for the request to be finished..

export default async function({app, env, store, route, redirect}) {
   var obj = {
      theme: {
         themes: {
            light: {
               primary: {
                  base: '#123d63',
                  lighten1: '#4f6f8b'
                }
            }
         }
      }
   }
   await myaxios.get('/www', {params: {
      [...]
   }}.then((res) => {
      obj.theme.themes.light.primary.base = res
   })
   return obj
}

[manuel-84]

@tincho425 I solved this same problem using a middleware that's activated on route requests, checks in $store if configuration is loaded and if not makes an axios request and store it or loads the default, then I use the normal assignment to change vuetify colors

for (const key in $store.hub.colors) { context.$vuetify.theme.themes.light[key] = $store.hub.colors[key] }

[LeeGrobler]

@t1mwillis I've never heard of a vuetify.options.js file, and I tried setting one up now in the project root but it seems to be ignored when running the dev server. Is there some specific configuration or something for wiring up this file, or how do you get it working? 😅

[t1mwillis]

@SeriousLeeTV it's been quite a while since I worked in a project that used this package. From what I recall, this worked as expected when I set it up. Can you provide an example repo for me? Alternatively Here is the line that resolves your options path. You could try adding a console.log in your node_modules directory to make sure it's picking up your options.