Need a way to get icon in primary text color

[nickvergessen]

As an app we want to have icons on primary color buttons.
For this we use $color-primary-text because we want it to be independent from the text color, because the text color in the button can be different from normal text color. So the following sounds like the solution:

	.icon-incoming-call {
		@include icon-color('video', 'actions', $color-primary-text, 1, true);
	}

However, $color-primary-text is white or black, and therefor

server/core/css/functions.scss

Lines 70 to 74 in 521b2dd

	$varName: "--icon-#{$dir}-#{$icon}-#{$color}";
	@if $core {
	$varName: "--icon-#{$icon}-#{$color}";
	}
	#{$varName}: url(icon-color-path($icon, $dir, $color, $version, $core));

will use --icon-video-fff in case of default nextcloud blue, that is still okay.
But if you now enable dark-mode --icon-video-fff requests the image ?color=000 because:

server/apps/accessibility/lib/Controller/AccessibilityController.php

Lines 281 to 297 in 30d985b

	/**
	* Remove all matches from the $rule regex
	*
	* @param string $css string to parse
	* @return string
	*/
	private function invertSvgIconsColor(string $css) {
	return str_replace(
	['color=000&', 'color=fff&', 'color=***&'],
	['color=***&', 'color=000&', 'color=fff&'],
	str_replace(
	['color=000000&', 'color=ffffff&', 'color=******&'],
	['color=******&', 'color=000000&', 'color=ffffff&'],
	$css
	)
	);
	}

Doesn't know anymore that fff is because of $color-primary-text 😿

Any clever idea around this? cc @skjnldsv @juliushaertl

[skjnldsv]

Use svg icons inline or icons as font? and use color: var(--color-primary-text)
This is where we want to go in the end, icons classes are too messy.

[nickvergessen]

This is where we want to go in the end, icons classes are too messy.

Sorry I'm just a backend dev in need of a icon in the color I tell you. So for now we get a wrong icon color in Talk dark mode, fine by me.

[nickvergessen]

Onlyoffice has the same issue:
ONLYOFFICE/onlyoffice-nextcloud#247

[mat-m]

Mail has the same issue.
Inbox and Trash icons are black with Dark Theme from Accessibility.

[nickvergessen]

nextcloud/spreed@6ddb58f seems to work as an intermediate workaround.

[blizzz]

clearing the milestone

[juliusknorr]

Is that actually needed now that more apps are switching to use vue material icons that embed SVG which can dynamically be adjusted in color? I'd say we can close this.

[nickvergessen]

Still relevant for app icons with situations like the header bar or login page (e.g. registration app), but yeah less urgent

[skjnldsv]

Do I get this right? You want an icon to have a fitting colour over a primary colour?
Like if it's too bright -> dark and if it's too dark -> bright ?

if so #31751 tackles that in a way

[nickvergessen]

Yes exactly

[skjnldsv]

#32060

[szaimen]

Hi, please update to 24.0.8 or better 25.0.2 and report back if it fixes the issue. Thank you!

[nickvergessen]

Still an issue atm, but we are all migrating away to inline SVGs, so it's hopefully solved soon.