enhance: read theme color nodeinfo (#8977)

* provide theme color in nodeinfo metadata

* read theme color from nodeinfo

Prefer to read the theme color from the nodeinfo since it is more
performant than performing selector search on a DOM.

1 files changed, 3 insertions, 3 deletions

diff --git a/packages/backend/src/services/fetch-instance-metadata.ts b/packages/backend/src/services/fetch-instance-metadata.ts
index 029c388dc2..ee1245132a 100644
--- a/packages/backend/src/services/fetch-instance-metadata.ts
+++ b/packages/backend/src/services/fetch-instance-metadata.ts
@@ -34,7 +34,7 @@ export async function fetchInstanceMetadata(instance: Instance, force = false):
 		const [favicon, icon, themeColor, name, description] = await Promise.all([
 			fetchFaviconUrl(instance, dom).catch(() => null),
 			fetchIconUrl(instance, dom, manifest).catch(() => null),
-			getThemeColor(dom, manifest).catch(() => null),
+			getThemeColor(info, dom, manifest).catch(() => null),
 			getSiteName(info, dom, manifest).catch(() => null),
 			getDescription(info, dom, manifest).catch(() => null),
 		]);
@@ -208,8 +208,8 @@ async function fetchIconUrl(instance: Instance, doc: DOMWindow['document'] | nul
 	return null;
 }
 
-async function getThemeColor(doc: DOMWindow['document'] | null, manifest: Record<string, any> | null): Promise<string | null> {
-	const themeColor = doc?.querySelector('meta[name="theme-color"]')?.getAttribute('content') || manifest?.theme_color;
+async function getThemeColor(info: NodeInfo | null, doc: DOMWindow['document'] | null, manifest: Record<string, any> | null): Promise<string | null> {
+	const themeColor = info?.metadata?.themeColor || doc?.querySelector('meta[name="theme-color"]')?.getAttribute('content') || manifest?.theme_color;
 
 	if (themeColor) {
 		const color = new tinycolor(themeColor);