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

[TheTechChild]

Please please please add this NPM!!! This is getting ridiculous, it is now 2024 and still no dark mode!

[davidkhierl]

Oh boy, If the maintainer is not interested or don't have time to add this Accessibility feature, then please allow the community to do it, I would be happy to help

[calumjames]

The people who have made the decision not to care about the health of developers should be ashamed of themselves. Just roll npmjs.com into github.com if you feel it's that difficult to support dark mode (or if your codebase is that bad).

[calumjames]

Also, not everyone works at a company that allows browser extensions, for us to use the Dark Mode extension.

[hockdudu]

The amount of entitlement and disdain I read in the comments here is plain disrespectful.

[RjManhas]

we should start a new pcakage site with dark mode, revolution

[jdtechsol]

It has been 940 days, 20 hours, and 17 minutes since they told us Dark Mode was not Priority.
Why is this so hard to accomplish.

[onetdev]

At least the ticket ID is funny, it's probably the solely reason why they kept it unresolved.

[evenfrost]

[AtomSpy]

It's 2 am and I flash-banged myself by going to the npm website. There's no chance of going to sleep within the next hour now.

[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: ***@***.***>