Merge pull request #34432 from nextcloud/backport/34298/stable25

[stable25] Use color preset of shipped background as primary color

apps/theming/css/default.css

@@ -1,5 +1,6 @@
 :root {
   --color-main-background: #ffffff;
+  --color-main-background-not-plain: #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);
@@ -53,19 +54,19 @@
   --background-invert-if-dark: no;
   --background-invert-if-bright: invert(100%);
   --image-main-background: url('/core/img/app-background.jpg');
-  --color-primary: #0082c9;
+  --color-primary: #00639a;
   --color-primary-text: #ffffff;
-  --color-primary-hover: #329bd3;
-  --color-primary-light: #e5f2f9;
-  --color-primary-light-text: #003450;
-  --color-primary-light-hover: #dbe7ee;
+  --color-primary-hover: #3282ae;
+  --color-primary-light: #e5eff4;
+  --color-primary-light-text: #00273d;
+  --color-primary-light-hover: #dbe4e9;
   --color-primary-text-dark: #ededed;
-  --color-primary-element: #0082c9;
+  --color-primary-element: #00639a;
   --color-primary-element-text: #ffffff;
-  --color-primary-element-hover: #329bd3;
-  --color-primary-element-light: #e5f2f9;
-  --color-primary-element-light-text: #003450;
-  --color-primary-element-light-hover: #dbe7ee;
+  --color-primary-element-hover: #3282ae;
+  --color-primary-element-light: #e5eff4;
+  --color-primary-element-light-text: #00273d;
+  --color-primary-element-light-hover: #dbe4e9;
   --color-primary-element-text-dark: #ededed;
   --gradient-primary-background: linear-gradient(40deg, var(--color-primary) 0%, var(--color-primary-hover) 100%);
 }

apps/theming/css/settings-admin.css

@@ -89,7 +89,7 @@
   margin-top: 10px;
   margin-bottom: 20px;
   cursor: pointer;
-  background-color: var(--color-primary);
+  background-color: var(--color-main-background-not-plain, 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 #theming-preview #theming-preview-logo {

apps/theming/css/settings-admin.scss

@@ -100,7 +100,7 @@
         margin-top: 10px;
         margin-bottom: 20px;
         cursor: pointer;
-        background-color: var(--color-primary);
+        background-color: var(--color-main-background-not-plain, 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/lib/Service/BackgroundService.php

@@ -44,6 +44,8 @@ use OCP\PreConditionNotMetException;
 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,7 @@ 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',
+			'primary_color' => self::DEFAULT_COLOR,
 		],
 		'bernard-spragg-new-zealand-fern.jpg' => [
 			'attribution' => 'New zealand fern (Bernard Spragg, CC0)',

apps/theming/lib/Themes/DefaultTheme.php

@@ -27,6 +27,7 @@ namespace OCA\Theming\Themes;
 use OCA\Theming\AppInfo\Application;
 use OCA\Theming\ImageManager;
 use OCA\Theming\ITheme;
+use OCA\Theming\Service\BackgroundService;
 use OCA\Theming\ThemingDefaults;
 use OCA\Theming\Util;
 use OCP\App\IAppManager;
@@ -41,6 +42,7 @@ class DefaultTheme implements ITheme {
 
 	public Util $util;
 	public ThemingDefaults $themingDefaults;
+	public IUserSession $userSession;
 	public IURLGenerator $urlGenerator;
 	public ImageManager $imageManager;
 	public IConfig $config;
@@ -50,18 +52,22 @@ class DefaultTheme implements ITheme {
 
 	public function __construct(Util $util,
 								ThemingDefaults $themingDefaults,
+								IUserSession $userSession,
 								IURLGenerator $urlGenerator,
 								ImageManager $imageManager,
 								IConfig $config,
 								IL10N $l) {
 		$this->util = $util;
 		$this->themingDefaults = $themingDefaults;
+		$this->userSession = $userSession;
 		$this->urlGenerator = $urlGenerator;
 		$this->imageManager = $imageManager;
 		$this->config = $config;
 		$this->l = $l;
 
-		$this->primaryColor = $this->themingDefaults->getColorPrimary();
+		$initialPrimaryColor = $this->themingDefaults->getColorPrimary();
+		// Override default color if set to improve accessibility
+		$this->primaryColor = $initialPrimaryColor === BackgroundService::DEFAULT_COLOR ? BackgroundService::DEFAULT_ACCESSIBLE_COLOR : $initialPrimaryColor;
 	}
 
 	public function getId(): string {
@@ -101,6 +107,7 @@ class DefaultTheme implements ITheme {
 
 		$variables = [
 			'--color-main-background' => $colorMainBackground,
+			'--color-main-background-not-plain' => $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)',
@@ -221,21 +228,17 @@ class DefaultTheme implements ITheme {
 		}
 
 		$appManager = Server::get(IAppManager::class);
-		$userSession = Server::get(IUserSession::class);
-		$user = $userSession->getUser();
+		$user = $this->userSession->getUser();
 		if ($appManager->isEnabledForUser(Application::APP_ID) && $user !== null) {
 			$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
+			} elseif (isset(BackgroundService::SHIPPED_BACKGROUNDS[$themingBackground])) {
 				$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;
+				$variables['--color-main-background-plain'] = $this->themingDefaults->getColorPrimary();
 			}
 		}
 

apps/theming/lib/ThemingDefaults.php

@@ -40,6 +40,8 @@
  */
 namespace OCA\Theming;
 
+use OCA\Theming\AppInfo\Application;
+use OCA\Theming\Service\BackgroundService;
 use OCP\App\AppPathNotFoundException;
 use OCP\App\IAppManager;
 use OCP\Files\NotFoundException;
@@ -49,47 +51,31 @@ use OCP\IConfig;
 use OCP\IL10N;
 use OCP\INavigationManager;
 use OCP\IURLGenerator;
+use OCP\IUserSession;
 
 class ThemingDefaults extends \OC_Defaults {
 
-	/** @var IConfig */
-	private $config;
-	/** @var IL10N */
-	private $l;
-	/** @var ImageManager */
-	private $imageManager;
-	/** @var IURLGenerator */
-	private $urlGenerator;
-	/** @var ICacheFactory */
-	private $cacheFactory;
-	/** @var Util */
-	private $util;
-	/** @var IAppManager */
-	private $appManager;
-	/** @var INavigationManager */
-	private $navigationManager;
+	private IConfig $config;
+	private IL10N $l;
+	private ImageManager $imageManager;
+	private IUserSession $userSession;
+	private IURLGenerator $urlGenerator;
+	private ICacheFactory $cacheFactory;
+	private Util $util;
+	private IAppManager $appManager;
+	private INavigationManager $navigationManager;
 
-	/** @var string */
-	private $name;
-	/** @var string */
-	private $title;
-	/** @var string */
-	private $entity;
-	/** @var string */
-	private $productName;
-	/** @var string */
-	private $url;
-	/** @var string */
-	private $color;
+	private string $name;
+	private string $title;
+	private string $entity;
+	private string $productName;
+	private string $url;
+	private string $color;
 
-	/** @var string */
-	private $iTunesAppId;
-	/** @var string */
-	private $iOSClientUrl;
-	/** @var string */
-	private $AndroidClientUrl;
-	/** @var string */
-	private $FDroidClientUrl;
+	private string $iTunesAppId;
+	private string $iOSClientUrl;
+	private string $AndroidClientUrl;
+	private string $FDroidClientUrl;
 
 	/**
 	 * ThemingDefaults constructor.
@@ -97,6 +83,7 @@ class ThemingDefaults extends \OC_Defaults {
 	 * @param IConfig $config
 	 * @param IL10N $l
 	 * @param ImageManager $imageManager
+	 * @param IUserSession $userSession
 	 * @param IURLGenerator $urlGenerator
 	 * @param ICacheFactory $cacheFactory
 	 * @param Util $util
@@ -104,6 +91,7 @@ class ThemingDefaults extends \OC_Defaults {
 	 */
 	public function __construct(IConfig $config,
 								IL10N $l,
+								IUserSession $userSession,
 								IURLGenerator $urlGenerator,
 								ICacheFactory $cacheFactory,
 								Util $util,
@@ -115,6 +103,7 @@ class ThemingDefaults extends \OC_Defaults {
 		$this->config = $config;
 		$this->l = $l;
 		$this->imageManager = $imageManager;
+		$this->userSession = $userSession;
 		$this->urlGenerator = $urlGenerator;
 		$this->cacheFactory = $cacheFactory;
 		$this->util = $util;
@@ -229,10 +218,24 @@ class ThemingDefaults extends \OC_Defaults {
 	 * @return string
 	 */
 	public function getColorPrimary() {
-		$color = $this->config->getAppValue('theming', 'color', $this->color);
-		if (!preg_match('/^\#([0-9a-f]{3}|[0-9a-f]{6})$/i', $color)) {
-			$color = '#0082c9';
+		$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 ($themingBackground === 'default') {
+				$this->increaseCacheBuster();
+				return BackgroundService::DEFAULT_COLOR;
+			} else if (isset(BackgroundService::SHIPPED_BACKGROUNDS[$themingBackground]['primary_color'])) {
+				$this->increaseCacheBuster();
+				return BackgroundService::SHIPPED_BACKGROUNDS[$themingBackground]['primary_color'];
+			}
 		}
+
+		if (!preg_match('/^\#([0-9a-f]{3}|[0-9a-f]{6})$/i', $color)) {
+			return BackgroundService::DEFAULT_COLOR;
+		}
+
 		return $color;
 	}
 

apps/theming/src/components/BackgroundSettings.vue

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

apps/theming/tests/Service/ThemesServiceTest.php

@@ -156,7 +156,7 @@ class ThemesServiceTest extends TestCase {
 			->method('getUserValue')
 			->with('user', Application::APP_ID, 'enabled-themes', '[]')
 			->willReturn(json_encode($enabledThemes));
-	
+
 
 		$this->assertEquals($expectedEnabled, $this->themesService->disableTheme($this->themes[$toDisable]));
 	}
@@ -190,7 +190,7 @@ class ThemesServiceTest extends TestCase {
 			->method('getUserValue')
 			->with('user', Application::APP_ID, 'enabled-themes', '[]')
 			->willReturn(json_encode($enabledThemes));
-	
+
 
 		$this->assertEquals($expected, $this->themesService->isEnabled($this->themes[$themeId]));
 	}
@@ -281,6 +281,7 @@ class ThemesServiceTest extends TestCase {
 			'default' => new DefaultTheme(
 				$util,
 				$this->themingDefaults,
+				$this->userSession,
 				$urlGenerator,
 				$imageManager,
 				$this->config,
@@ -289,6 +290,7 @@ class ThemesServiceTest extends TestCase {
 			'light' => new LightTheme(
 				$util,
 				$this->themingDefaults,
+				$this->userSession,
 				$urlGenerator,
 				$imageManager,
 				$this->config,
@@ -297,6 +299,7 @@ class ThemesServiceTest extends TestCase {
 			'dark' => new DarkTheme(
 				$util,
 				$this->themingDefaults,
+				$this->userSession,
 				$urlGenerator,
 				$imageManager,
 				$this->config,
@@ -305,6 +308,7 @@ class ThemesServiceTest extends TestCase {
 			'light-highcontrast' => new HighContrastTheme(
 				$util,
 				$this->themingDefaults,
+				$this->userSession,
 				$urlGenerator,
 				$imageManager,
 				$this->config,
@@ -313,6 +317,7 @@ class ThemesServiceTest extends TestCase {
 			'dark-highcontrast' => new DarkHighContrastTheme(
 				$util,
 				$this->themingDefaults,
+				$this->userSession,
 				$urlGenerator,
 				$imageManager,
 				$this->config,
@@ -321,6 +326,7 @@ class ThemesServiceTest extends TestCase {
 			'opendyslexic' => new DyslexiaFont(
 				$util,
 				$this->themingDefaults,
+				$this->userSession,
 				$urlGenerator,
 				$imageManager,
 				$this->config,

apps/theming/tests/Settings/PersonalTest.php

@@ -45,6 +45,7 @@ use OCP\AppFramework\Services\IInitialState;
 use OCP\IConfig;
 use OCP\IL10N;
 use OCP\IURLGenerator;
+use OCP\IUserSession;
 use Test\TestCase;
 
 class PersonalTest extends TestCase {
@@ -128,6 +129,7 @@ class PersonalTest extends TestCase {
 	private function initThemes() {
 		$util = $this->createMock(Util::class);
 		$themingDefaults = $this->createMock(ThemingDefaults::class);
+		$userSession = $this->createMock(IUserSession::class);
 		$urlGenerator = $this->createMock(IURLGenerator::class);
 		$imageManager = $this->createMock(ImageManager::class);
 		$config = $this->createMock(IConfig::class);
@@ -141,6 +143,7 @@ class PersonalTest extends TestCase {
 			'default' => new DefaultTheme(
 				$util,
 				$themingDefaults,
+				$userSession,
 				$urlGenerator,
 				$imageManager,
 				$config,
@@ -149,6 +152,7 @@ class PersonalTest extends TestCase {
 			'light' => new LightTheme(
 				$util,
 				$themingDefaults,
+				$userSession,
 				$urlGenerator,
 				$imageManager,
 				$config,
@@ -157,6 +161,7 @@ class PersonalTest extends TestCase {
 			'dark' => new DarkTheme(
 				$util,
 				$themingDefaults,
+				$userSession,
 				$urlGenerator,
 				$imageManager,
 				$config,
@@ -165,6 +170,7 @@ class PersonalTest extends TestCase {
 			'light-highcontrast' => new HighContrastTheme(
 				$util,
 				$themingDefaults,
+				$userSession,
 				$urlGenerator,
 				$imageManager,
 				$config,
@@ -173,6 +179,7 @@ class PersonalTest extends TestCase {
 			'dark-highcontrast' => new DarkHighContrastTheme(
 				$util,
 				$themingDefaults,
+				$userSession,
 				$urlGenerator,
 				$imageManager,
 				$config,
@@ -181,6 +188,7 @@ class PersonalTest extends TestCase {
 			'opendyslexic' => new DyslexiaFont(
 				$util,
 				$themingDefaults,
+				$userSession,
 				$urlGenerator,
 				$imageManager,
 				$config,

apps/theming/tests/Themes/DefaultThemeTest.php

@@ -32,6 +32,7 @@ use OCP\Files\IAppData;
 use OCP\IConfig;
 use OCP\IL10N;
 use OCP\IURLGenerator;
+use OCP\IUserSession;
 use PHPUnit\Framework\MockObject\MockObject;
 use Test\TestCase;
 
@@ -52,6 +53,7 @@ class DefaultThemeTest extends TestCase {
 
 	protected function setUp(): void {
 		$this->themingDefaults = $this->createMock(ThemingDefaults::class);
+		$this->userSession = $this->createMock(IUserSession::class);
 		$this->urlGenerator = $this->createMock(IURLGenerator::class);
 		$this->imageManager = $this->createMock(ImageManager::class);
 		$this->config = $this->createMock(IConfig::class);
@@ -85,6 +87,7 @@ class DefaultThemeTest extends TestCase {
 		$this->defaultTheme = new DefaultTheme(
 			$util,
 			$this->themingDefaults,
+			$this->userSession,
 			$this->urlGenerator,
 			$this->imageManager,
 			$this->config,

apps/theming/tests/Themes/DyslexiaFontTest.php

@@ -56,6 +56,7 @@ class DyslexiaFontTest extends TestCase {
 
 	protected function setUp(): void {
 		$this->themingDefaults = $this->createMock(ThemingDefaults::class);
+		$this->userSession = $this->createMock(IUserSession::class);
 		$this->imageManager = $this->createMock(ImageManager::class);
 		$this->config = $this->createMock(IConfig::class);
 		$this->l10n = $this->createMock(IL10N::class);
@@ -93,6 +94,7 @@ class DyslexiaFontTest extends TestCase {
 		$this->dyslexiaFont = new DyslexiaFont(
 			$util,
 			$this->themingDefaults,
+			$this->userSession,
 			$this->urlGenerator,
 			$this->imageManager,
 			$this->config,
@@ -142,7 +144,7 @@ class DyslexiaFontTest extends TestCase {
 
 	/**
 	 * @dataProvider dataTestGetCustomCss
-	 * 
+	 *
 	 * Ensure the fonts are always loaded from the web root
 	 * despite having url rewriting enabled or not
 	 *
@@ -155,7 +157,7 @@ class DyslexiaFontTest extends TestCase {
 			->method('getSystemValue')
 			->with('htaccess.IgnoreFrontController', false)
 			->willReturn($prettyUrlsEnabled);
-		
+
 		$this->assertStringContainsString("'$webRoot/apps/theming/fonts/OpenDyslexic-Regular.woff'", $this->dyslexiaFont->getCustomCss());
 		$this->assertStringNotContainsString('index.php', $this->dyslexiaFont->getCustomCss());
 	}

apps/theming/tests/ThemingDefaultsTest.php

@@ -46,6 +46,7 @@ use OCP\IConfig;
 use OCP\IL10N;
 use OCP\INavigationManager;
 use OCP\IURLGenerator;
+use OCP\IUserSession;
 use Test\TestCase;
 
 class ThemingDefaultsTest extends TestCase {
@@ -53,6 +54,8 @@ class ThemingDefaultsTest extends TestCase {
 	private $config;
 	/** @var IL10N|\PHPUnit\Framework\MockObject\MockObject */
 	private $l10n;
+	/** @var IUserSession|\PHPUnit\Framework\MockObject\MockObject */
+	private $userSession;
 	/** @var IURLGenerator|\PHPUnit\Framework\MockObject\MockObject */
 	private $urlGenerator;
 	/** @var \OC_Defaults|\PHPUnit\Framework\MockObject\MockObject */
@@ -78,6 +81,7 @@ class ThemingDefaultsTest extends TestCase {
 		parent::setUp();
 		$this->config = $this->createMock(IConfig::class);
 		$this->l10n = $this->createMock(IL10N::class);
+		$this->userSession = $this->createMock(IUserSession::class);
 		$this->urlGenerator = $this->createMock(IURLGenerator::class);
 		$this->cacheFactory = $this->createMock(ICacheFactory::class);
 		$this->cache = $this->createMock(ICache::class);
@@ -93,6 +97,7 @@ class ThemingDefaultsTest extends TestCase {
 		$this->template = new ThemingDefaults(
 			$this->config,
 			$this->l10n,
+			$this->userSession,
 			$this->urlGenerator,
 			$this->cacheFactory,
 			$this->util,
@@ -419,7 +424,7 @@ class ThemingDefaultsTest extends TestCase {
 		$this->config
 			->expects($this->once())
 			->method('getAppValue')
-			->with('theming', 'color', $this->defaults->getColorPrimary())
+			->with('theming', 'color', null)
 			->willReturn($this->defaults->getColorPrimary());
 
 		$this->assertEquals($this->defaults->getColorPrimary(), $this->template->getColorPrimary());
@@ -429,7 +434,7 @@ class ThemingDefaultsTest extends TestCase {
 		$this->config
 			->expects($this->once())
 			->method('getAppValue')
-			->with('theming', 'color', $this->defaults->getColorPrimary())
+			->with('theming', 'color', null)
 			->willReturn('#fff');
 
 		$this->assertEquals('#fff', $this->template->getColorPrimary());
@@ -542,7 +547,7 @@ class ThemingDefaultsTest extends TestCase {
 			->method('getAppValue')
 			->withConsecutive(
 				['theming', 'cachebuster', '0'],
-				['theming', 'color', $this->defaults->getColorPrimary()],
+				['theming', 'color', null],
 			)->willReturnOnConsecutiveCalls(
 				'15',
 				$this->defaults->getColorPrimary(),

core/css/guest.css

@@ -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-not-plain, 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 */

lib/private/Server.php

@@ -1222,6 +1222,7 @@ class Server extends ServerContainer implements IServerContainer {
 				return new ThemingDefaults(
 					$c->get(\OCP\IConfig::class),
 					$c->getL10N('theming'),
+					$c->get(IUserSession::class),
 					$c->get(IURLGenerator::class),
 					$c->get(ICacheFactory::class),
 					new Util($c->get(\OCP\IConfig::class), $this->get(IAppManager::class), $c->getAppDataDir('theming')),

tests/acceptance/features/app-theming.feature

@@ -9,10 +9,12 @@ Feature: app-theming
     # The "eventually" part is not really needed here, as the colour is not
     # being animated at this point, but there is no need to create a specific
     # step just for this.
-    And I see that the primary color is eventually "#0082C9"
+    And I see that the primary color is eventually "#00639a"
+    And I see that the non-plain background color variable is eventually "#0082c9"
     When I set the "Color" parameter in the Theming app to "#C9C9C9"
     Then I see that the parameters in the Theming app are eventually saved
     And I see that the primary color is eventually "#C9C9C9"
+    And I see that the non-plain background color variable is eventually "#C9C9C9"
 
   Scenario: resetting the color updates the primary color
     Given I am logged in as the admin
@@ -22,6 +24,8 @@ Feature: app-theming
     And I set the "Color" parameter in the Theming app to "#C9C9C9"
     And I see that the parameters in the Theming app are eventually saved
     And I see that the primary color is eventually "#C9C9C9"
+    And I see that the non-plain background color variable is eventually "#C9C9C9"
     When I reset the "Color" parameter in the Theming app to its default value
     Then I see that the parameters in the Theming app are eventually saved
-    And I see that the primary color is eventually "#0082C9"
+    And I see that the primary color is eventually "#00639a"
+    And I see that the non-plain background color variable is eventually "#0082c9"

tests/acceptance/features/bootstrap/ThemingAppContext.php

@@ -141,6 +141,23 @@ class ThemingAppContext implements Context, ActorAwareInterface {
 		}
 	}
 
+	/**
+	 * @Then I see that the non-plain background color variable is eventually :color
+	 */
+	public function iSeeThatTheNonPlainBackgroundColorVariableIsEventually($color) {
+		$colorVariableMatchesCallback = function () use ($color) {
+			$colorVariable = $this->actor->getSession()->evaluateScript("return getComputedStyle(document.documentElement).getPropertyValue('--color-main-background-not-plain').trim();");
+			$colorVariable = $this->getRGBArray($colorVariable);
+			$color = $this->getRGBArray($color);
+
+			return $colorVariable == $color;
+		};
+
+		if (!Utils::waitFor($colorVariableMatchesCallback, $timeout = 10 * $this->actor->getFindTimeoutMultiplier(), $timeoutStep = 1)) {
+			Assert::fail("The non-plain background color variable is not $color yet after $timeout seconds");
+		}
+	}
+
 	/**
 	 * @Then I see that the parameters in the Theming app are eventually saved
 	 */