|
- 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
|