From 4dec762c985c4d82b0875856c98abbdb60a75668 Mon Sep 17 00:00:00 2001
From: Oliver-Akins <Tyler.Akins1999@gmail.com>
Date: Tue, 3 Nov 2020 18:25:06 -0700
Subject: [PATCH] Make the theme transition smoother, without affecting page
 load

---
 src/components/modals/ThemeModal.vue | 15 +++++++++++++++
 1 file changed, 15 insertions(+)

diff --git a/src/components/modals/ThemeModal.vue b/src/components/modals/ThemeModal.vue
index 0d35cdf..4e0956a 100644
--- a/src/components/modals/ThemeModal.vue
+++ b/src/components/modals/ThemeModal.vue
@@ -41,6 +41,7 @@ export default {
 		content: false,
 		chosen_theme: `dark`,
 		default_theme: `dark`,
+		style_id: `colour-transition`,
 		themes: [
 			{
 				name: `Dark`,
@@ -73,6 +74,17 @@ export default {
 	}},
 	mounted() {
 		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.container = true;
 		});
@@ -96,6 +108,9 @@ export default {
 			document.getElementById(`theme`).href = `/static/css/theme/${val}.css`;
 		}
 	},
+	beforeDestroy() {
+		document.body.removeChild(document.body.getElementById(this.style_id));
+	},
 }
 </script>