[npm Support] - Could you please set npmjs.com website color scheme to only light

[LitoMore]

Select Topic Area

Product Feedback

Body

Motivation ("The Why")

Since our npmjs.com supports light mode only, we should add the CSS :root { color-scheme: only light } to our page.

According to GitHub's documentation Specifying the theme an image is shown to, more and more projects are changing their code to <picture> tags to support dark mode.

But our npmjs.com didn't set the color-scheme, which means it will show dark mode pictures when a user changes the operating system color theme to dark on npmjs.com.

How

Add a <picture> to the page. You can test with this code below:

<picture>
  <source media="(prefers-color-scheme: dark)" srcset="https://cdn.simpleicons.org/npm/blue">
  <source media="(prefers-color-scheme: light)" srcset="https://cdn.simpleicons.org/npm/red">
  <img alt="Simple Icons" width=70 src="https://cdn.simpleicons.org/npm/red">
</picture>

Or use an image which has prefers-color-scheme inside:

<img src="https://cdn.simpleicons.org/npm/red/blue" />

Then you can switch your operating system to dark mode.

Current Behaviour

It will show a blue color image on the page.

Desired Behaviour

The image should be kept in red for light mode.

References

• Specifying the theme an image is shown to

[devrose04]

Thank you

[LitoMore]

Thank you for what?