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

[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]

🌞

[prabowo-sakti]

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.

LOL

[j-refs]

Good ole microsofties doing their best to keep that reputation as the worst of the worst.

Good show boy

[j-refs]

like, I would GLADLY implement a dark mode in less than an hour.
But I'm firmly against helping slack-offs. Especially ones that get paid over twice my salary for the same "job" they don't even do.

[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!

[tc23]

Do you think coding at night impacts your sleep schedule?

[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

[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.

[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 🤣

[really-not-lavacat]

It's been almost 4 years since requesting dark mode. Almost every website I use has dark theme, except NPM. C'mon, is it so hard to implement dark mode?

[naemtl]

Get your priorities straight, NPM

[AyushmanOfficial]

It's a shame that the one of the most visited website by "Web Developers" Which should follow web standards doesn't have a Dark Mode Feature

[j-refs]

I really cannot believe that microsoft would blatantly avoid such a small QoL change.

Let's be real here guys, most of us are devs, and most of those are web devs.
Let's honestly think about and go over all the mountains of hard work that'd take to implement.
Like, come on, do you really think Microsoft has the money or manpower to add a whole new link! An entire link! Plus, a whole 3 line function to query and change classnames! 3 WHOLE DARNDED LINES! And that's even mentioning the like entire 5 lines of css!!

Do we really think Microsoft could afford to do any of that? Especially for the web developers totally not holding their entire web empire up! 🤦🤦🤦

[vladio71]

I found chome experemental flag " Auto Dark Mode for Web Contents" so it just go dark mode for any site, it works)
chrome://flags/ -> Auto Dark Mode for Web Contents -> Enable

[AyushmanOfficial]

https://github.com/orgs/community/discussions/128400#discussioncomment-7336483 that's already mentioned here...