npm / rfcs

Public change requests/proposals & ideation
Other
729 stars 239 forks source link

[RRFC] Set website color scheme to only light #712

Closed LitoMore closed 1 year ago

LitoMore commented 1 year ago

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

wraithgar commented 1 year ago

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