Spotify/top-lists
0
0
Fork 0
Code Issues Activity

Make the theme transition smoother, without affecting page load

Browse source
This commit is contained in:
Oliver-Akins 2020-11-03 18:25:06 -07:00
parent 2c229e65c7
commit 4dec762c98
1 changed files with 15 additions and 0 deletions
Download patch file Download diff file Expand all files Collapse all files

15
src/components/modals/ThemeModal.vue
View file

@ -41,6 +41,7 @@ export default {
content: false, content: false,
chosen_theme: `dark`, chosen_theme: `dark`,
default_theme: `dark`, default_theme: `dark`,
style_id: `colour-transition`,
themes: [ themes: [
{ {
name: `Dark`, name: `Dark`,
@ -73,6 +74,17 @@ export default {
}}, }},
mounted() { mounted() {
this.chosen_theme = localStorage.getItem(`tl-theme`) || this.default_theme; this.chosen_theme = localStorage.getItem(`tl-theme`) || this.default_theme;
// Add the CSS to the document so that we can transition nicely
let colour_transition = document.createElement(`style`);
colour_transition.id = this.style_id;
colour_transition.innerText=`/* Transition colours for theme changes */
* {
transition: color .5s;
transition: background-color .5s;
}`;
document.body.appendChild(colour_transition);
this.$nextTick(function() { this.$nextTick(function() {
this.container = true; this.container = true;
}); });
@ -96,6 +108,9 @@ export default {
document.getElementById(`theme`).href = `/static/css/theme/${val}.css`; document.getElementById(`theme`).href = `/static/css/theme/${val}.css`;
} }
}, },
beforeDestroy() {
document.body.removeChild(document.body.getElementById(this.style_id));
},
} }
</script> </script>