Use brand color for background only and keep accessible color as color primary

Signed-off-by: Christopher Ng <chrng8@gmail.com>

Author: Pytal

apps/theming/css/default.css

@@ -1,5 +1,6 @@
 :root {
   --color-main-background: #ffffff;
+  --color-main-background-plain-preview: #0082c9;
   --color-main-background-rgb: 255,255,255;
   --color-main-background-translucent: rgba(var(--color-main-background-rgb), .97);
   --color-main-background-blur: rgba(var(--color-main-background-rgb), .8);

apps/theming/css/settings-admin.css

@@ -100,7 +100,7 @@
         margin-top: 10px;
         margin-bottom: 20px;
         cursor: pointer;
-        background-color: var(--color-primary);
+        background-color: var(--color-main-background-plain-preview, var(--color-primary));
         background-image: var(--image-background, var(--image-background-plain, url('../../../core/img/app-background.jpg'), linear-gradient(40deg, #0082c9 0%, #30b6ff 100%)));
 
         #theming-preview-logo {
@@ -145,4 +145,4 @@
     svg, img {
         transition: 500ms filter linear;
     }
-}
+}

apps/theming/css/settings-admin.scss

@@ -44,6 +44,8 @@
 class BackgroundService {
 	// true when the background is bright and need dark icons
 	public const THEMING_MODE_DARK = 'dark';
+	public const DEFAULT_COLOR = '#0082c9';
+	public const DEFAULT_ACCESSIBLE_COLOR = '#00639a';
 
 	public const SHIPPED_BACKGROUNDS = [
 		'anatoly-mikhaltsov-butterfly-wing-scale.jpg' => [
@@ -90,8 +92,8 @@ class BackgroundService {
 		'kamil-porembinski-clouds.jpg' => [
 			'attribution' => 'Clouds (Kamil Porembiński, CC BY-SA)',
 			'attribution_url' => 'https://www.flickr.com/photos/paszczak000/8715851521/',
-			// Originally #0082c9 but adjusted for accessibility
-			'primary_color' => '#00639a',
+			// Originally used the default color but adjusted for accessibility
+			'primary_color' => self::DEFAULT_ACCESSIBLE_COLOR,
 		],
 		'bernard-spragg-new-zealand-fern.jpg' => [
 			'attribution' => 'New zealand fern (Bernard Spragg, CC0)',

apps/theming/lib/Service/BackgroundService.php

@@ -65,7 +65,7 @@ public function __construct(Util $util,
 		$this->config = $config;
 		$this->l = $l;
 
-		$this->primaryColor = $this->themingDefaults->getColorPrimary();
+		$this->primaryColor = $this->themingDefaults->getColorPrimary(true);
 	}
 
 	public function getId(): string {
@@ -105,6 +105,7 @@ public function getCSSVariables(): array {
 
 		$variables = [
 			'--color-main-background' => $colorMainBackground,
+			'--color-main-background-plain-preview' => $this->themingDefaults->getColorPrimary(),
 			'--color-main-background-rgb' => $colorMainBackgroundRGB,
 			'--color-main-background-translucent' => 'rgba(var(--color-main-background-rgb), .97)',
 			'--color-main-background-blur' => 'rgba(var(--color-main-background-rgb), .8)',
@@ -235,7 +236,7 @@ public function getCSSVariables(): array {
 				$variables['--image-main-background'] = "url('" . $this->urlGenerator->linkTo(Application::APP_ID, "/img/background/$themingBackground") . "')";
 			} elseif (substr($themingBackground, 0, 1) === '#') {
 				unset($variables['--image-main-background']);
-				$variables['--color-main-background-plain'] = $this->primaryColor;
+				$variables['--color-main-background-plain'] = $this->themingDefaults->getColorPrimary();
 			}
 		}
 

apps/theming/lib/Themes/DefaultTheme.php

@@ -215,27 +215,32 @@ public function getShortFooter() {
 	/**
 	 * Color that is used for the header as well as for mail headers
 	 *
+	 * @param bool $accessible Set to `true` to return the accessible color variant
+	 *
 	 * @return string
 	 */
-	public function getColorPrimary() {
+	public function getColorPrimary($accessible = false) {
 		$user = $this->userSession->getUser();
 		$color = $this->config->getAppValue(Application::APP_ID, 'color', '');
 
 		if ($color === '' && !empty($user)) {
 			$themingBackground = $this->config->getUserValue($user->getUID(), Application::APP_ID, 'background', 'default');
 			if (isset(BackgroundService::SHIPPED_BACKGROUNDS[$themingBackground]['primary_color'])) {
 				$this->increaseCacheBuster();
-				return BackgroundService::SHIPPED_BACKGROUNDS[$themingBackground]['primary_color'];
+				$color = BackgroundService::SHIPPED_BACKGROUNDS[$themingBackground]['primary_color'];
 			} else if ($themingBackground === 'default') {
 				$this->increaseCacheBuster();
-				return BackgroundService::SHIPPED_BACKGROUNDS['kamil-porembinski-clouds.jpg']['primary_color'];
+				$color = BackgroundService::DEFAULT_COLOR;
 			}
 		}
 
 		if (!preg_match('/^\#([0-9a-f]{3}|[0-9a-f]{6})$/i', $color)) {
-			return BackgroundService::SHIPPED_BACKGROUNDS['kamil-porembinski-clouds.jpg']['primary_color'];
+			$color = BackgroundService::DEFAULT_COLOR;
 		}
 
+		if ($accessible && $color === BackgroundService::DEFAULT_COLOR) {
+			return BackgroundService::DEFAULT_ACCESSIBLE_COLOR;
+		}
 		return $color;
 	}
 

apps/theming/lib/ThemingDefaults.php

@@ -171,7 +171,7 @@ export default {
 		}
 
 		&.color {
-			background-color: var(--color-primary);
+			background-color: var(--color-main-background-plain-preview, var(--color-primary));
 			color: var(--color-primary-text);
 		}
 

apps/theming/src/components/BackgroundSettings.vue

@@ -23,7 +23,7 @@ body {
 	font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen-Sans, Ubuntu, Cantarell, 'Helvetica Neue', Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol';
 	color: var(--color-text);
 	text-align: center;
-	background-color: var(--color-primary);
+	background-color: var(--color-main-background-plain-preview, var(--color-primary));
 	background-image: var(--image-background, var(--image-background-plain, url('../../../core/img/app-background.jpg'), linear-gradient(40deg, #0082c9 0%, #30b6ff 100%)));
     background-attachment: fixed;
 	min-height: 100%; /* fix sticky footer */