Liveblog headlines module: Dark mode support

[alykat]

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?

[hilaryfung]

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.

[DanielJWood]

FWIW, it seems that previewing this in dark mode yields the following (I'm in chrome, with my device set to dark mode):

Proposed fix to this would be to set body to black or dark on the same media query that is currently present for the font.

[DanielJWood]

see example here if you're in dark mode: https://apps.npr.org/liveblog-headlines-test/?renderPlatform=nprone_android&feed=https%3A%2F%2Fwww.npr.org%2Flive-updates%2Ftrump-harris-2024-election-results.rss&link=https%3A%2F%2Fwww.npr.org%2Flive-updates%2Ftrump-harris-2024-election-results&headline=Latest%20Election%20Day%20Updates&theme=2024&initialWidth=960&childId=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