Vuetify: [Bug Report] Theme loading issue

[buglavecz]

Environment

Vuetify Version: 2.1.7
Last working version: 2.1.4
Vue Version: 2.6.10
Browsers: Chrome 77.0.3865.120
OS: Windows 7

Steps to reproduce

1. Open the attached reproduction link.
2. Wait for build.
3. Press the refresh icon in the embedded codesandbox browser.
4. See the theme color is display black until 1-2 seconds.
5. After fully load the page, then color is switched to the "red" primary color.

Expected Behavior

Immediately display the page with the appropriate theme colors.

Actual Behavior

The page theme color is black until 1-2 seconds. It is not so good.

Reproduction Link

https://codesandbox.io/s/nuxtjs-vuetify-217-b0dfj

Other comments

Thanks in advance for the fix. :-) @DRoet and @johnleider.

[DRoet]

Asked about this in the vue-meta repo, https://github.com/nuxt/vue-meta/issues/481

[amritk]

Here is my workaround, snag this from the source of vuetify version 2.1.5

temp.sass
// Temporary until it gets fixed
// https://github.com/nuxt/vue-meta/issues/481
:root
    --v-anchor-base: #0D47A1
    --v-primary-base: #008940
    --v-primary-lighten3: #009546
    --v-secondary-base: #9f9f9f
    --v-secondary-lighten5: #ffffff
    --v-secondary-lighten4: #efefef
    --v-secondary-lighten3: #dfdfdf
    --v-secondary-darken2: #777777
    --v-secondary-darken3: #3e3e3e
    --v-secondary-darken5: #000000
    --v-accent-base: #0279d7
    --v-accent-lighten1: #23bfff
    --v-accent-darken3: #0d47a1
    --v-error-base: #b71c1c
    --v-error-lighten1: #ff5252
    --v-info-base: #0279d7
    --v-success-base: #28a745
    --v-success-lighten3: #4caf50
    --v-success-darken3: #00592a
    --v-warning-base: #ff8800
    --v-warning-lighten3: #fad53e
    --v-warning-darken3: #e65100

.v-application a
    color: var(--v-anchor-base)
.v-application .primary
    background-color: var(--v-primary-base) !important
    border-color: var(--v-primary-base) !important

.v-application .primary--text
    color: var(--v-primary-base) !important
    caret-color: var(--v-primary-base) !important

.v-application .primary.lighten-3
    background-color: var(--v-primary-lighten3) !important
    border-color: var(--v-primary-lighten3) !important

.v-application .primary--text.text--lighten-3
    color: var(--v-primary-lighten3) !important
    caret-color: var(--v-primary-lighten3) !important

.v-application .secondary
    background-color: var(--v-secondary-base) !important
    border-color: var(--v-secondary-base) !important

.v-application .secondary--text
    color: var(--v-secondary-base) !important
    caret-color: var(--v-secondary-base) !important

.v-application .secondary.lighten-5
    background-color: var(--v-secondary-lighten5) !important
    border-color: var(--v-secondary-lighten5) !important

.v-application .secondary--text.text--lighten-5
    color: var(--v-secondary-lighten5) !important
    caret-color: var(--v-secondary-lighten5) !important

.v-application .secondary.lighten-4
    background-color: var(--v-secondary-lighten4) !important
    border-color: var(--v-secondary-lighten4) !important

.v-application .secondary--text.text--lighten-4
    color: var(--v-secondary-lighten4) !important
    caret-color: var(--v-secondary-lighten4) !important

.v-application .secondary.lighten-3
    background-color: var(--v-secondary-lighten3) !important
    border-color: var(--v-secondary-lighten3) !important

.v-application .secondary--text.text--lighten-3
    color: var(--v-secondary-lighten3) !important
    caret-color: var(--v-secondary-lighten3) !important

.v-application .secondary.darken-2
    background-color: var(--v-secondary-darken2) !important
    border-color: var(--v-secondary-darken2) !important

.v-application .secondary--text.text--darken-2
    color: var(--v-secondary-darken2) !important
    caret-color: var(--v-secondary-darken2) !important

.v-application .secondary.darken-3
    background-color: var(--v-secondary-darken3) !important
    border-color: var(--v-secondary-darken3) !important

.v-application .secondary--text.text--darken-3
    color: var(--v-secondary-darken3) !important
    caret-color: var(--v-secondary-darken3) !important

.v-application .secondary.darken-5
    background-color: var(--v-secondary-darken5) !important
    border-color: var(--v-secondary-darken5) !important

.v-application .secondary--text.text--darken-5
    color: var(--v-secondary-darken5) !important
    caret-color: var(--v-secondary-darken5) !important

.v-application .accent
    background-color: var(--v-accent-base) !important
    border-color: var(--v-accent-base) !important

.v-application .accent--text
    color: var(--v-accent-base) !important
    caret-color: var(--v-accent-base) !important

.v-application .accent.lighten-1
    background-color: var(--v-accent-lighten1) !important
    border-color: var(--v-accent-lighten1) !important

.v-application .accent--text.text--lighten-1
    color: var(--v-accent-lighten1) !important
    caret-color: var(--v-accent-lighten1) !important

.v-application .accent.darken-3
    background-color: var(--v-accent-darken3) !important
    border-color: var(--v-accent-darken3) !important

.v-application .accent--text.text--darken-3
    color: var(--v-accent-darken3) !important
    caret-color: var(--v-accent-darken3) !important

.v-application .error
    background-color: var(--v-error-base) !important
    border-color: var(--v-error-base) !important

.v-application .error--text
    color: var(--v-error-base) !important
    caret-color: var(--v-error-base) !important

.v-application .error.lighten-1
    background-color: var(--v-error-lighten1) !important
    border-color: var(--v-error-lighten1) !important

.v-application .error--text.text--lighten-1
    color: var(--v-error-lighten1) !important
    caret-color: var(--v-error-lighten1) !important

.v-application .info
    background-color: var(--v-info-base) !important
    border-color: var(--v-info-base) !important

.v-application .info--text
    color: var(--v-info-base) !important
    caret-color: var(--v-info-base) !important

.v-application .success
    background-color: var(--v-success-base) !important
    border-color: var(--v-success-base) !important

.v-application .success--text
    color: var(--v-success-base) !important
    caret-color: var(--v-success-base) !important

.v-application .success.lighten-3
    background-color: var(--v-success-lighten3) !important
    border-color: var(--v-success-lighten3) !important

.v-application .success--text.text--lighten-3
    color: var(--v-success-lighten3) !important
    caret-color: var(--v-success-lighten3) !important

.v-application .success.darken-3
    background-color: var(--v-success-darken3) !important
    border-color: var(--v-success-darken3) !important

.v-application .success--text.text--darken-3
    color: var(--v-success-darken3) !important
    caret-color: var(--v-success-darken3) !important

.v-application .warning
    background-color: var(--v-warning-base) !important
    border-color: var(--v-warning-base) !important

.v-application .warning--text
    color: var(--v-warning-base) !important
    caret-color: var(--v-warning-base) !important

.v-application .warning.lighten-3
    background-color: var(--v-warning-lighten3) !important
    border-color: var(--v-warning-lighten3) !important

.v-application .warning--text.text--lighten-3
    color: var(--v-warning-lighten3) !important
    caret-color: var(--v-warning-lighten3) !important

.v-application .warning.darken-3
    background-color: var(--v-warning-darken3) !important
    border-color: var(--v-warning-darken3) !important

.v-application .warning--text.text--darken-3
    color: var(--v-warning-darken3) !important
    caret-color: var(--v-warning-darken3) !important

[buglavecz]

Okay, thanks.

[buglavecz]

On mobile device look like this.

[buglavecz]

...and after fully loaded the app, then look like this.

[amritk]

Now of course, I need to dynamically change the theme. So my "workaround" no longer works. Does anyone else have a hack?

[amritk]

Alright I have a new hacky workaround, so I took what I did before but created a bunch of different sass files with different themes like this:
steel-blue.sass

// Temporary until it gets fixed
:root
    --v-primary-base: #0E5E9E

And here this colour var can be changeed to whatever
parent.vue

    async created () {
        // Temporary until it gets fixed
        /* eslint-disable */
        // @ts-ignore  
        const colour = true ? 'steel-blue' : 'red'
        await import(`../assets/styles/themes/${colour}.sass`)
    }

Edit:
Scratch that, my workaround only seems to work in development, does not work in production

[amritk]

Alright found a new workaround https://github.com/vuetifyjs/vuetify/issues/9453#issuecomment-604217303