mirror of
https://github.com/mokuappio/serverless-invoices.git
synced 2025-10-29 00:41:08 -04:00
Footer with theme switch, data notice, upgrade cta and a github link
This commit is contained in:
21
src/App.vue
21
src/App.vue
@ -16,6 +16,9 @@ export default {
|
||||
created() {
|
||||
this.pauseAnimationsUntilLoaded();
|
||||
},
|
||||
mounted() {
|
||||
this.initColorScheme();
|
||||
},
|
||||
methods: {
|
||||
jsLoaded() {
|
||||
document.body.classList.remove('js-loading');
|
||||
@ -24,6 +27,24 @@ export default {
|
||||
document.body.classList.add('js-loading');
|
||||
window.addEventListener('load', this.jsLoaded, false);
|
||||
},
|
||||
initColorScheme() {
|
||||
// local storage is used to override OS theme settings
|
||||
if (localStorage.getItem('theme')) {
|
||||
if (localStorage.getItem('theme') === 'dark') {
|
||||
this.$store.commit('themes/theme', 'dark');
|
||||
return document.documentElement.setAttribute('data-theme', 'dark');
|
||||
}
|
||||
} else if (!window.matchMedia) {
|
||||
// matchMedia method not supported
|
||||
return false;
|
||||
} else if (window.matchMedia('(prefers-color-scheme: dark)').matches) {
|
||||
// OS theme setting detected as dark
|
||||
this.$store.commit('themes/theme', 'dark');
|
||||
console.log('hello there');
|
||||
return document.documentElement.setAttribute('data-theme', 'dark');
|
||||
}
|
||||
document.documentElement.setAttribute('data-theme', this.theme || 'light');
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
Reference in New Issue
Block a user