108 lines
2 KiB
JavaScript
108 lines
2 KiB
JavaScript
|
import Vue from 'vue';
|
||
|
|
export function functionalThemeClasses(context) {
|
||
|
|
const vm = { ...context.props,
|
||
|
|
...context.injections
|
||
|
|
};
|
||
|
|
const isDark = Themeable.options.computed.isDark.call(vm);
|
||
|
|
return Themeable.options.computed.themeClasses.call({
|
||
|
|
isDark
|
||
|
|
});
|
||
|
|
}
|
||
|
|
/* @vue/component */
|
||
|
|
|
||
|
|
const Themeable = Vue.extend().extend({
|
||
|
|
name: 'themeable',
|
||
|
|
|
||
|
|
provide() {
|
||
|
|
return {
|
||
|
|
theme: this.themeableProvide
|
||
|
|
};
|
||
|
|
},
|
||
|
|
|
||
|
|
inject: {
|
||
|
|
theme: {
|
||
|
|
default: {
|
||
|
|
isDark: false
|
||
|
|
}
|
||
|
|
}
|
||
|
|
},
|
||
|
|
props: {
|
||
|
|
dark: {
|
||
|
|
type: Boolean,
|
||
|
|
default: null
|
||
|
|
},
|
||
|
|
light: {
|
||
|
|
type: Boolean,
|
||
|
|
default: null
|
||
|
|
}
|
||
|
|
},
|
||
|
|
|
||
|
|
data() {
|
||
|
|
return {
|
||
|
|
themeableProvide: {
|
||
|
|
isDark: false
|
||
|
|
}
|
||
|
|
};
|
||
|
|
},
|
||
|
|
|
||
|
|
computed: {
|
||
|
|
appIsDark() {
|
||
|
|
return this.$vuetify.theme.dark || false;
|
||
|
|
},
|
||
|
|
|
||
|
|
isDark() {
|
||
|
|
if (this.dark === true) {
|
||
|
|
// explicitly dark
|
||
|
|
return true;
|
||
|
|
} else if (this.light === true) {
|
||
|
|
// explicitly light
|
||
|
|
return false;
|
||
|
|
} else {
|
||
|
|
// inherit from parent, or default false if there is none
|
||
|
|
return this.theme.isDark;
|
||
|
|
}
|
||
|
|
},
|
||
|
|
|
||
|
|
themeClasses() {
|
||
|
|
return {
|
||
|
|
'theme--dark': this.isDark,
|
||
|
|
'theme--light': !this.isDark
|
||
|
|
};
|
||
|
|
},
|
||
|
|
|
||
|
|
/** Used by menus and dialogs, inherits from v-app instead of the parent */
|
||
|
|
rootIsDark() {
|
||
|
|
if (this.dark === true) {
|
||
|
|
// explicitly dark
|
||
|
|
return true;
|
||
|
|
} else if (this.light === true) {
|
||
|
|
// explicitly light
|
||
|
|
return false;
|
||
|
|
} else {
|
||
|
|
// inherit from v-app
|
||
|
|
return this.appIsDark;
|
||
|
|
}
|
||
|
|
},
|
||
|
|
|
||
|
|
rootThemeClasses() {
|
||
|
|
return {
|
||
|
|
'theme--dark': this.rootIsDark,
|
||
|
|
'theme--light': !this.rootIsDark
|
||
|
|
};
|
||
|
|
}
|
||
|
|
|
||
|
|
},
|
||
|
|
watch: {
|
||
|
|
isDark: {
|
||
|
|
handler(newVal, oldVal) {
|
||
|
|
if (newVal !== oldVal) {
|
||
|
|
this.themeableProvide.isDark = this.isDark;
|
||
|
|
}
|
||
|
|
},
|
||
|
|
|
||
|
|
immediate: true
|
||
|
|
}
|
||
|
|
}
|
||
|
|
});
|
||
|
|
export default Themeable;
|
||
|
|
//# sourceMappingURL=index.js.map
|