1 1
import Vue from 'vue'
2
import { PropType, RenderContext } from 'vue/types/options'
3

4
/* eslint-disable-next-line no-use-before-define */
5
interface Themeable extends Vue {
6
  theme: {
7
    isDark: boolean
8
  }
9
}
10

11 1
export function functionalThemeClasses (context: RenderContext): object {
12 1
  const vm = {
13
    ...context.props,
14
    ...context.injections,
15
  }
16 1
  const isDark = Themeable.options.computed.isDark.call(vm)
17 1
  return Themeable.options.computed.themeClasses.call({ isDark })
18
}
19

20
/* @vue/component */
21 1
const Themeable = Vue.extend<Themeable>().extend({
22
  name: 'themeable',
23

24 1
  provide (): object {
25 1
    return {
26
      theme: this.themeableProvide,
27
    }
28
  },
29

30
  inject: {
31
    theme: {
32
      default: {
33
        isDark: false,
34
      },
35
    },
36
  },
37

38
  props: {
39
    dark: {
40
      type: Boolean as PropType<boolean | null>,
41
      default: null,
42
    },
43
    light: {
44
      type: Boolean as PropType<boolean | null>,
45
      default: null,
46
    },
47
  },
48

49 1
  data () {
50 1
    return {
51
      themeableProvide: {
52
        isDark: false,
53
      },
54
    }
55
  },
56

57
  computed: {
58 1
    appIsDark (): boolean {
59 1
      return this.$vuetify.theme.dark || false
60
    },
61 1
    isDark (): boolean {
62 1
      if (this.dark === true) {
63
        // explicitly dark
64 1
        return true
65 1
      } else if (this.light === true) {
66
        // explicitly light
67 1
        return false
68
      } else {
69
        // inherit from parent, or default false if there is none
70 1
        return this.theme.isDark
71
      }
72
    },
73 1
    themeClasses (): object {
74 1
      return {
75
        'theme--dark': this.isDark,
76
        'theme--light': !this.isDark,
77
      }
78
    },
79
    /** Used by menus and dialogs, inherits from v-app instead of the parent */
80 1
    rootIsDark (): boolean {
81 1
      if (this.dark === true) {
82
        // explicitly dark
83 0
        return true
84 1
      } else if (this.light === true) {
85
        // explicitly light
86 0
        return false
87
      } else {
88
        // inherit from v-app
89 1
        return this.appIsDark
90
      }
91
    },
92 1
    rootThemeClasses (): Dictionary<boolean> {
93 1
      return {
94
        'theme--dark': this.rootIsDark,
95
        'theme--light': !this.rootIsDark,
96
      }
97
    },
98
  },
99

100
  watch: {
101
    isDark: {
102 1
      handler (newVal, oldVal) {
103 1
        if (newVal !== oldVal) {
104 1
          this.themeableProvide.isDark = this.isDark
105
        }
106
      },
107
      immediate: true,
108
    },
109
  },
110
})
111

112 1
export default Themeable

Read our documentation on viewing source code .

Loading