PWA theme_color rgb

[Gmagoz]

FAQ

• Yes, my issue is not about variability or throttling.
• Yes, my issue is not about a specific accessibility audit (file with axe-core instead).

URL

http://local(URL_not_needed)

What happened?

theme_color and background_color specified in rgb is not recognised.

What did you expect?

theme_color and background_color specified in rgb is recognised.

What have you tried?

in hex or rgba OK

How were you running Lighthouse?

Chrome DevTools

Lighthouse Version

7.2.0

Chrome Version

No response

Node Version

No response

Relevant log output

No response

[sidverma32]

@brendankenny if we convert the bgColor and themeColor from rgb to hex , it becomes this :

• const bgColor = 'rgb(222, 184, 135)'; //#DEB887
• const themeColor = 'rgba(5%, 10%, 20%, 0.4)'; // #0d1a33

Let me know if that works @Gmagoz and @brendankenny then will add the support for hex or is that added in rgb intentionally ??

[Gmagoz]

Sorry, you (or I) seems to miss the point.
These two are correctly recognised:
bgColor = "rgba(222, 184, 135, 1.0)";
bgColor = "#DEB887";

This is Not recognised:
bgColor = "rgb(222, 184, 135)";

My opinion simply rgb value to rgba value(with alpha 1.0)

[patrickhulce]

@Gmagoz thanks for filing!

Can you provide a bit more information about what you mean by "not recognized"? (filling out the fields you skipped with an example URL would be great)

Our manifest parser does recognize rgb colors.

lighthouse/lighthouse-core/test/lib/manifest-parser-test.js

Lines 528 to 537 in fe91d56

	it('correctly parses RGB/RGBA colors', () => {
	const bgColor = 'rgb(222, 184, 135)';
	const themeColor = 'rgba(5%, 10%, 20%, 0.4)';
	const parsedManifest = getParsedManifest(bgColor, themeColor).value;
	assert.strictEqual(parsedManifest.background_color.value, bgColor);
	assert.strictEqual(parsedManifest.background_color.warning, undefined);
	assert.strictEqual(parsedManifest.theme_color.value, themeColor);
	assert.strictEqual(parsedManifest.theme_color.warning, undefined);
	});

[Gmagoz]

I'm sorry. I try explain better:
I have a html file with "embedded inline" manifest.
In manifest I specified [background_color] and [theme_color]. These are correctly detected (and works good) in devtools tab application presentation(section).
But in tab Lighthouse ProgressiveWebApp(section) PWA Optimized there are:
Failures: Manifest does not have 'background_color', Manifest does not have 'theme_color'.
This last point I mean for not "recognised" by Lighthouse.

[patrickhulce]

I have a html file with "embedded inline" manifest.

Do you have an example URL? I'm not sure what this means. A manifest in a data URL?

[connorjclark]

We can reopen if provided more information (an example website that fails your expectations).