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:
This is a repo tracking features of the npm cli. The website you mentioned is part of the npm registry, for which the place to go for support is npmjs.com/support
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:Or use an image which has prefers-color-scheme inside:
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