src/core/MdTheme.js
import Vue from 'vue'
let msColor = null
let themeColor = null
let maskIcon = null
export default new Vue({
data: () => ({
prefix: 'md-theme-',
theme: 'default',
enabled: true,
metaColors: false
}),
computed: {
themeTarget () {
if (!this.$isServer) {
return document.documentElement
}
return false
},
fullThemeName () {
return this.getThemeName()
}
},
watch: {
enabled: {
immediate: true,
handler () {
const { fullThemeName, themeTarget, enabled } = this
if (themeTarget) {
if (enabled) {
themeTarget.classList.add(fullThemeName)
this.metaColors && this.setHtmlMetaColors(fullThemeName)
} else {
themeTarget.classList.remove(fullThemeName)
this.metaColors && this.setHtmlMetaColors()
}
}
}
},
theme (newTheme, oldTheme) {
const { getThemeName, themeTarget } = this
newTheme = getThemeName(newTheme)
themeTarget.classList.remove(getThemeName(oldTheme))
themeTarget.classList.add(newTheme)
if (this.metaColors) {
this.setHtmlMetaColors(newTheme)
}
},
metaColors (meta) {
if (meta) {
this.setHtmlMetaColors(this.fullThemeName)
} else {
this.setHtmlMetaColors()
}
}
},
methods: {
getAncestorTheme (component) {
if (component) {
const currentTheme = component.mdTheme
const getParentThemeName = (parent) => {
if (parent) {
const { mdTheme, $parent } = parent
if (mdTheme && mdTheme !== currentTheme) {
return mdTheme
}
return getParentThemeName($parent)
}
return this.theme
}
return getParentThemeName(component.$parent)
}
return null
},
getThemeName (theme) {
const themeName = theme || this.theme
return this.prefix + themeName
},
setMicrosoftColors (primaryColor) {
if (msColor) {
msColor.setAttribute('content', primaryColor)
}
},
setThemeColors (primaryColor) {
if (themeColor) {
themeColor.setAttribute('content', primaryColor)
}
},
setMaskColors (primaryColor) {
if (maskIcon) {
maskIcon.setAttribute('color', primaryColor)
}
},
setHtmlMetaColors (themeName) {
let primaryColor = '#fff'
if (themeName) {
const computedStyle = window.getComputedStyle(document.documentElement)
primaryColor = computedStyle.getPropertyValue(`--${themeName}-primary`)
}
if (primaryColor) {
this.setMicrosoftColors(primaryColor)
this.setThemeColors(primaryColor)
this.setMaskColors(primaryColor)
}
}
},
mounted () {
msColor = document.querySelector('[name="msapplication-TileColor"]')
themeColor = document.querySelector('[name="theme-color"]')
maskIcon = document.querySelector('[rel="mask-icon"]')
if (this.enabled && this.metaColors) {
window.addEventListener('load', () => {
this.setHtmlMetaColors(this.fullThemeName)
})
}
}
})