Code: Select all
export default {
data() {
return {
theme: 'blue',
layoutMode: 'dark',
topbarTheme: 'blue',
menuTheme: 'light',
}
},
Code: Select all
export default {
data() {
return {
theme: 'blue',
layoutMode: 'dark',
topbarTheme: 'blue',
menuTheme: 'light',
}
},
Code: Select all
# config.js
export default {
layoutMode: 'dark'
}
# AppWrapper.vue
<script>
import configs from '@/configs'
const { layoutMode } = configs
export default {
data() {
return {
layoutMode: layoutMode
}
},
mounted : {
this.onLayoutChange(layoutMode)
this.onLayoutModeChange(layoutMode)
},
methods: {
onLayoutChange(layout) {
this.layoutMode = layout
this.$appState.layoutMode = layout
this.menuTheme = layout
const logo = document.getElementById('logo')
logo.src = 'assets/layout/images/logo-light.svg'
if (layout === 'dark') {
this.topbarTheme = 'dark'
}
else {
this.topbarTheme = 'blue'
}
},
onLayoutModeChange(menuColor) {
const layoutLink = document.getElementById('layout-css')
const layoutHref = 'assets/layout/css/layout-' + menuColor + '.css'
this.replaceLink(layoutLink, layoutHref)
const themeLink = document.getElementById('theme-css')
const urlTokens = themeLink.getAttribute('href').split('/')
urlTokens[urlTokens.length - 1] = 'theme-' + menuColor + '.css'
const newURL = urlTokens.join('/')
this.replaceLink(themeLink, newURL, () => {
this.$appState.isNewThemeLoaded = true
})
},
replaceLink(linkElement, href, callback) {
const id = linkElement.getAttribute('id')
const cloneLinkElement = linkElement.cloneNode(true)
cloneLinkElement.setAttribute('href', href)
cloneLinkElement.setAttribute('id', id + '-clone')
linkElement.parentNode.insertBefore(cloneLinkElement, linkElement.nextSibling)
cloneLinkElement.addEventListener('load', () => {
linkElement.remove()
cloneLinkElement.setAttribute('id', id)
if (callback) {
callback()
}
})
},
}
}
Users browsing this forum: No registered users and 2 guests