Use default system primary

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

apps/theming/lib/Service/JSDataService.php

@@ -55,6 +55,7 @@ class JSDataService implements \JsonSerializable {
 			'url' => $this->themingDefaults->getBaseUrl(),
 			'slogan' => $this->themingDefaults->getSlogan(),
 			'color' => $this->themingDefaults->getColorPrimary(),
+			'defaultColor' => $this->themingDefaults->getDefaultColorPrimary(),
 			'imprintUrl' => $this->themingDefaults->getImprintUrl(),
 			'privacyUrl' => $this->themingDefaults->getPrivacyUrl(),
 			'inverted' => $this->util->invertTextColor($this->themingDefaults->getColorPrimary()),

apps/theming/lib/Settings/Admin.php

@@ -75,7 +75,7 @@ class Admin implements IDelegatedSettings {
 			'name' => $this->themingDefaults->getEntity(),
 			'url' => $this->themingDefaults->getBaseUrl(),
 			'slogan' => $this->themingDefaults->getSlogan(),
-			'color' => $this->themingDefaults->getColorPrimary(),
+			'color' => $this->themingDefaults->getDefaultColorPrimary(),
 			'uploadLogoRoute' => $this->urlGenerator->linkToRoute('theming.Theming.uploadImage'),
 			'canThemeIcons' => $this->imageManager->shouldReplaceIcons(),
 			'iconDocs' => $this->urlGenerator->linkToDocs('admin-theming-icons'),

apps/theming/lib/Themes/CommonThemeTrait.php

@@ -42,6 +42,7 @@ trait CommonThemeTrait {
 		// primary related colours
 		return [
 			'--color-primary' => $this->primaryColor,
+			'--color-primary-default' => $this->defaultPrimaryColor,
 			'--color-primary-text' => $this->util->invertTextColor($this->primaryColor) ? '#000000' : '#ffffff',
 			'--color-primary-hover' => $this->util->mix($this->primaryColor, $colorMainBackground, 60),
 			'--color-primary-light' => $colorPrimaryLight,

apps/theming/lib/Themes/DefaultTheme.php

@@ -48,6 +48,7 @@ class DefaultTheme implements ITheme {
 	public IConfig $config;
 	public IL10N $l;
 
+	public string $defaultPrimaryColor;
 	public string $primaryColor;
 
 	public function __construct(Util $util,
@@ -65,9 +66,12 @@ class DefaultTheme implements ITheme {
 		$this->config = $config;
 		$this->l = $l;
 
-		$initialPrimaryColor = $this->themingDefaults->getColorPrimary();
-		// Override default color if set to improve accessibility
-		$this->primaryColor = $initialPrimaryColor === BackgroundService::DEFAULT_COLOR ? BackgroundService::DEFAULT_ACCESSIBLE_COLOR : $initialPrimaryColor;
+		$this->defaultPrimaryColor = $this->themingDefaults->getDefaultColorPrimary();
+
+		// Override default codefaultPrimaryColorlor if set to improve accessibility
+		$this->primaryColor = $this->defaultPrimaryColor === BackgroundService::DEFAULT_COLOR
+			? BackgroundService::DEFAULT_ACCESSIBLE_COLOR
+			: $this->themingDefaults->getColorPrimary();
 	}
 
 	public function getId(): string {

apps/theming/lib/ThemingDefaults.php

@@ -219,9 +219,12 @@ class ThemingDefaults extends \OC_Defaults {
 	 */
 	public function getColorPrimary() {
 		$user = $this->userSession->getUser();
-		$color = $this->config->getAppValue(Application::APP_ID, 'color', '');
+		$defaultColor = $this->getDefaultColorPrimary();
+		$themingBackground = $this->config->getUserValue($user->getUID(), Application::APP_ID, 'background');
 
-		if ($color === '' && !empty($user)) {
+		// if the user is defined and the selected background is not a colour
+		if ($user !== null
+			&& !preg_match('/^\#([0-9a-f]{3}|[0-9a-f]{6})$/i', $themingBackground)) {
 			$themingBackground = $this->config->getUserValue($user->getUID(), Application::APP_ID, 'background', 'default');
 			if ($themingBackground === 'default') {
 				return BackgroundService::DEFAULT_COLOR;
@@ -230,10 +233,30 @@ class ThemingDefaults extends \OC_Defaults {
 			}
 		}
 
-		if (!preg_match('/^\#([0-9a-f]{3}|[0-9a-f]{6})$/i', $color)) {
+		// If the user selected a specific colour
+		if (preg_match('/^\#([0-9a-f]{3}|[0-9a-f]{6})$/i', $themingBackground)) {
+			return $themingBackground;
+		}
+
+		// If the default color is not valid, return the default background one
+		if (!preg_match('/^\#([0-9a-f]{3}|[0-9a-f]{6})$/i', $defaultColor)) {
 			return BackgroundService::DEFAULT_COLOR;
 		}
 
+		// Finally, return the system global primary color
+		return $defaultColor;
+	}
+
+	/**
+	 * Return the default color primary
+	 *
+	 * @return string
+	 */
+	public function getDefaultColorPrimary() {
+		$color = $this->config->getAppValue(Application::APP_ID, 'color', $this->color);
+		if (!preg_match('/^\#([0-9a-f]{3}|[0-9a-f]{6})$/i', $color)) {
+			$color = '#0082c9';
+		}
 		return $color;
 	}
 

apps/theming/src/UserThemes.vue

@@ -156,16 +156,16 @@ export default {
 		},
 	},
 
-	mounted() {
-		this.updateGlobalStyles()
-	},
-
 	watch: {
 		shortcutsDisabled(newState) {
 			this.changeShortcutsDisabled(newState)
 		},
 	},
 
+	mounted() {
+		this.updateGlobalStyles()
+	},
+
 	methods: {
 		updateBackground(data) {
 			this.background = (data.type === 'custom' || data.type === 'default') ? data.type : data.value

apps/theming/src/components/BackgroundSettings.vue

@@ -25,30 +25,41 @@
 
 <template>
 	<div class="background-selector">
+		<!-- Custom background -->
 		<button class="background filepicker"
 			:class="{ active: background === 'custom' }"
 			tabindex="0"
 			@click="pickFile">
 			{{ t('theming', 'Pick from Files') }}
 		</button>
+
+		<!-- Default background -->
 		<button class="background default"
 			tabindex="0"
 			:class="{ 'icon-loading': loading === 'default', active: background === 'default' }"
 			@click="setDefault">
 			{{ t('theming', 'Default image') }}
 		</button>
+
+		<!-- Default admin primary color -->
 		<button class="background color"
 			:class="{ active: background.startsWith('#') }"
 			tabindex="0"
+			:data-color="Theming.defaultColor"
+			:data-color-bright="invertTextColor(Theming.defaultColor)"
+			:style="{ color: invertTextColor(Theming.defaultColor) ? '#000000' : '#ffffff'}"
 			@click="pickColor">
 			{{ t('theming', 'Plain background') }}
 		</button>
+
+		<!-- Background set selection -->
 		<button v-for="shippedBackground in shippedBackgrounds"
 			:key="shippedBackground.name"
 			v-tooltip="shippedBackground.details.attribution"
 			:class="{ 'icon-loading': loading === shippedBackground.name, active: background === shippedBackground.name }"
 			tabindex="0"
 			class="background"
+			:data-color-bright="shippedBackground.details.theming === 'dark'"
 			:style="{ 'background-image': 'url(' + shippedBackground.preview + ')' }"
 			@click="setShipped(shippedBackground.name)" />
 	</div>
@@ -69,6 +80,7 @@ export default {
 	directives: {
 		Tooltip,
 	},
+
 	props: {
 		background: {
 			type: String,
@@ -79,12 +91,15 @@ export default {
 			default: '',
 		},
 	},
+
 	data() {
 		return {
 			backgroundImage: generateUrl('/apps/theming/background') + '?v=' + Date.now(),
 			loading: false,
+			Theming: loadState('theming', 'data', {}),
 		}
 	},
+
 	computed: {
 		shippedBackgrounds() {
 			return Object.keys(shippedBackgroundList).map(fileName => {
@@ -97,7 +112,27 @@ export default {
 			})
 		},
 	},
+
 	methods: {
+		invertTextColor(color) {
+			const l = this.calculateLuma(color)
+			if (l > 0.6) {
+				return true
+			} else {
+				return false
+			}
+		},
+		calculateLuma(color) {
+			const [red, green, blue] = this.hexToRGB(color)
+			return (0.2126 * red + 0.7152 * green + 0.0722 * blue) / 255
+		},
+		hexToRGB(hex) {
+			const result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex)
+			return result
+				? [parseInt(result[1], 16), parseInt(result[2], 16), parseInt(result[3], 16)]
+				: null
+		},
+
 		async update(data) {
 			const background = data.type === 'custom' || data.type === 'default' ? data.type : data.value
 			this.backgroundImage = getBackgroundUrl(background, data.version, this.themingDefaultBackground)
@@ -128,9 +163,9 @@ export default {
 			const result = await axios.post(generateUrl('/apps/theming/background/custom'), { value: path })
 			this.update(result.data)
 		},
-		async pickColor() {
+		async pickColor(event) {
 			this.loading = 'color'
-			const color = OCA && OCA.Theming ? OCA.Theming.color : '#0082c9'
+			const color = event?.target?.dataset?.color || this.Theming?.color || '#0082c9'
 			const result = await axios.post(generateUrl('/apps/theming/background/color'), { value: color })
 			this.update(result.data)
 		},
@@ -171,7 +206,7 @@ export default {
 		}
 
 		&.color {
-			background-color: var(--color-main-background-not-plain, var(--color-primary));
+			background-color: var(--color-primary-default);
 			color: var(--color-primary-text);
 		}
 
@@ -181,14 +216,20 @@ export default {
 			border: 2px solid var(--color-primary);
 		}
 
-		&.active:not(.icon-loading):after {
-			background-image: var(--icon-checkmark-white);
-			background-repeat: no-repeat;
-			background-position: center;
-			background-size: 44px;
-			content: '';
-			display: block;
-			height: 100%;
+		&.active:not(.icon-loading) {
+			&:after {
+				background-image: var(--icon-checkmark-white);
+				background-repeat: no-repeat;
+				background-position: center;
+				background-size: 44px;
+				content: '';
+				display: block;
+				height: 100%;
+			}
+
+			&[data-color-bright]:after {
+				background-image: var(--icon-checkmark-dark);
+			}
 		}
 	}
 }