vertumnus
/
primevue-mirror
mirror of https://github.com/primefaces/primevue.git
1
0
Fork 0
Code Packages Releases Activity

Sync table theme with dark/light mode

pull/2207/head
Cagatay Civici 2022-02-24 00:19:22 +03:00
parent eb5f453b24
commit 843320f519
1 changed files with 17 additions and 10 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

11
src/Home.vue
View File

@ -49,6 +49,8 @@ export default {
expire.setTime(today.getTime() + 3600000*24*7); expire.setTime(today.getTime() + 3600000*24*7);
document.cookie = 'primeaffiliateid=' + afId + ';expires=' + expire.toUTCString() + ';path=/; domain:primefaces.org'; document.cookie = 'primeaffiliateid=' + afId + ';expires=' + expire.toUTCString() + ';path=/; domain:primefaces.org';
} }
this.replaceTableTheme(this.$appState.darkTheme ? 'lara-dark-indigo': 'lara-light-indigo');
}, },
methods: { methods: {
onThemeToggle() { onThemeToggle() {
@ -64,9 +66,13 @@ export default {
replaceTableTheme(newTheme) { replaceTableTheme(newTheme) {
const elementId = 'home-table-link'; const elementId = 'home-table-link';
const linkElement = document.getElementById(elementId); const linkElement = document.getElementById(elementId);
const cloneLinkElement = linkElement.cloneNode(true); const tableThemeTokens = linkElement.getAttribute('href').split('/');
const newThemeUrl = linkElement.getAttribute('href').replace(this.tableTheme, newTheme); const currentTableTheme = tableThemeTokens[tableThemeTokens.length - 2];
if (currentTableTheme !== newTheme) {
const newThemeUrl = linkElement.getAttribute('href').replace(currentTableTheme, newTheme);
const cloneLinkElement = linkElement.cloneNode(true);
cloneLinkElement.setAttribute('id', elementId + '-clone'); cloneLinkElement.setAttribute('id', elementId + '-clone');
cloneLinkElement.setAttribute('href', newThemeUrl); cloneLinkElement.setAttribute('href', newThemeUrl);
cloneLinkElement.addEventListener('load', () => { cloneLinkElement.addEventListener('load', () => {
@ -77,6 +83,7 @@ export default {
this.tableTheme = newTheme; this.tableTheme = newTheme;
} }
}
}, },
computed: { computed: {
landingClass() { landingClass() {