Feature request: Dark mode

[jimmywarting]

The website is too bright in the night

[MylesBorins]

hey @jimmywarting.

thanks for the suggestion. At this time we are not going to be able to prioritize Dark Mode on npmjs.com

[steve-taylor]

That's disappointing, especially considering Microsoft's very deep pockets and army of developers.

Like many developers, I do most of my work at night in low lighting. Whenever I come across a package on npmjs.com, I quickly navigate to GitHub because it's too painful to read.

Please respect users' settings.

[jimmywarting]

This is a habit of me as well. quickly go to github's readme instead.

[dmrickey]

hey @jimmywarting.

thanks for the suggestion. At this time we are not going to be able to prioritize Dark Mode on npmjs.com

What about 3 years later?

[Mohitraj72]

🌞

[DesignByOnyx]

I too agree its a shame that a website such as NPM does not acknowledge or provide dark mode in 2023.

I use a bookmarklet to apply a simple dark mode to any website. It's not perfect, but it works almost everywhere. Just create a new bookmark and use this as the URL:

javascript: (e=>{var r="dark-mode-bookmarklet",d=e.getElementById(r);if(d)return d.parentNode.removeChild(d);var t=e.createElement("style");t.id=r,t.innerHTML="html, img, video, canvas, svg { background: #fff; filter: invert(0.9); }",e.body.appendChild(t)})(document);

Just click the bookmark any time you want to convert a site to dark mode. This is the unminified code:

((doc) => {
    var id = 'dark-mode-bookmarklet';
    var existing = doc.getElementById(id);
    if (existing) return existing.parentNode.removeChild(existing);
    var style = doc.createElement('style');
    style.id = id;
    style.innerHTML = 'html, img, video, canvas, svg { background: #fff; filter: invert(0.9); }';
    doc.body.appendChild(style);
})(document)

[jimmywarting]

Hi 👋

i also got a bookmarklet for throwing black hole into a flash bangs.

Use it on some websites from times to time, I have certainly applied it onto NPM a couple of times at night.
I can't understand either how a site like NPM that's is literally built by developers and for developers, that are for the most part night owls like myself.

would like to share my version here as well:

javascript: (function() {
  function invert(o, t) {
    var r = o.split("("),
      n = r[1].split(")")[0].split(",");
    return n.forEach(function(o, r) {
      r < 3 && (n[r] = "color" == t && 255 - parseInt(o) < 50 ? 120 : 255 - parseInt(o))
    }), n = n.join(","), r[0] + "(" + n + ")"
  }
  document.querySelectorAll("*:not([invTouch])").forEach(function(o) {
    var t = window.getComputedStyle(o);
    o.style.backgroundColor = invert(t.backgroundColor, "back"), o.style.color = invert(t.color, "color"), o.setAttribute("invTouch", "true")
  });
})();

Good Modern UI don't use completely white background anymore. At least some near gray-ish (dimmed color that isn't exactly white) is the least someone can do to make it somewhat more tolerable just pick any other color.

[danleitch]

Everyday I learn something new... I had new idea you could inject JS this way.
Thank you.

[davidkhierl]

opening npmjs.com at night is like playing cs:go and got flashbang. come on its been 2 years since this got requested🤦‍♂️

[quiquelhappy]

just add this already

[movahhedi]

Hi, How you're doing well.
As a developer, I work with NPM everyday. Every single tool of mine is on dark mode, from Windows, to chatting apps, to dev tools. I even switched from Windows 10 to 11 JUST for the dark mode Notepad. Everything, but NPM. My eyes really hurt when I read READMEs. I even go to the repo to read it in GitHub's dark mode.
So please, add it. If needed, I can help on it too, just ping me.
But, really; please.

[raaymax]

i will just say "ping" and "+1"

[georgebutter]

My wife gets very angry at me when I go on npm in bed. Then I have to stop coding and sleep. :(
Then I realize I don't have a wife. Thank god she's not angry.

[movahhedi]

Well, NPM, him not having a wife is on you!

[Akif9748]

I think best solution for now:
https://github.com/iarlo/NPM-Dark

[dipdowel]

Dear NPM, I agree with the others. It would be lovely to have a dark mode option available. Hopefully, some day you'll find the time to work on it.

Thanks for your time!
Kind regards

[remcohaszing]

For me dark mode means accessibility

[h4mmad]

[krampus-nuggets]

bro, wtf.

[iamexe]

https://darkreader.org/

@jimmywarting
@DesignByOnyx
@remcohaszing

I figured one of you 3 may like to know about this add-on. It supports all major browsers.
All one has to do is install it, and then visit any page.

https://www.npmjs.com/package/vue shows like this:

[jimmywarting]

hmm, i don't know if i would go as far to download any 3rd party extension. i would rather stick to something like:

• chrome://flags/#enable-force-dark
• brave://flags/#enable-force-dark
• or my bookmarklet where i occasionally need to use it on some site

[DesignByOnyx]

The bookmarklet I made serves me well. Also, as a long tenured front end engineer I have an add-on that lets me write my own CSS - but the bigger point is that dark mode in 2023 shouldn't require any of this... and it's a real shame NPM is an offender of this rather basic usability and accessibility feature.

[iamexe]

"and it's a real shame NPM is an offender of this rather basic usability and accessibility feature." I guess it's just laziness. Has someone made a pull request with a dark mode toggle either in header or footer? Would they accept it?

…

On Fri, 20 Oct 2023, 23:39 Ryan Wheale, ***@***.***> wrote: The bookmarklet I made serves me well. Also, as a long tenured front end engineer I have an add-on that lets me write my own CSS - but the bigger point is that dark mode in 2023 shouldn't require any of this... and it's a real shame NPM is an offender of this rather basic usability and accessibility feature. — Reply to this email directly, view it on GitHub <https://github.com/npm/feedback/discussions/420#discussioncomment-7343437>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AONY5LGHARIRPVYAR2EI6ZTYALVSNAVCNFSM45YZPAK2U5DIOJSWCZC7NNSXTOKENFZWG5LTONUW63SDN5WW2ZLOOQ5TOMZUGM2DGNY> . You are receiving this because you commented.Message ID: ***@***.***>

[benjaminhera]

I would go as far, that this is an accessibility issue. It has already been 2 years since this has been requested, just let someone do it for free.

[MadameMinty]

There is an external solution at least https://github.com/iarlo/NPM-Dark

[danvlasov123]

I support this party

[dsshard]

When will there be a dark theme? My eyes hurt!

[SaulDope]

I just got flash-banged and maybe concussion grenaded too. Dark mode pl0x

[iamexe]

the meme that keeps on giving

…

On Sat, 20 Apr 2024, 08:12 SaulDope, ***@***.***> wrote: I just got flash-banged and maybe concussion grenaded too. Dark mode pl0x — Reply to this email directly, view it on GitHub <https://github.com/npm/feedback/discussions/420#discussioncomment-9172624>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AONY5LD3MSIJKZSYXOFS2PLY6IBLRAVCNFSM45YZPAK2U5DIOJSWCZC7NNSXTOKENFZWG5LTONUW63SDN5WW2ZLOOQ5TSMJXGI3DENA> . You are receiving this because you commented.Message ID: ***@***.***>

[evrimalacan]

Just got flashbanged. Let's keep this alive.

[j1mmie]

Give me access to the repo I'll add dark mode

[The-White-Fang]

+1

[IARI]

+1

If you provide a portal for developers and dont have dark mode a priority, then you simply don't know or care about the priorities of your users.
This is accessibility.
I have had eye chronic inflammations for 15 years now - and bright displays are a big reason for.

[gVguy]

This is very much needed

[gleb-svechnikov]

Come on, please we need this feature. At least initiate development process, it not that hard anymore with CSS color-scheme which is widely supported.

[lt-jnavia]

At this point I'm convinced a lead dev on npmjs is pedantic about light-mode and obstructs all attempts to implement a dark mode.

It's 2024....

[github-actions[bot]]

💬 Your Product Feedback Has Been Submitted 🎉

Thank you for taking the time to share your insights with us! Your feedback is invaluable as we build a better GitHub experience for all our users.

Here's what you can expect moving forward ⏩

• Your input will be carefully reviewed and cataloged by members of our product teams. 
  • Due to the high volume of submissions, we may not always be able to provide individual responses.
  • Rest assured, your feedback will help chart our course for product improvements.
• Other users may engage with your post, sharing their own perspectives or experiences. 
• GitHub staff may reach out for further clarification or insight. 
  • We may 'Answer' your discussion if there is a current solution, workaround, or roadmap/changelog post related to the feedback.

Where to look to see what's shipping 👀

• Read the Changelog for real-time updates on the latest GitHub features, enhancements, and calls for feedback.
• Explore our Product Roadmap, which details upcoming major releases and initiatives.

What you can do in the meantime 💻

• Upvote and comment on other user feedback Discussions that resonate with you.
• Add more information at any point! Useful details include: use cases, relevant labels, desired outcomes, and any accompanying screenshots.

As a member of the GitHub community, your participation is essential. While we can't promise that every suggestion will be implemented, we want to emphasize that your feedback is instrumental in guiding our decisions and priorities.

Thank you once again for your contribution to making GitHub even better! We're grateful for your ongoing support and collaboration in shaping the future of our platform. ⭐

[austin-brockert]

I have two solutions to make the bright website dark.

1. Traditional Method
   As you know, we can add some of feature to make your bright website dark into css and html.

2. Modern Method
   If you are using modern JavaScript framework or library, you can use pre-built node modules such as user-dark-mode and react-dark-mode-toggle.

You are able to choose one of them and one of the modules for your website.
Hoping this article to make you assist.

[LeakedDave]

UHHH WUT LOL HOW IS THIS EVEN I CANT

[jscrui]

Bro, seriously, take one day and add a dark mode to this site. Every time I switch to npm, it feels like I'm getting flashlighted 🤣