Vuetify: [Bug Report] "Dark" property change on v-app not cascadeing to child components

[StephanusRex]

Environment

Vuetify Version: 2.0.0
Vue Version: 2.6.10
Browsers: Firefox 68.0
OS: Windows 10

Steps to reproduce

See CodePen link for sample code. If you move the ":dark='isDark'" prop to, say, the "v-btn" component and then change the value of "isDark" in the debugger, it works. But, as in this example, the ":dark" prop is bound at the v-app level and does not cascade the theme down to the children components.

Expected Behavior

The value of "dark" is bound to an app-level datum named "isDark". When this value is changed (in the debugger), the dark theme is NOT applied to any child components. If the "dark" prop is bound on a particular component, e.g., a v-btn, it works as expected.

Actual Behavior

As stated, the dark theme is not applied when the value of "dark" is changed on the v-app.

Reproduction Link

https://codepen.io/steve-king/pen/bXwdMy

Other comments

I am using the CDN version of Vuetify (reference in the code at CodePen).

[jacekkarczmarczyk]

dark prop has been removed from v-app in 2.0, use this.$vuetify.theme.dark = true/false

[StephanusRex]

Thanks for the quick response. Seeing that I'm a complete n00b, in what context can I use "this.$vuetify.theme.dark"? I tried using it in the @click of a v-btn but I'm getting an error, i.e., that "this.$vuetify" is undefined.

Thanks in advance.

[jacekkarczmarczyk]

You use this in javascript section, in templates you can omit it, so to make the button toggle the theme do:

<v-btn @click="$vuetify.theme.dark = !$vuetify.theme.dark">

Also you should fix the version of cdn libs, so instead of

href="https://cdn.jsdelivr.net/npm/vuetify/dist/vuetify.min.css"

use

href="https://cdn.jsdelivr.net/npm/[email protected]/dist/vuetify.min.css"

(or 1.x if you want 1.x version)

[StephanusRex]

Of course! Thanks!

On Thu, Jul 25, 2019 at 2:03 PM Jacek Karczmarczyk [e-mail]
wrote:

You use this in javascript section, in templates you can omit it, so to
make the button toggle the theme do:

Also you should fix the version of cdn libs, so instead of

href="https://cdn.jsdelivr.net/npm/vuetify/dist/vuetify.min.css"

use

href="https://cdn.jsdelivr.net/npm/[email protected]/dist/vuetify.min.css"

(or 1.x if you want 1.x version)

—
You are receiving this because you authored the thread.
Reply to this email directly, view it on GitHub
https://github.com/vuetifyjs/vuetify/issues/8021?email_source=notifications&email_token=AF4JWV7MSHNWATGEBQEJMZDQBHTHTA5CNFSM4IG46AFKYY3PNVWWK3TUL52HS4DFVREXG43VMVBW63LNMVXHJKTDN5WW2ZLOORPWSZGOD22JNSY#issuecomment-515151563,
or mute the thread
https://github.com/notifications/unsubscribe-auth/AF4JWVZHE3NNFSSGTERN6D3QBHTHTANCNFSM4IG46AFA
.

>

---

Sincerely,

Steven M. King