I'm using Vuetify to create my social media website. The problem that I'm facing now is that I want to use dark attribute, so user can switch between normal and dark theme. The thing is that I can't use any of Vue's conditional rendering methods, as dark is not an attribute that you can bind. Below is the part of code that you use to apply dark theme:
<v-app dark>
Yes dark or light are not attributes, they are props which can take values, in this case true or false
You can find this in vuetify's documentations.
Props are the properties which are used for communication with child components. And are prefixed with : in order to distinguish it with normal properties.
Coming to the solution.
<v-app :dark="true">
or
<v-app :dark="false">
You can replace true or false with any reactive data options or computed properties to make the theme change programmatically.
As documentation says you can just update variable this.$vuetify.theme.dark:
You can manually turn dark on and off by changing this.$vuetify.theme.dark to true or false.
To be able to persist theme with localstorage
Inside plugins/vuetify.js or plugins/vuetify.ts add this:
export default new Vuetify({
theme: {
//
dark: localStorage.getItem('theme') === 'dark',
//
}
})
then on the button you want to switch theme apply the following function:
switchTheme() {
this.$vuetify.theme.dark = !this.$vuetify.theme.dark;
localStorage.setItem('theme', this.$vuetify.theme.dark ? 'dark' : 'light');
}
If a component is used as the App:
<template>
<v-app :dark="isDark"></v-app>
</template>
<script>
export default {
data () {
return {
isDark: false,
}
},
}
</script>
It can also be called from the app instance
thru its instantiated object defined property
app.__vue__.isDark = isDark
when being instantiated like :
const app = new Vue(
{
data: () => ({
isDark: false
}),
}
)
So it can be called from other component
:dark="true|false"? Check the demo at codepen.io/ittus/pen/dedMRE? – ittus