FIP: Color-Scheme Adaptive Frames

[dalechyn]

App clients such as Warpcast, Supercast and others have different color schemes depending on the system settings: Light, Dark, System.

Frontend Developers are able to leverage user based settings via color-scheme CSS property, but Frame Developers can't leverage it.

As a consequence, we see lots of really high-contrast frames as some Frame Developers are opinionated to have a Frame with a Black/White background, breaking the visual experience of a user scrolling a feed.

This FIP proposes to add the next meta tag properties to the Frame specification:

Property	Default	Description
fc:frame:image:light	fc:frame:image	Frame Image URL for color-scheme: light user preference
fc:frame:image:dark	fc:frame:image	Frame Image URL for color-scheme: dark user preference

This way, Frame developers can implement different color versions for their Frames, enhancing overall visual experience for App Clients.

Other important implications:

• Having the current Color Scheme Preference, App Clients must prioritize using :light or :dark version of the Frame Image URL.
• On Color Scheme change (either manual or system triggered), App Clients must prioritize the new Color Scheme Preference and switch the rendered Frames to it in order to achieve smooth overall UI Color Scheme transition.
• Same Caching policies are applied to such Frame Images.
• Frameworks such as frog, framesjs, onchainkit should implement necessary helpers for easier development of adaptive frames.

[varunsrin]

Generally think this is a good idea and we should move to drafts.

The one caveat is that @horsefacts is thinking through what a v2 of frames would look like. It might be a good idea to hold this back until we have a better POV on that in case it would affect how this feature is implemented.