4 files changed, 30 insertions, 24 deletions

diff --git a/apps/theming/lib/Themes/DefaultTheme.php b/apps/theming/lib/Themes/DefaultTheme.php
index b6c84e82d7b..4dce1dca809 100644
--- a/apps/theming/lib/Themes/DefaultTheme.php
+++ b/apps/theming/lib/Themes/DefaultTheme.php
@@ -67,11 +67,12 @@ class DefaultTheme implements ITheme {
 		$this->l = $l;
 
 		$this->defaultPrimaryColor = $this->themingDefaults->getDefaultColorPrimary();
+		$this->primaryColor = $this->themingDefaults->getColorPrimary();
 
-		// Override default codefaultPrimaryColorlor if set to improve accessibility
-		$this->primaryColor = $this->defaultPrimaryColor === BackgroundService::DEFAULT_COLOR
-			? BackgroundService::DEFAULT_ACCESSIBLE_COLOR
-			: $this->themingDefaults->getColorPrimary();
+		// Override default defaultPrimaryColor if set to improve accessibility
+		if ($this->primaryColor === BackgroundService::DEFAULT_COLOR) {
+			$this->primaryColor = BackgroundService::DEFAULT_ACCESSIBLE_COLOR;
+		}
 	}
 
 	public function getId(): string {
diff --git a/apps/theming/lib/ThemingDefaults.php b/apps/theming/lib/ThemingDefaults.php
index b1fb90e00e0..dce6b875db1 100644
--- a/apps/theming/lib/ThemingDefaults.php
+++ b/apps/theming/lib/ThemingDefaults.php
@@ -226,7 +226,7 @@ class ThemingDefaults extends \OC_Defaults {
 		// user-defined primary color
 		$themingBackground = '';
 		if (!empty($user)) {
-			$themingBackground = $this->config->getUserValue($user->getUID(), Application::APP_ID, 'background', 'default');
+			$themingBackground = $this->config->getUserValue($user->getUID(), Application::APP_ID, 'background', '');
 
 			// if the user-selected background is a background reference
 			if (!preg_match('/^\#([0-9a-f]{3}|[0-9a-f]{6})$/i', $themingBackground)) {
diff --git a/apps/theming/src/components/BackgroundSettings.vue b/apps/theming/src/components/BackgroundSettings.vue
index 3767cebf815..1c0b68ac9a9 100644
--- a/apps/theming/src/components/BackgroundSettings.vue
+++ b/apps/theming/src/components/BackgroundSettings.vue
@@ -32,17 +32,6 @@
 			@click="pickFile">
 			{{ t('theming', 'Pick from Files') }}
 		</button>
-		<NcColorPicker v-model="Theming.color" @input="pickColor">
-			<button class="background color"
-				:class="{ active: background === Theming.color}"
-				tabindex="0"
-				:data-color="Theming.color"
-				:data-color-bright="invertTextColor(Theming.color)"
-				:style="{ backgroundColor: Theming.color, color: invertTextColor(Theming.color) ? '#000000' : '#ffffff'}"
-				@click="pickColor">
-				{{ t('theming', 'Custom color') }}
-			</button>
-		</NcColorPicker>
 
 		<!-- Default background -->
 		<button class="background default"
@@ -52,6 +41,18 @@
 			{{ t('theming', 'Default image') }}
 		</button>
 
+		<!-- Custom color picker -->
+		<NcColorPicker v-model="Theming.color" @input="debouncePickColor">
+			<button class="background color"
+				:class="{ active: background === Theming.color}"
+				tabindex="0"
+				:data-color="Theming.color"
+				:data-color-bright="invertTextColor(Theming.color)"
+				:style="{ backgroundColor: Theming.color, color: invertTextColor(Theming.color) ? '#000000' : '#ffffff'}">
+				{{ t('theming', 'Custom color') }}
+			</button>
+		</NcColorPicker>
+
 		<!-- Default admin primary color -->
 		<button class="background color"
 			:class="{ active: background === Theming.defaultColor }"
@@ -59,7 +60,7 @@
 			:data-color="Theming.defaultColor"
 			:data-color-bright="invertTextColor(Theming.defaultColor)"
 			:style="{ color: invertTextColor(Theming.defaultColor) ? '#000000' : '#ffffff'}"
-			@click="pickColor">
+			@click="debouncePickColor">
 			{{ t('theming', 'Plain background') }}
 		</button>
 
@@ -77,13 +78,14 @@
 </template>
 
 <script>
-import axios from '@nextcloud/axios'
-import Tooltip from '@nextcloud/vue/dist/Directives/Tooltip'
-import NcColorPicker from '@nextcloud/vue/dist/Components/NcColorPicker'
 import { generateUrl } from '@nextcloud/router'
-import { loadState } from '@nextcloud/initial-state'
 import { getBackgroundUrl } from '../helpers/getBackgroundUrl.js'
+import { loadState } from '@nextcloud/initial-state'
 import { prefixWithBaseUrl } from '../helpers/prefixWithBaseUrl.js'
+import axios from '@nextcloud/axios'
+import debounce from 'debounce'
+import NcColorPicker from '@nextcloud/vue/dist/Components/NcColorPicker'
+import Tooltip from '@nextcloud/vue/dist/Directives/Tooltip'
 
 const shippedBackgroundList = loadState('theming', 'shippedBackgrounds')
 
@@ -179,6 +181,9 @@ export default {
 			const result = await axios.post(generateUrl('/apps/theming/background/custom'), { value: path })
 			this.update(result.data)
 		},
+		debouncePickColor: debounce(function() {
+			this.pickColor(...arguments)
+		}, 200),
 		async pickColor(event) {
 			this.loading = 'color'
 			const color = event?.target?.dataset?.color || this.Theming?.color || '#0082c9'
diff --git a/apps/theming/tests/ThemingDefaultsTest.php b/apps/theming/tests/ThemingDefaultsTest.php
index 6879999e341..5106b2551b8 100644
--- a/apps/theming/tests/ThemingDefaultsTest.php
+++ b/apps/theming/tests/ThemingDefaultsTest.php
@@ -468,7 +468,7 @@ class ThemingDefaultsTest extends TestCase {
 		$this->config
 			->expects($this->once())
 			->method('getUserValue')
-			->with('user', 'theming', 'background', 'default')
+			->with('user', 'theming', 'background', '')
 			->willReturn(array_keys(BackgroundService::SHIPPED_BACKGROUNDS)[$backgroundIndex]);
 
 		$this->assertEquals($background['primary_color'], $this->template->getColorPrimary());
@@ -486,7 +486,7 @@ class ThemingDefaultsTest extends TestCase {
 		$this->config
 			->expects($this->once())
 			->method('getUserValue')
-			->with('user', 'theming', 'background', 'default')
+			->with('user', 'theming', 'background', '')
 			->willReturn('#fff');
 
 		$this->assertEquals('#fff', $this->template->getColorPrimary());
@@ -504,7 +504,7 @@ class ThemingDefaultsTest extends TestCase {
 		$this->config
 			->expects($this->once())
 			->method('getUserValue')
-			->with('user', 'theming', 'background', 'default')
+			->with('user', 'theming', 'background', '')
 			->willReturn('nextcloud');
 
 		$this->assertEquals($this->template->getDefaultColorPrimary(), $this->template->getColorPrimary());