fix(tests): Adjust theming test for new splitted background and primary colors

Signed-off-by: Ferdinand Thiessen <opensource@fthiessen.de>

3 files changed, 322 insertions, 151 deletions

diff --git a/cypress/e2e/theming/admin-settings.cy.ts b/cypress/e2e/theming/admin-settings.cy.ts
index 1c4e3458aae..e721ab4d332 100644
--- a/cypress/e2e/theming/admin-settings.cy.ts
+++ b/cypress/e2e/theming/admin-settings.cy.ts
@@ -21,9 +21,15 @@
  */
 /* eslint-disable n/no-unpublished-import */
 import { User } from '@nextcloud/cypress'
-import { colord } from 'colord'
 
-import { defaultPrimary, defaultBackground, pickRandomColor, validateBodyThemingCss, validateUserThemingDefaultCss } from './themingUtils'
+import {
+	defaultPrimary,
+	defaultBackground,
+	pickRandomColor,
+	validateBodyThemingCss,
+	validateUserThemingDefaultCss,
+	expectBackgroundColor,
+} from './themingUtils'
 
 const admin = new User('admin', 'admin')
 
@@ -36,15 +42,24 @@ describe('Admin theming settings visibility check', function() {
 
 	it('See the admin theming section', function() {
 		cy.visit('/settings/admin/theming')
-		cy.get('[data-admin-theming-settings]').should('exist').scrollIntoView()
+		cy.get('[data-admin-theming-settings]')
+			.should('exist')
+			.scrollIntoView()
 		cy.get('[data-admin-theming-settings]').should('be.visible')
 	})
 
 	it('See the default settings', function() {
-		cy.get('[data-admin-theming-setting-primary-color-picker]').should('exist')
-		cy.get('[data-admin-theming-setting-primary-color-reset]').should('not.exist')
+		cy.get('[data-admin-theming-setting-color-picker]').should('exist')
 		cy.get('[data-admin-theming-setting-file-reset]').should('not.exist')
-		cy.get('[data-admin-theming-setting-file-remove]').should('be.visible')
+		cy.get('[data-admin-theming-setting-file-remove]').should('exist')
+
+		cy.get(
+			'[data-admin-theming-setting-primary-color] [data-admin-theming-setting-color]',
+		).then(($el) => expectBackgroundColor($el, defaultPrimary))
+
+		cy.get(
+			'[data-admin-theming-setting-background-color] [data-admin-theming-setting-color]',
+		).then(($el) => expectBackgroundColor($el, defaultPrimary))
 	})
 })
 
@@ -59,24 +74,42 @@ describe('Change the primary color and reset it', function() {
 
 	it('See the admin theming section', function() {
 		cy.visit('/settings/admin/theming')
-		cy.get('[data-admin-theming-settings]').should('exist').scrollIntoView()
+		cy.get('[data-admin-theming-settings]')
+			.should('exist')
+			.scrollIntoView()
 		cy.get('[data-admin-theming-settings]').should('be.visible')
 	})
 
 	it('Change the primary color', function() {
 		cy.intercept('*/apps/theming/ajax/updateStylesheet').as('setColor')
 
-		pickRandomColor().then(color => { selectedColor = color })
+		pickRandomColor('[data-admin-theming-setting-primary-color]').then(
+			(color) => {
+				selectedColor = color
+			},
+		)
 
 		cy.wait('@setColor')
-		cy.waitUntil(() => validateBodyThemingCss(selectedColor, defaultBackground))
+		cy.waitUntil(() =>
+			validateBodyThemingCss(
+				selectedColor,
+				defaultBackground,
+				defaultPrimary,
+			),
+		)
 	})
 
 	it('Screenshot the login page and validate login page', function() {
 		cy.logout()
 		cy.visit('/')
 
-		cy.waitUntil(() => validateBodyThemingCss(selectedColor, defaultBackground))
+		cy.waitUntil(() =>
+			validateBodyThemingCss(
+				selectedColor,
+				defaultBackground,
+				defaultPrimary,
+			),
+		)
 		cy.screenshot()
 	})
 
@@ -98,21 +131,29 @@ describe('Remove the default background and restore it', function() {
 
 	it('See the admin theming section', function() {
 		cy.visit('/settings/admin/theming')
-		cy.get('[data-admin-theming-settings]').should('exist').scrollIntoView()
+		cy.get('[data-admin-theming-settings]')
+			.should('exist')
+			.scrollIntoView()
 		cy.get('[data-admin-theming-settings]').should('be.visible')
 	})
 
 	it('Remove the default background', function() {
-		cy.intercept('*/apps/theming/ajax/updateStylesheet').as('removeBackground')
+		cy.intercept('*/apps/theming/ajax/updateStylesheet').as(
+			'removeBackground',
+		)
 
 		cy.get('[data-admin-theming-setting-file-remove]').click()
 
 		cy.wait('@removeBackground')
 		cy.waitUntil(() => validateBodyThemingCss(defaultPrimary, null))
-		cy.waitUntil(() => cy.window().then((win) => {
-			const backgroundPlain = getComputedStyle(win.document.body).getPropertyValue('--image-background-plain')
-			return backgroundPlain !== ''
-		}))
+		cy.waitUntil(() =>
+			cy.window().then((win) => {
+				const backgroundPlain = getComputedStyle(
+					win.document.body,
+				).getPropertyValue('--image-background')
+				return backgroundPlain !== ''
+			}),
+		)
 	})
 
 	it('Screenshot the login page and validate login page', function() {
@@ -132,7 +173,7 @@ describe('Remove the default background and restore it', function() {
 	})
 })
 
-describe('Remove the default background with a custom primary color', function() {
+describe('Remove the default background with a custom background color', function() {
 	let selectedColor = ''
 
 	before(function() {
@@ -143,23 +184,40 @@ describe('Remove the default background with a custom primary color', function()
 
 	it('See the admin theming section', function() {
 		cy.visit('/settings/admin/theming')
-		cy.get('[data-admin-theming-settings]').should('exist').scrollIntoView()
+		cy.get('[data-admin-theming-settings]')
+			.should('exist')
+			.scrollIntoView()
 		cy.get('[data-admin-theming-settings]').should('be.visible')
 	})
 
-	it('Change the primary color', function() {
+	it('Change the background color', function() {
 		cy.intercept('*/apps/theming/ajax/updateStylesheet').as('setColor')
 
-		pickRandomColor().then(color => { selectedColor = color })
+		pickRandomColor('[data-admin-theming-setting-background-color]').then(
+			(color) => {
+				selectedColor = color
+			},
+		)
 
 		cy.wait('@setColor')
-		cy.waitUntil(() => validateBodyThemingCss(selectedColor, defaultBackground))
+		cy.waitUntil(() =>
+			validateBodyThemingCss(
+				defaultPrimary,
+				defaultBackground,
+				selectedColor,
+			),
+		)
 	})
 
 	it('Remove the default background', function() {
-		cy.intercept('*/apps/theming/ajax/updateStylesheet').as('removeBackground')
+		cy.intercept('*/apps/theming/ajax/updateStylesheet').as(
+			'removeBackground',
+		)
 
-		cy.get('[data-admin-theming-setting-file-remove]').click()
+		cy.get('[data-admin-theming-setting-file-remove]').scrollIntoView()
+		cy.get('[data-admin-theming-setting-file-remove]').click({
+			force: true,
+		})
 
 		cy.wait('@removeBackground')
 	})
@@ -168,7 +226,9 @@ describe('Remove the default background with a custom primary color', function()
 		cy.logout()
 		cy.visit('/')
 
-		cy.waitUntil(() => validateBodyThemingCss(selectedColor, null))
+		cy.waitUntil(() =>
+			validateBodyThemingCss(defaultPrimary, null, selectedColor),
+		)
 		cy.screenshot()
 	})
 
@@ -182,6 +242,8 @@ describe('Remove the default background with a custom primary color', function()
 })
 
 describe('Remove the default background with a bright color', function() {
+	let selectedColor = ''
+
 	before(function() {
 		// Just in case previous test failed
 		cy.resetAdminTheming()
@@ -191,37 +253,51 @@ describe('Remove the default background with a bright color', function() {
 
 	it('See the admin theming section', function() {
 		cy.visit('/settings/admin/theming')
-		cy.get('[data-admin-theming-settings]').should('exist').scrollIntoView()
+		cy.get('[data-admin-theming-settings]')
+			.should('exist')
+			.scrollIntoView()
 		cy.get('[data-admin-theming-settings]').should('be.visible')
 	})
 
 	it('Remove the default background', function() {
-		cy.intercept('*/apps/theming/ajax/updateStylesheet').as('removeBackground')
+		cy.intercept('*/apps/theming/ajax/updateStylesheet').as(
+			'removeBackground',
+		)
 
 		cy.get('[data-admin-theming-setting-file-remove]').click()
 
 		cy.wait('@removeBackground')
 	})
 
-	it('Change the primary color', function() {
+	it('Change the background color', function() {
 		cy.intercept('*/apps/theming/ajax/updateStylesheet').as('setColor')
 
 		// Pick one of the bright color preset
-		cy.get('[data-admin-theming-setting-primary-color-picker]').click()
-		cy.get('.color-picker__simple-color-circle:eq(4)').click()
+		pickRandomColor(
+			'[data-admin-theming-setting-background-color]',
+			4,
+		).then((color) => {
+			selectedColor = color
+		})
 
 		cy.wait('@setColor')
-		cy.waitUntil(() => validateBodyThemingCss('#ddcb55', null))
+		cy.waitUntil(() =>
+			validateBodyThemingCss(defaultPrimary, null, selectedColor),
+		)
 	})
 
 	it('See the header being inverted', function() {
-		cy.waitUntil(() => cy.window().then((win) => {
-			const firstEntry = win.document.querySelector('.app-menu-main li img')
-			if (!firstEntry) {
-				return false
-			}
-			return getComputedStyle(firstEntry).filter === 'invert(1)'
-		}))
+		cy.waitUntil(() =>
+			cy.window().then((win) => {
+				const firstEntry = win.document.querySelector(
+					'.app-menu-main li img',
+				)
+				if (!firstEntry) {
+					return false
+				}
+				return getComputedStyle(firstEntry).filter === 'invert(1)'
+			}),
+		)
 	})
 })
 
@@ -238,7 +314,9 @@ describe('Change the login fields then reset them', function() {
 
 	it('See the admin theming section', function() {
 		cy.visit('/settings/admin/theming')
-		cy.get('[data-admin-theming-settings]').should('exist').scrollIntoView()
+		cy.get('[data-admin-theming-settings]')
+			.should('exist')
+			.scrollIntoView()
 		cy.get('[data-admin-theming-settings]').should('be.visible')
 	})
 
@@ -246,42 +324,54 @@ describe('Change the login fields then reset them', function() {
 		cy.intercept('*/apps/theming/ajax/updateStylesheet').as('updateFields')
 
 		// Name
-		cy.get('[data-admin-theming-setting-field="name"] input[type="text"]')
-			.scrollIntoView()
-		cy.get('[data-admin-theming-setting-field="name"] input[type="text"]')
-			.type(`{selectall}${name}{enter}`)
+		cy.get(
+			'[data-admin-theming-setting-field="name"] input[type="text"]',
+		).scrollIntoView()
+		cy.get(
+			'[data-admin-theming-setting-field="name"] input[type="text"]',
+		).type(`{selectall}${name}{enter}`)
 		cy.wait('@updateFields')
 
 		// Url
-		cy.get('[data-admin-theming-setting-field="url"] input[type="url"]')
-			.scrollIntoView()
-		cy.get('[data-admin-theming-setting-field="url"] input[type="url"]')
-			.type(`{selectall}${url}{enter}`)
+		cy.get(
+			'[data-admin-theming-setting-field="url"] input[type="url"]',
+		).scrollIntoView()
+		cy.get(
+			'[data-admin-theming-setting-field="url"] input[type="url"]',
+		).type(`{selectall}${url}{enter}`)
 		cy.wait('@updateFields')
 
 		// Slogan
-		cy.get('[data-admin-theming-setting-field="slogan"] input[type="text"]')
-			.scrollIntoView()
-		cy.get('[data-admin-theming-setting-field="slogan"] input[type="text"]')
-			.type(`{selectall}${slogan}{enter}`)
+		cy.get(
+			'[data-admin-theming-setting-field="slogan"] input[type="text"]',
+		).scrollIntoView()
+		cy.get(
+			'[data-admin-theming-setting-field="slogan"] input[type="text"]',
+		).type(`{selectall}${slogan}{enter}`)
 		cy.wait('@updateFields')
 	})
 
 	it('Ensure undo button presence', function() {
-		cy.get('[data-admin-theming-setting-field="name"] .input-field__trailing-button')
-			.scrollIntoView()
-		cy.get('[data-admin-theming-setting-field="name"] .input-field__trailing-button')
-			.should('be.visible')
-
-		cy.get('[data-admin-theming-setting-field="url"] .input-field__trailing-button')
-			.scrollIntoView()
-		cy.get('[data-admin-theming-setting-field="url"] .input-field__trailing-button')
-			.should('be.visible')
-
-		cy.get('[data-admin-theming-setting-field="slogan"] .input-field__trailing-button')
-			.scrollIntoView()
-		cy.get('[data-admin-theming-setting-field="slogan"] .input-field__trailing-button')
-			.should('be.visible')
+		cy.get(
+			'[data-admin-theming-setting-field="name"] .input-field__trailing-button',
+		).scrollIntoView()
+		cy.get(
+			'[data-admin-theming-setting-field="name"] .input-field__trailing-button',
+		).should('be.visible')
+
+		cy.get(
+			'[data-admin-theming-setting-field="url"] .input-field__trailing-button',
+		).scrollIntoView()
+		cy.get(
+			'[data-admin-theming-setting-field="url"] .input-field__trailing-button',
+		).should('be.visible')
+
+		cy.get(
+			'[data-admin-theming-setting-field="slogan"] .input-field__trailing-button',
+		).scrollIntoView()
+		cy.get(
+			'[data-admin-theming-setting-field="slogan"] .input-field__trailing-button',
+		).should('be.visible')
 	})
 
 	it('Validate login screen changes', function() {
@@ -317,19 +407,29 @@ describe('Disable user theming and enable it back', function() {
 
 	it('See the admin theming section', function() {
 		cy.visit('/settings/admin/theming')
-		cy.get('[data-admin-theming-settings]').should('exist').scrollIntoView()
+		cy.get('[data-admin-theming-settings]')
+			.should('exist')
+			.scrollIntoView()
 		cy.get('[data-admin-theming-settings]').should('be.visible')
 	})
 
 	it('Disable user background theming', function() {
-		cy.intercept('*/apps/theming/ajax/updateStylesheet').as('disableUserTheming')
-
-		cy.get('[data-admin-theming-setting-disable-user-theming]')
-			.scrollIntoView()
-		cy.get('[data-admin-theming-setting-disable-user-theming]')
-			.should('be.visible')
-		cy.get('[data-admin-theming-setting-disable-user-theming] input[type="checkbox"]').check({ force: true })
-		cy.get('[data-admin-theming-setting-disable-user-theming] input[type="checkbox"]').should('be.checked')
+		cy.intercept('*/apps/theming/ajax/updateStylesheet').as(
+			'disableUserTheming',
+		)
+
+		cy.get(
+			'[data-admin-theming-setting-disable-user-theming]',
+		).scrollIntoView()
+		cy.get('[data-admin-theming-setting-disable-user-theming]').should(
+			'be.visible',
+		)
+		cy.get(
+			'[data-admin-theming-setting-disable-user-theming] input[type="checkbox"]',
+		).check({ force: true })
+		cy.get(
+			'[data-admin-theming-setting-disable-user-theming] input[type="checkbox"]',
+		).should('be.checked')
 
 		cy.wait('@disableUserTheming')
 	})
@@ -343,8 +443,9 @@ describe('Disable user theming and enable it back', function() {
 
 	it('User cannot not change background settings', function() {
 		cy.visit('/settings/user/theming')
-		cy.get('[data-user-theming-background-disabled]').scrollIntoView()
-		cy.get('[data-user-theming-background-disabled]').should('be.visible')
+		cy.contains(
+			'Customization has been disabled by your administrator',
+		).should('exist')
 	})
 })
 
@@ -363,40 +464,60 @@ describe('The user default background settings reflect the admin theming setting
 
 	it('See the admin theming section', function() {
 		cy.visit('/settings/admin/theming')
-		cy.get('[data-admin-theming-settings]').should('exist').scrollIntoView()
+		cy.get('[data-admin-theming-settings]')
+			.should('exist')
+			.scrollIntoView()
 		cy.get('[data-admin-theming-settings]').should('be.visible')
 	})
 
-	it('Change the primary color', function() {
-		cy.intercept('*/apps/theming/ajax/updateStylesheet').as('setColor')
-
-		pickRandomColor().then(color => { selectedColor = color })
-
-		cy.wait('@setColor')
-		cy.waitUntil(() => cy.window().then(($window) => {
-			const primary = $window.getComputedStyle($window.document.body).getPropertyValue('--color-primary-default')
-			return colord(primary).isEqual(selectedColor)
-		}))
-	})
-
 	it('Change the default background', function() {
 		cy.intercept('*/apps/theming/ajax/uploadImage').as('setBackground')
 
 		cy.fixture('image.jpg', null).as('background')
-		cy.get('[data-admin-theming-setting-file="background"] input[type="file"]').selectFile('@background', { force: true })
+		cy.get(
+			'[data-admin-theming-setting-file="background"] input[type="file"]',
+		).selectFile('@background', { force: true })
 
 		cy.wait('@setBackground')
-		cy.waitUntil(() => cy.window().then((win) => {
-			const currentBackgroundDefault = getComputedStyle(win.document.body).getPropertyValue('--image-background-default')
-			return currentBackgroundDefault.includes('/apps/theming/image/background?v=')
-		}))
+		cy.waitUntil(() =>
+			validateBodyThemingCss(
+				defaultPrimary,
+				'/apps/theming/image/background?v=',
+				null,
+			),
+		)
+	})
+
+	it('Change the background color', function() {
+		cy.intercept('*/apps/theming/ajax/updateStylesheet').as('setColor')
+
+		pickRandomColor('[data-admin-theming-setting-background-color]').then(
+			(color) => {
+				selectedColor = color
+			},
+		)
+
+		cy.wait('@setColor')
+		cy.waitUntil(() =>
+			validateBodyThemingCss(
+				defaultPrimary,
+				'/apps/theming/image/background?v=',
+				selectedColor,
+			),
+		)
 	})
 
 	it('Login page should match admin theming settings', function() {
 		cy.logout()
 		cy.visit('/')
 
-		cy.waitUntil(() => validateBodyThemingCss(selectedColor, '/apps/theming/image/background?v='))
+		cy.waitUntil(() =>
+			validateBodyThemingCss(
+				defaultPrimary,
+				'/apps/theming/image/background?v=',
+				selectedColor,
+			),
+		)
 	})
 
 	it('Login as user', function() {
@@ -413,9 +534,17 @@ describe('The user default background settings reflect the admin theming setting
 
 	it('Default user background settings should match admin theming settings', function() {
 		cy.get('[data-user-theming-background-default]').should('be.visible')
-		cy.get('[data-user-theming-background-default]').should('have.class', 'background--active')
-
-		cy.waitUntil(() => validateUserThemingDefaultCss(selectedColor, '/apps/theming/image/background?v='))
+		cy.get('[data-user-theming-background-default]').should(
+			'have.class',
+			'background--active',
+		)
+
+		cy.waitUntil(() =>
+			validateUserThemingDefaultCss(
+				selectedColor,
+				'/apps/theming/image/background?v=',
+			),
+		)
 	})
 })
 
@@ -432,12 +561,16 @@ describe('The user default background settings reflect the admin theming setting
 
 	it('See the admin theming section', function() {
 		cy.visit('/settings/admin/theming')
-		cy.get('[data-admin-theming-settings]').should('exist').scrollIntoView()
+		cy.get('[data-admin-theming-settings]')
+			.should('exist')
+			.scrollIntoView()
 		cy.get('[data-admin-theming-settings]').should('be.visible')
 	})
 
 	it('Remove the default background', function() {
-		cy.intercept('*/apps/theming/ajax/updateStylesheet').as('removeBackground')
+		cy.intercept('*/apps/theming/ajax/updateStylesheet').as(
+			'removeBackground',
+		)
 
 		cy.get('[data-admin-theming-setting-file-remove]').click()
 
@@ -466,7 +599,10 @@ describe('The user default background settings reflect the admin theming setting
 
 	it('Default user background settings should match admin theming settings', function() {
 		cy.get('[data-user-theming-background-default]').should('be.visible')
-		cy.get('[data-user-theming-background-default]').should('have.class', 'background--active')
+		cy.get('[data-user-theming-background-default]').should(
+			'have.class',
+			'background--active',
+		)
 
 		cy.waitUntil(() => validateUserThemingDefaultCss(defaultPrimary, null))
 	})
diff --git a/cypress/e2e/theming/themingUtils.ts b/cypress/e2e/theming/themingUtils.ts
index 2965886c656..a3a0d509278 100644
--- a/cypress/e2e/theming/themingUtils.ts
+++ b/cypress/e2e/theming/themingUtils.ts
@@ -21,29 +21,54 @@
  */
 import { colord } from 'colord'
 
-const defaultNextcloudBlue = '#0082c9'
 export const defaultPrimary = '#00679e'
 export const defaultBackground = 'kamil-porembinski-clouds.jpg'
 
 /**
+ * Check if a CSS variable is set to a specific color
+ * @param variable Variable to check
+ * @param expectedColor Color that is expected
+ */
+export function validateCSSVariable(variable: string, expectedColor: string) {
+	const value = window.getComputedStyle(Cypress.$('body').get(0)).getPropertyValue(variable)
+	console.debug(`${variable}, is: ${colord(value).toHex()} expected: ${expectedColor}`)
+	return colord(value).isEqual(expectedColor)
+}
+
+/**
  * Validate the current page body css variables
  *
- * @param {string} expectedColor the expected color
+ * @param {string} expectedColor the expected primary color
  * @param {string|null} expectedBackground the expected background
+ * @param {string|null} expectedBackgroundColor the expected background color (null to ignore)
  */
-export const validateBodyThemingCss = function(expectedColor = defaultPrimary, expectedBackground: string|null = defaultBackground) {
+export function validateBodyThemingCss(expectedColor = defaultPrimary, expectedBackground: string|null = defaultBackground, expectedBackgroundColor: string|null = defaultPrimary) {
 	// We must use `Cypress.$` here as any assertions (get is an assertion) is not allowed in wait-until's check function, see documentation
 	const guestBackgroundColor = Cypress.$('body').css('background-color')
 	const guestBackgroundImage = Cypress.$('body').css('background-image')
 
-	const isValidBackgroundColor = colord(guestBackgroundColor).isEqual(expectedColor)
+	const isValidBackgroundColor = expectedBackgroundColor === null || colord(guestBackgroundColor).isEqual(expectedBackgroundColor)
 	const isValidBackgroundImage = !expectedBackground
 		? guestBackgroundImage === 'none'
 		: guestBackgroundImage.includes(expectedBackground)
 
-	console.debug({ guestBackgroundColor: colord(guestBackgroundColor).toHex(), guestBackgroundImage, expectedColor, expectedBackground, isValidBackgroundColor, isValidBackgroundImage })
+	console.debug({
+		isValidBackgroundColor,
+		isValidBackgroundImage,
+		guestBackgroundColor: colord(guestBackgroundColor).toHex(),
+		guestBackgroundImage,
+	})
+
+	return isValidBackgroundColor && isValidBackgroundImage && validateCSSVariable('--color-primary', expectedColor)
+}
 
-	return isValidBackgroundColor && isValidBackgroundImage
+/**
+ * Check background color of element
+ * @param element JQuery element to check
+ * @param color expected color
+ */
+export function expectBackgroundColor(element: JQuery<HTMLElement>, color: string) {
+	expect(colord(element.css('background-color')).toHex()).equal(colord(color).toHex())
 }
 
 /**
@@ -58,28 +83,28 @@ export const validateUserThemingDefaultCss = function(expectedColor = defaultPri
 		return false
 	}
 
-	const defaultOptionBackground = defaultSelectButton.css('background-image')
-	const colorPickerOptionColor = defaultSelectButton.css('background-color')
-	const isNextcloudBlue = colord(colorPickerOptionColor).isEqual('#0082c9')
+	const backgroundImage = defaultSelectButton.css('background-image')
+	const backgroundColor = defaultSelectButton.css('background-color')
 
 	const isValidBackgroundImage = !expectedBackground
-		? defaultOptionBackground === 'none'
-		: defaultOptionBackground.includes(expectedBackground)
-
-	console.debug({ colorPickerOptionColor: colord(colorPickerOptionColor).toHex(), expectedColor, isValidBackgroundImage, isNextcloudBlue })
+		? (backgroundImage === 'none' || Cypress.$('body').css('background-image') === 'none')
+		: backgroundImage.includes(expectedBackground)
+
+	console.debug({
+		colorPickerOptionColor: colord(backgroundColor).toHex(),
+		expectedColor,
+		isValidBackgroundImage,
+		backgroundImage,
+	})
 
-	return isValidBackgroundImage && (
-		colord(colorPickerOptionColor).isEqual(expectedColor)
-		// we replace nextcloud blue with the the default rpimary (apps/theming/lib/Themes/DefaultTheme.php line 76)
-		|| (isNextcloudBlue && colord(expectedColor).isEqual(defaultPrimary))
-	)
+	return isValidBackgroundImage && colord(backgroundColor).isEqual(expectedColor)
 }
 
-export const pickRandomColor = function(): Cypress.Chainable<string> {
+export const pickRandomColor = function(context: string, index?: number): Cypress.Chainable<string> {
 	// Pick one of the first 8 options
-	const randColour = Math.floor(Math.random() * 8)
+	const randColour = index ?? Math.floor(Math.random() * 8)
 
-	const colorPreviewSelector = '[data-user-theming-background-color],[data-admin-theming-setting-primary-color]'
+	const colorPreviewSelector = `${context} [data-admin-theming-setting-color]`
 
 	let oldColor = ''
 	cy.get(colorPreviewSelector).then(($el) => {
@@ -87,7 +112,8 @@ export const pickRandomColor = function(): Cypress.Chainable<string> {
 	})
 
 	// Open picker
-	cy.contains('button', 'Change color').click()
+	cy.get(`${context} [data-admin-theming-setting-color-picker]`).scrollIntoView()
+	cy.get(`${context} [data-admin-theming-setting-color-picker]`).click({ force: true })
 
 	// Click on random color
 	cy.get('.color-picker__simple-color-circle').eq(randColour).click()
diff --git a/cypress/e2e/theming/user-background.cy.ts b/cypress/e2e/theming/user-background.cy.ts
index cdf3ef59f4d..2796247a654 100644
--- a/cypress/e2e/theming/user-background.cy.ts
+++ b/cypress/e2e/theming/user-background.cy.ts
@@ -80,7 +80,7 @@ describe('User select shipped backgrounds and remove background', function() {
 
 		// Validate changed background and primary
 		cy.wait('@setBackground')
-		cy.waitUntil(() => validateBodyThemingCss('#a53c17', background))
+		cy.waitUntil(() => validateBodyThemingCss('#a53c17', background, '#652e11'))
 	})
 
 	it('Select a bright shipped background', function() {
@@ -95,21 +95,21 @@ describe('User select shipped backgrounds and remove background', function() {
 
 		// Validate changed background and primary
 		cy.wait('@setBackground')
-		cy.waitUntil(() => validateBodyThemingCss('#869171', background))
+		cy.waitUntil(() => validateBodyThemingCss('#56633d', background, '#dee0d3'))
 	})
 
 	it('Remove background', function() {
-		cy.intercept('*/apps/theming/background/custom').as('clearBackground')
+		cy.intercept('*/apps/theming/background/color').as('clearBackground')
 
 		// Clear background
-		cy.get('[data-user-theming-background-clear]').click()
+		cy.get('[data-user-theming-background-color]').click()
 
 		// Set the accessibility state
-		cy.get('[data-user-theming-background-clear]').should('have.attr', 'aria-pressed', 'true')
+		cy.get('[data-user-theming-background-color]').should('have.attr', 'aria-pressed', 'true')
 
 		// Validate clear background
 		cy.wait('@clearBackground')
-		cy.waitUntil(() => validateBodyThemingCss('#869171', null))
+		cy.waitUntil(() => validateBodyThemingCss('#56633d', null, '#dee0d3'))
 	})
 })
 
@@ -129,14 +129,12 @@ describe('User select a custom color', function() {
 	it('Select a custom color', function() {
 		cy.intercept('*/apps/theming/background/color').as('setColor')
 
-		pickRandomColor()
+		cy.get('[data-user-theming-background-color]').click()
+		cy.get('.color-picker__simple-color-circle').eq(5).click()
 
 		// Validate custom colour change
 		cy.wait('@setColor')
-		cy.waitUntil(() => cy.window().then((win) => {
-			const primary = getComputedStyle(win.document.body).getPropertyValue('--color-primary')
-			return primary !== defaultPrimary && primary !== defaultPrimary
-		}))
+		cy.waitUntil(() => validateBodyThemingCss(defaultPrimary, null, '#a5b872'))
 	})
 })
 
@@ -154,10 +152,11 @@ describe('User select a bright custom color and remove background', function() {
 	})
 
 	it('Remove background', function() {
-		cy.intercept('*/apps/theming/background/custom').as('clearBackground')
+		cy.intercept('*/apps/theming/background/color').as('clearBackground')
 
 		// Clear background
-		cy.get('[data-user-theming-background-clear]').click()
+		cy.get('[data-user-theming-background-color]').click()
+		cy.get('[data-user-theming-background-color]').click()
 
 		// Validate clear background
 		cy.wait('@clearBackground')
@@ -168,7 +167,8 @@ describe('User select a bright custom color and remove background', function() {
 		cy.intercept('*/apps/theming/background/color').as('setColor')
 
 		// Pick one of the bright color preset
-		cy.contains('button', 'Change color').click()
+		cy.get('[data-user-theming-background-color]').scrollIntoView()
+		cy.get('[data-user-theming-background-color]').click()
 		cy.get('.color-picker__simple-color-circle:eq(4)').click()
 
 		// Validate custom colour change
@@ -194,7 +194,7 @@ describe('User select a bright custom color and remove background', function() {
 
 		// Validate changed background and primary
 		cy.wait('@setBackground')
-		cy.waitUntil(() => validateBodyThemingCss('#a53c17', background))
+		cy.waitUntil(() => validateBodyThemingCss('#a53c17', background, '#652e11'))
 	})
 
 	it('See the header NOT being inverted this time', function() {
@@ -240,15 +240,13 @@ describe('User select a custom background', function() {
 
 		// Wait for background to be set
 		cy.wait('@setBackground')
-		cy.waitUntil(() => validateBodyThemingCss('#4c0c04', 'apps/theming/background?v='))
+		cy.waitUntil(() => validateBodyThemingCss(defaultPrimary, 'apps/theming/background?v=', '#2f2221'))
 	})
 })
 
 describe('User changes settings and reload the page', function() {
 	const image = 'image.jpg'
-	const primaryFromImage = '#4c0c04'
-
-	let selectedColor = ''
+	const colorFromImage = '#2f2221'
 
 	before(function() {
 		cy.createRandomUser().then((user: User) => {
@@ -280,28 +278,39 @@ describe('User changes settings and reload the page', function() {
 
 		// Wait for background to be set
 		cy.wait('@setBackground')
-		cy.waitUntil(() => validateBodyThemingCss(primaryFromImage, 'apps/theming/background?v='))
+		cy.waitUntil(() => validateBodyThemingCss(defaultPrimary, 'apps/theming/background?v=', colorFromImage))
 	})
 
 	it('Select a custom color', function() {
 		cy.intercept('*/apps/theming/background/color').as('setColor')
 
-		cy.contains('button', 'Change color').click()
+		cy.get('[data-user-theming-background-color]').click()
 		cy.get('.color-picker__simple-color-circle:eq(5)').click()
+		cy.get('[data-user-theming-background-color]').click()
 
 		// Validate clear background
 		cy.wait('@setColor')
-		cy.waitUntil(() => cy.window().then((win) => {
-			selectedColor = getComputedStyle(win.document.body).getPropertyValue('--color-primary')
-			return selectedColor !== primaryFromImage
-		}))
+		cy.waitUntil(() => validateBodyThemingCss(defaultPrimary, null, '#a5b872'))
+	})
+
+	it('Select a custom primary color', function() {
+		cy.intercept('/ocs/v2.php/apps/provisioning_api/api/v1/config/users/theming/primary_color').as('setPrimaryColor')
+
+		cy.get('[data-user-theming-primary-color-trigger]').scrollIntoView()
+		cy.get('[data-user-theming-primary-color-trigger]').click()
+		// eslint-disable-next-line cypress/no-unnecessary-waiting
+		cy.wait(500)
+		cy.get('.color-picker__simple-color-circle').should('be.visible')
+		cy.get('.color-picker__simple-color-circle:eq(2)').click()
+		cy.get('[data-user-theming-primary-color-trigger]').click()
+
+		// Validate clear background
+		cy.wait('@setPrimaryColor')
+		cy.waitUntil(() => validateBodyThemingCss('#c98879', null, '#a5b872'))
 	})
 
 	it('Reload the page and validate persistent changes', function() {
 		cy.reload()
-		cy.waitUntil(() => validateBodyThemingCss(selectedColor, 'apps/theming/background?v='))
-
-		// validate accessibility state
-		cy.get('[data-user-theming-background-custom]').should('have.attr', 'aria-pressed', 'true')
+		cy.waitUntil(() => validateBodyThemingCss('#c98879', null, '#a5b872'))
 	})
 })