Fix various theming bugs

apps/dashboard/src/DashboardApp.vue

@@ -88,7 +88,7 @@
 </template>
 
 <script>
-import { generateUrl, imagePath } from '@nextcloud/router'
+import { generateUrl } from '@nextcloud/router'
 import { getCurrentUser } from '@nextcloud/auth'
 import { loadState } from '@nextcloud/initial-state'
 import axios from '@nextcloud/axios'
@@ -99,13 +99,11 @@ import Pencil from 'vue-material-design-icons/Pencil.vue'
 import Vue from 'vue'
 
 import isMobile from './mixins/isMobile.js'
-import { getBackgroundUrl } from './helpers/getBackgroundUrl.js'
 
 const panels = loadState('dashboard', 'panels')
 const firstRun = loadState('dashboard', 'firstRun')
 
 const background = loadState('theming', 'background')
-const backgroundVersion = loadState('theming', 'backgroundVersion')
 const themingDefaultBackground = loadState('theming', 'themingDefaultBackground')
 const shippedBackgroundList = loadState('theming', 'shippedBackgrounds')
 
@@ -155,19 +153,6 @@ export default {
 		}
 	},
 	computed: {
-		backgroundImage() {
-			return getBackgroundUrl(this.background, backgroundVersion, this.themingDefaultBackground)
-		},
-		backgroundStyle() {
-			if ((this.background === 'default' && this.themingDefaultBackground === 'backgroundColor')
-				|| this.background.match(/#[0-9A-Fa-f]{6}/g)) {
-				return null
-			}
-
-			return {
-				backgroundImage: this.background === 'default' ? 'var(--image-main-background)' : `url('${this.backgroundImage}')`,
-			}
-		},
 		greeting() {
 			const time = this.timer.getHours()
 
@@ -286,17 +271,6 @@ export default {
 				// document.body.removeAttribute('data-theme-light')
 				// document.body.setAttribute('data-theme-dark', 'true')
 			}
-
-			const themeElements = [document.documentElement, document.querySelector('#header'), document.querySelector('body')]
-			for (const element of themeElements) {
-				if (this.background === 'default') {
-					element.style.setProperty('--image-main-background', `url('${imagePath('core', 'app-background.jpg')}')`)
-				} else if (this.background.match(/#[0-9A-Fa-f]{6}/g)) {
-					element.style.setProperty('--image-main-background', undefined)
-				} else {
-					element.style.setProperty('--image-main-background', this.backgroundStyle.backgroundImage)
-				}
-			}
 		},
 		/**
 		 * Method to register panels that will be called by the integrating apps

apps/theming/lib/Themes/DefaultTheme.php

@@ -227,9 +227,15 @@ public function getCSSVariables(): array {
 			$themingBackground = $this->config->getUserValue($user->getUID(), Application::APP_ID, 'background', 'default');
 
 			if ($themingBackground === 'custom') {
+				// Custom
 				$variables['--image-main-background'] = "url('" . $this->urlGenerator->linkToRouteAbsolute('theming.userTheme.getBackground') . "')";
 			} elseif ($themingBackground !== 'default' && substr($themingBackground, 0, 1) !== '#') {
+				// Shipped background
 				$variables['--image-main-background'] = "url('" . $this->urlGenerator->linkTo(Application::APP_ID, "/img/background/$themingBackground") . "')";
+			} elseif (substr($themingBackground, 0, 1) === '#') {
+				// Color
+				unset($variables['--image-main-background']);
+				$variables['--color-main-background-plain'] = $this->primaryColor;
 			}
 		}
 

apps/theming/src/UserThemes.vue

@@ -74,7 +74,7 @@
 </template>
 
 <script>
-import { generateOcsUrl, imagePath } from '@nextcloud/router'
+import { generateOcsUrl } from '@nextcloud/router'
 import { loadState } from '@nextcloud/initial-state'
 import axios from '@nextcloud/axios'
 import NcCheckboxRadioSwitch from '@nextcloud/vue/dist/Components/NcCheckboxRadioSwitch'
@@ -83,8 +83,6 @@ import NcSettingsSection from '@nextcloud/vue/dist/Components/NcSettingsSection'
 import BackgroundSettings from './components/BackgroundSettings.vue'
 import ItemPreview from './components/ItemPreview.vue'
 
-import { getBackgroundUrl } from '../src/helpers/getBackgroundUrl.js'
-
 const availableThemes = loadState('theming', 'themes', [])
 const enforceTheme = loadState('theming', 'enforceTheme', '')
 const shortcutsDisabled = loadState('theming', 'shortcutsDisabled', false)
@@ -111,24 +109,12 @@ export default {
 			enforceTheme,
 			shortcutsDisabled,
 			background,
+			backgroundVersion,
 			themingDefaultBackground,
 		}
 	},
 
 	computed: {
-		backgroundImage() {
-			return getBackgroundUrl(this.background, backgroundVersion, this.themingDefaultBackground)
-		},
-		backgroundStyle() {
-			if ((this.background === 'default' && this.themingDefaultBackground === 'backgroundColor')
-				|| this.background.match(/#[0-9A-Fa-f]{6}/g)) {
-				return null
-			}
-
-			return {
-				backgroundImage: this.background === 'default' ? 'var(--image-main-background)' : `url('${this.backgroundImage}')`,
-			}
-		},
 		themes() {
 			return this.availableThemes.filter(theme => theme.type === 1)
 		},
@@ -183,7 +169,9 @@ export default {
 	methods: {
 		updateBackground(data) {
 			this.background = (data.type === 'custom' || data.type === 'default') ? data.type : data.value
+			this.backgroundVersion = data.version
 			this.updateGlobalStyles()
+			this.$emit('update:background')
 		},
 		updateGlobalStyles() {
 			// Override primary-invert-if-bright and color-primary-text if background is set
@@ -199,17 +187,6 @@ export default {
 				// document.body.removeAttribute('data-theme-light')
 				// document.body.setAttribute('data-theme-dark', 'true')
 			}
-
-			const themeElements = [document.documentElement, document.querySelector('#header'), document.querySelector('body')]
-			for (const element of themeElements) {
-				if (this.background === 'default') {
-					element.style.setProperty('--image-main-background', `url('${imagePath('core', 'app-background.jpg')}')`)
-				} else if (this.background.match(/#[0-9A-Fa-f]{6}/g)) {
-					element.style.setProperty('--image-main-background', undefined)
-				} else {
-					element.style.setProperty('--image-main-background', this.backgroundStyle.backgroundImage)
-				}
-			}
 		},
 		changeTheme({ enabled, id }) {
 			// Reset selected and select new one

apps/theming/src/components/BackgroundSettings.vue

@@ -38,7 +38,7 @@
 			{{ t('theming', 'Default image') }}
 		</button>
 		<button class="background color"
-			:class="{ active: background === 'custom' }"
+			:class="{ active: background.startsWith('#') }"
 			tabindex="0"
 			@click="pickColor">
 			{{ t('theming', 'Plain background') }}

apps/theming/src/helpers/getBackgroundUrl.js

@@ -22,8 +22,6 @@
  *
  */
 
-// FIXME hoist this into a package? The same logic is used in `apps/dashboard/src/helpers/getBackgroundUrl.js`
-
 import { generateUrl } from '@nextcloud/router'
 import { prefixWithBaseUrl } from './prefixWithBaseUrl.js'
 

apps/theming/src/helpers/prefixWithBaseUrl.js

@@ -20,8 +20,6 @@
  *
  */
 
-// FIXME hoist this into a package? The same logic is used in `apps/dashboard/src/helpers/prefixWithBaseUrl.js`
-
 import { generateFilePath } from '@nextcloud/router'
 
 export const prefixWithBaseUrl = (url) => generateFilePath('theming', '', 'img/background/') + url

apps/theming/src/settings.js

@@ -30,3 +30,15 @@ Vue.prototype.t = t
 const View = Vue.extend(App)
 const theming = new View()
 theming.$mount('#theming')
+
+theming.$on('update:background', () => {
+	// Refresh server-side generated theming CSS
+	[...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)
+	})
+})

core/css/apps.scss

@@ -39,14 +39,14 @@ html {
 	width: 100%;
 	height: 100%;
 	position: absolute;
-	background-color: var(--color-primary);
+	background-color: var(--color-main-background-plain, var(--color-main-background));
 	background-image: var(--image-main-background);
 	background-size: cover;
 	background-position: center;
 }
 
 body {
-	background-color: var(--color-primary);
+	background-color: var(--color-main-background-plain, var(--color-main-background));
 	background-image: var(--image-main-background);
 	background-size: cover;
 	background-position: center;