Allow to remove the background and select a custom colour

Signed-off-by: John Molakvoæ <skjnldsv@protonmail.com>

1 files changed, 16 insertions, 9 deletions

diff --git a/apps/theming/src/UserThemes.vue b/apps/theming/src/UserThemes.vue
index 5a41c019017..7220820a3c3 100644
--- a/apps/theming/src/UserThemes.vue
+++ b/apps/theming/src/UserThemes.vue
@@ -69,10 +69,7 @@
 			</template>
 			<template v-else>
 				<p>{{ t('theming', 'Set a custom background') }}</p>
-				<BackgroundSettings class="background__grid"
-					:background="background"
-					:theming-default-background="themingDefaultBackground"
-					@update:background="updateBackground" />
+				<BackgroundSettings class="background__grid" @update:background="refreshGlobalStyles" />
 			</template>
 		</NcSettingsSection>
 	</section>
@@ -92,8 +89,6 @@ const availableThemes = loadState('theming', 'themes', [])
 const enforceTheme = loadState('theming', 'enforceTheme', '')
 const shortcutsDisabled = loadState('theming', 'shortcutsDisabled', false)
 
-const background = loadState('theming', 'background')
-const themingDefaultBackground = loadState('theming', 'themingDefaultBackground')
 const isUserThemingDisabled = loadState('theming', 'isUserThemingDisabled')
 
 console.debug('Available themes', availableThemes)
@@ -111,10 +106,10 @@ export default {
 	data() {
 		return {
 			availableThemes,
+
+			// Admin defined configs
 			enforceTheme,
 			shortcutsDisabled,
-			background,
-			themingDefaultBackground,
 			isUserThemingDisabled,
 		}
 	},
@@ -173,9 +168,21 @@ export default {
 	},
 
 	methods: {
+		// Refresh server-side generated theming CSS
+		refreshGlobalStyles() {
+			[...document.head.querySelectorAll('link.theme')].forEach(theme => {
+				const url = new URL(theme.href)
+				url.searchParams.set('v', Date.now())
+				const newTheme = theme.cloneNode()
+				newTheme.href = url.toString()
+				newTheme.onload = () => theme.remove()
+				document.head.append(newTheme)
+			})
+		},
+
 		updateBackground(data) {
 			this.background = (data.type === 'custom' || data.type === 'default') ? data.type : data.value
-			this.$emit('update:background')
+			this.refreshGlobalStyles()
 		},
 
 		changeTheme({ enabled, id }) {