search

nprapps / liveblog-headlines

RSS widget for liveblogs or NPR.org API feeds
Other
2 stars 1 forks source link

Liveblog headlines module: Dark mode support #5

Open alykat opened 3 months ago

alykat commented 3 months ago

Not looking great in the android app (only place we're using dark mode right now).

For link styles, draw inspiration from how links are treated elsewhere on the site in dark mode.

One thing to look into: If the embed supports dark mode but the surrounding page does not, what happens?

image (7)

hilaryfung commented 3 weeks ago

I've added dark-mode styles, wrapped in a media query (prefers-color-scheme: dark), in seed.less on the 5-dark-mode branch.

Preview with your device in dark mode: https://apps.npr.org/liveblog-headlines-test/?renderPlatform=nprone_android&feed=https%3A%2F%2Fwww.npr.org%2Flive-updates%2Ftrump-2024-rnc-milwaukee.rss&link=https%3A%2F%2Fwww.npr.org%2Flive-updates%2Ftrump-2024-rnc-milwaukee&headline=Latest%20RNC%20Updates&theme=2024&initialWidth=960&renderPlatform=nprone_androidchildId=responsive-embed-headlines&parentTitle=NPR%20-%20Breaking%20News%2C%20Analysis%2C%20Music%2C%20Arts%20%26%20Podcasts%20%3A%20NPR&parentUrl=https%3A%2F%2Fwww.npr.org%2F

The media query may not be a good idea because NPR is not yet consistently supporting dark mode across all of its products. So the embed may appear on a page that doesn't support dark mode.

Next step: Ask the mobile team how they'd handle an element that supports dark mode, on a page that doesn’t, on a device/browser that is in dark mode.

Worst-case solution: Put a white background on the embed.