index.ts at 6ac659b ⋅ vuetifyjs/vuetify

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

/* eslint-disable-next-line no-use-before-define */
interface Themeable extends Vue {
  theme: {
    isDark: boolean
  }
}

export function functionalThemeClasses (context: RenderContext): object {
  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<Themeable>().extend({
  name: 'themeable',

  provide (): object {
    return {
      theme: this.themeableProvide,
    }
  },

  inject: {
    theme: {
      default: {
        isDark: false,
      },
    },
  },

  props: {
    dark: {
      type: Boolean as PropType<boolean | null>,
      default: null,
    },
    light: {
      type: Boolean as PropType<boolean | null>,
      default: null,
    },
  },

  data () {
    return {
      themeableProvide: {
        isDark: false,
      },
    }
  },

  computed: {
    appIsDark (): boolean {
      return this.$vuetify.theme.dark || false
    },
    isDark (): boolean {
      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 (): object {
      return {
        'theme--dark': this.isDark,
        'theme--light': !this.isDark,
      }
    },
    /** Used by menus and dialogs, inherits from v-app instead of the parent */
    rootIsDark (): boolean {
      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 (): Dictionary<boolean> {
      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

Read our documentation on viewing source code .

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

Navigation	Overlay
`t` Navigate files	`h` Toggle hits
`y` Change url to tip of branch	`m` Toggle misses
`b / v` Jump to prev/next hit line	`p` Toggle partial
`z / x` Jump to prev/next missed or partial line	`1..9` Toggle flags
`shift + o` Open current page in GitHub	`a` Toggle all on
`/ or ?` Show keyboard shortcuts dialog	`c` Toggle context lines or commits