fix theme switching
parent
071afce1f3
commit
c3c8c3959d
37
src/App.vue
37
src/App.vue
|
@ -49,7 +49,6 @@ export default {
|
||||||
}
|
}
|
||||||
|
|
||||||
this.newsActive = this.newsActive && sessionStorage.getItem('primevue-news-hidden') == null;
|
this.newsActive = this.newsActive && sessionStorage.getItem('primevue-news-hidden') == null;
|
||||||
this.initTheme();
|
|
||||||
},
|
},
|
||||||
watch: {
|
watch: {
|
||||||
$route: {
|
$route: {
|
||||||
|
@ -69,22 +68,6 @@ export default {
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
methods: {
|
methods: {
|
||||||
initTheme() {
|
|
||||||
let appTheme;
|
|
||||||
const queryString = window.location.search;
|
|
||||||
if (queryString)
|
|
||||||
appTheme = new URLSearchParams(queryString.substring(1)).get('theme');
|
|
||||||
else
|
|
||||||
appTheme = localStorage.getItem('primevue-theme');
|
|
||||||
|
|
||||||
if (appTheme) {
|
|
||||||
let darkTheme = this.isDarkTheme(appTheme);
|
|
||||||
this.changeTheme({
|
|
||||||
theme: appTheme,
|
|
||||||
dark: darkTheme
|
|
||||||
});
|
|
||||||
}
|
|
||||||
},
|
|
||||||
onMenuButtonClick() {
|
onMenuButtonClick() {
|
||||||
if (this.sidebarActive) {
|
if (this.sidebarActive) {
|
||||||
this.sidebarActive = false;
|
this.sidebarActive = false;
|
||||||
|
@ -105,10 +88,12 @@ export default {
|
||||||
event.stopPropagation();
|
event.stopPropagation();
|
||||||
},
|
},
|
||||||
changeTheme(event) {
|
changeTheme(event) {
|
||||||
let themeElement = document.getElementById('theme-link');
|
let themeLink = document.getElementById('theme-link');
|
||||||
themeElement.setAttribute('href', themeElement.getAttribute('href').replace(this.theme, event.theme));
|
let href = 'themes/' + event.theme + '/theme.css';
|
||||||
this.theme = event.theme;
|
this.theme = event.theme;
|
||||||
|
|
||||||
|
this.replaceLink(themeLink, href);
|
||||||
|
|
||||||
this.activeMenuIndex = null;
|
this.activeMenuIndex = null;
|
||||||
|
|
||||||
EventBus.emit('change-theme', event);
|
EventBus.emit('change-theme', event);
|
||||||
|
@ -117,8 +102,20 @@ export default {
|
||||||
if (event.theme.startsWith('md')) {
|
if (event.theme.startsWith('md')) {
|
||||||
this.$primevue.config.ripple = true;
|
this.$primevue.config.ripple = true;
|
||||||
}
|
}
|
||||||
|
},
|
||||||
|
replaceLink(linkElement, href) {
|
||||||
|
const id = linkElement.getAttribute('id');
|
||||||
|
const cloneLinkElement = linkElement.cloneNode(true);
|
||||||
|
|
||||||
localStorage.setItem('primevue-theme', this.theme);
|
cloneLinkElement.setAttribute('href', href);
|
||||||
|
cloneLinkElement.setAttribute('id', id + '-clone');
|
||||||
|
|
||||||
|
linkElement.parentNode.insertBefore(cloneLinkElement, linkElement.nextSibling);
|
||||||
|
|
||||||
|
cloneLinkElement.addEventListener('load', () => {
|
||||||
|
linkElement.remove();
|
||||||
|
cloneLinkElement.setAttribute('id', id);
|
||||||
|
});
|
||||||
},
|
},
|
||||||
addClass(element, className) {
|
addClass(element, className) {
|
||||||
if (!this.hasClass(element, className)) {
|
if (!this.hasClass(element, className)) {
|
||||||
|
|
Loading…
Reference in New Issue