Invert header icons on bright preset backgrounds

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

Author: Pytal

apps/dashboard/src/DashboardApp.vue

@@ -103,10 +103,6 @@ import isMobile from './mixins/isMobile.js'
 const panels = loadState('dashboard', 'panels')
 const firstRun = loadState('dashboard', 'firstRun')
 
-const background = loadState('theming', 'background')
-const themingDefaultBackground = loadState('theming', 'themingDefaultBackground')
-const shippedBackgroundList = loadState('theming', 'shippedBackgrounds')
-
 const statusInfo = {
 	weather: {
 		text: t('dashboard', 'Weather'),
@@ -148,8 +144,6 @@ export default {
 			modal: false,
 			appStoreUrl: generateUrl('/settings/apps/dashboard'),
 			statuses: {},
-			background,
-			themingDefaultBackground,
 		}
 	},
 	computed: {
@@ -240,7 +234,6 @@ export default {
 	},
 
 	mounted() {
-		this.updateGlobalStyles()
 		this.updateSkipLink()
 		window.addEventListener('scroll', this.handleScroll)
 
@@ -257,21 +250,6 @@ export default {
 	},
 
 	methods: {
-		updateGlobalStyles() {
-			// Override primary-invert-if-bright and color-primary-text if background is set
-			const isBackgroundBright = shippedBackgroundList[this.background]?.theming === 'dark'
-			if (isBackgroundBright) {
-				document.querySelector('#header').style.setProperty('--primary-invert-if-bright', 'invert(100%)')
-				document.querySelector('#header').style.setProperty('--color-primary-text', '#000000')
-				// document.body.removeAttribute('data-theme-dark')
-				// document.body.setAttribute('data-theme-light', 'true')
-			} else {
-				document.querySelector('#header').style.setProperty('--primary-invert-if-bright', 'no')
-				document.querySelector('#header').style.setProperty('--color-primary-text', '#ffffff')
-				// document.body.removeAttribute('data-theme-light')
-				// document.body.setAttribute('data-theme-dark', 'true')
-			}
-		},
 		/**
 		 * Method to register panels that will be called by the integrating apps
 		 *

apps/theming/css/default.css

@@ -53,6 +53,7 @@
   --breakpoint-mobile: 1024px;
   --background-invert-if-dark: no;
   --background-invert-if-bright: invert(100%);
+  --background-image-invert-if-bright: no;
   --image-background: url('/core/img/app-background.jpg');
   --color-background-plain: #0082c9;
   --primary-invert-if-bright: no;

apps/theming/lib/Themes/CommonThemeTrait.php

@@ -133,15 +133,16 @@ protected function generateUserBackgroundVariables(): array {
 					// TODO: implement primary color from custom background --color-background-plain
 				];
 			}
-			
+
 			// The user picked a shipped background
 			if (isset(BackgroundService::SHIPPED_BACKGROUNDS[$themingBackground])) {
 				return [
 					'--image-background' => "url('" . $this->urlGenerator->linkTo(Application::APP_ID, "/img/background/$themingBackground") . "')",
 					'--color-background-plain' => $this->themingDefaults->getColorPrimary(),
+					'--background-image-invert-if-bright' => BackgroundService::SHIPPED_BACKGROUNDS[$themingBackground]['theming'] ?? null === BackgroundService::THEMING_MODE_DARK ? 'invert(100%)' : 'no',
 				];
 			}
-			
+
 			// The user picked a static colour
 			if (substr($themingBackground, 0, 1) === '#') {
 				return [

apps/theming/lib/Themes/DefaultTheme.php

@@ -189,6 +189,7 @@ public function getCSSVariables(): array {
 			'--breakpoint-mobile' => '1024px',
 			'--background-invert-if-dark' => 'no',
 			'--background-invert-if-bright' => 'invert(100%)',
+			'--background-image-invert-if-bright' => 'no',
 
 			// Default last fallback values
 			'--image-background' => "url('" . $this->urlGenerator->imagePath('core', 'app-background.jpg') . "')",

apps/theming/src/UserThemes.vue

@@ -94,13 +94,13 @@ const shortcutsDisabled = loadState('theming', 'shortcutsDisabled', false)
 
 const background = loadState('theming', 'background')
 const themingDefaultBackground = loadState('theming', 'themingDefaultBackground')
-const shippedBackgroundList = loadState('theming', 'shippedBackgrounds')
 const isUserThemingDisabled = loadState('theming', 'isUserThemingDisabled')
 
 console.debug('Available themes', availableThemes)
 
 export default {
 	name: 'UserThemes',
+
 	components: {
 		ItemPreview,
 		NcCheckboxRadioSwitch,
@@ -123,6 +123,7 @@ export default {
 		themes() {
 			return this.availableThemes.filter(theme => theme.type === 1)
 		},
+
 		fonts() {
 			return this.availableThemes.filter(theme => theme.type === 2)
 		},
@@ -141,9 +142,11 @@ export default {
 				.replace('{guidelines}', this.guidelinesLink)
 				.replace('{linkend}', '</a>')
 		},
+
 		guidelinesLink() {
 			return '<a target="_blank" href="https://www.w3.org/WAI/standards-guidelines/wcag/" rel="noreferrer nofollow">'
 		},
+
 		descriptionDetail() {
 			return t(
 				'theming',
@@ -153,9 +156,11 @@ export default {
 				.replace('{designteam}', this.designteamLink)
 				.replace(/\{linkend\}/g, '</a>')
 		},
+
 		issuetrackerLink() {
 			return '<a target="_blank" href="https://github.com/nextcloud/server/issues/" rel="noreferrer nofollow">'
 		},
+
 		designteamLink() {
 			return '<a target="_blank" href="https://nextcloud.com/design" rel="noreferrer nofollow">'
 		},
@@ -167,32 +172,12 @@ export default {
 		},
 	},
 
-	mounted() {
-		this.updateGlobalStyles()
-	},
-
 	methods: {
 		updateBackground(data) {
 			this.background = (data.type === 'custom' || data.type === 'default') ? data.type : data.value
-			this.updateGlobalStyles()
 			this.$emit('update:background')
 		},
 
-		updateGlobalStyles() {
-			// Override primary-invert-if-bright and color-primary-text if background is set
-			const isBackgroundBright = shippedBackgroundList[this.background]?.theming === 'dark'
-			if (isBackgroundBright) {
-				document.querySelector('#header').style.setProperty('--primary-invert-if-bright', 'invert(100%)')
-				document.querySelector('#header').style.setProperty('--color-primary-text', '#000000')
-				// document.body.removeAttribute('data-theme-dark')
-				// document.body.setAttribute('data-theme-light', 'true')
-			} else {
-				document.querySelector('#header').style.setProperty('--primary-invert-if-bright', 'no')
-				document.querySelector('#header').style.setProperty('--color-primary-text', '#ffffff')
-				// document.body.removeAttribute('data-theme-light')
-				// document.body.setAttribute('data-theme-dark', 'true')
-			}
-		},
 		changeTheme({ enabled, id }) {
 			// Reset selected and select new one
 			this.themes.forEach(theme => {
@@ -206,6 +191,7 @@ export default {
 			this.updateBodyAttributes()
 			this.selectItem(enabled, id)
 		},
+
 		changeFont({ enabled, id }) {
 			// Reset selected and select new one
 			this.fonts.forEach(font => {

core/css/server.css

@@ -907,7 +907,7 @@ span.ui-icon {
 			content: ' ';
 			// Force white
 			background-image: var(--original-icon-contacts-white);
-			filter: var(--primary-invert-if-bright);
+			filter: var(--background-image-invert-if-bright);
 		}
 
 		&:hover,

core/css/styles.css

@@ -144,6 +144,7 @@ $header-icon-size: 20px;
 		position: relative;
 		display: flex;
 		opacity: .7;
+		filter: var(--background-image-invert-if-bright);
 
 		&.app-menu-entry__active {
 			opacity: 1;
@@ -183,7 +184,6 @@ $header-icon-size: 20px;
 			width: $header-icon-size;
 			height: $header-icon-size;
 			padding: calc((100% - $header-icon-size) / 2);
-			filter: var(--primary-invert-if-bright);
 		}
 
 		.app-menu-entry--label {
@@ -269,7 +269,6 @@ $header-icon-size: 20px;
 		}
 
 		img {
-			filter: var(--background-invert-if-bright);
 			width: $header-icon-size;
 			height: $header-icon-size;
 			padding: calc((50px - $header-icon-size) / 2);

core/css/styles.scss

@@ -718,6 +718,10 @@ $input-height: 34px;
 $input-padding: 6px;
 
 .unified-search {
+	&__trigger {
+		filter: var(--background-image-invert-if-bright);
+	}
+
 	&__input-wrapper {
 		position: sticky;
 		// above search results