todo: url preview background on ios in dark mode should use a dark background

[JuCJeff]

The color should detect the system preference for light / dark mode, the color optionally could be customized for both.

Description

Url preview should adhere to the system color and have a dark background in dark mode on ios, which currently is not the case.

Steps to Reproduce

1. Send the website over text to either an iPhone or an Android device with dark mode set as a preference.

2. Observe the url preview on the mobile device.

Expected Behavior

A dark background should be shown when the user has dark more as their preference.

Actual Behavior

A more light theme suitable background is showing.

Screenshots

Environment

• OS: iOS, Android

Possible Solution

We likely need to customize the meta tag in the web page to something like <meta name="theme-color" content="#yourColorCode"> in index.html to account for this. We could also consider using libraries like reac-link-preview for better customization.

Resources

• https://ogp.me/
• https://ahrefs.com/blog/open-graph-meta-tags/
• https://github.com/Dhaiwat10/react-link-preview?tab=readme-ov-file

[jonramm]

Lemme grab this and see what I can do!

[jonramm]

It seems to be changing automatically when I switch between light and dark mode on my iPhone:

Is this perhaps just an Android issue? I copy/pasted the url into an iMessage, is there another way to trigger this?

[JuCJeff]

It seems to be changing automatically when I switch between light and dark mode on my iPhone:

Is this perhaps just an Android issue? I copy/pasted the url into an iMessage, is there another way to trigger this?

Have you tried sending this to an iPhone while the iPhone is already in dark mode? I think that's how this bug initially arose for me 🤔