feature request: Dark mode

[Altreus]

Many developers have their environments set to a dark background. Having metacpan be the only brilliant white window in one's entire desktop environment is ouchy.

An alternative CSS using a darker colour scheme (and the option to save the preference) would be supreme.

[clipland]

In case this materializes, please implement theme-ability in a way that doesn't require one to be logged in.

Also a "classic" theme would be nice (shameless plug: just released add-on).
Related issues: #1432, #278, #1360

[oalders]

I think this completely acceptable, but I don't see any of the core devs working on this since it's pretty low on our list of stuff that seems broken. I mean, I can't read their minds, but that's kind of my impression.

So, if someone else wants to do the heavy lifting, please do. Maybe hit us up with a plan before you sink a lot of time into it. https://github.com/metacpan/metacpan-docker

[clipland]

@Altreus If you're really impatient, you may use the same approach our yesterday-released Firefox Add-On uses, client-side overrides.

Just go there, fork and clone on github or just clone locally, and replace/copy into the core .js file what I've quickly hacked up for you during break:

var styles = "body, .autocomplete-suggestion { background-color: #727272 !important; color: #0a0a0a !important; }";
styles    += "a, a:hover, a:visited { color: #fa4; }";
styles    += ".navbar-default .navbar-nav > li > a { color: #da2037; }";
styles    += "li.active a { background-color:#727272 !important; border-top-color: #fa4 !important; box-shadow: inset -1px 0px 0 #000, inset 1px 0px 0 #000 !important; }";
styles    += "input { background: #b0b0b0 !important; background-image: linear-gradient(#999, #b0b0b0) !important; border-color: #393939 !important; color: #020202 !important; } ";
styles    += ".btn { background-image: linear-gradient(#a6a6a6, #8a8a8a) !important; border: 1px solid #393939; border-radius: 4px; color: #020202; text-shadow: none; }";
styles    += ".alert { background-color: #a6a6a6 !important; border-color: #b0b0b0 !important;  }";
styles    += ".navbar { background-color: #393939 !important; color: #fff !important; border-color: #000 !important; border-top-color: #000 !important; }";
styles    += ".content { border-left-color: #000 !important; }";
styles    += ".description { color: #161616 !important; }";
styles    += "pre { background-color: #b0b0b0 !important; }";

var styleSheet = document.createElement("style");
styleSheet.type = "text/css";
styleSheet.innerText = styles;
document.head.appendChild(styleSheet);

Then load it as temporary add-on or generate a self-signed .xpi and you'll have this here:
(Color-scheme is based on fabulous Blender.)

If you're not using FF, but another browser (oh no, ...), it should be easily adaptable.

These overrides are admittedly hackish/heavy-handed and you might see flashes of the old white layout.
The overall approach to override the original stylesheets isn't so smart in general! Yet still, a client-side setting via a browser-extension/web-storage/localstorage might be a good the best way to implement a theme-switcher for MetaCPAN without requiring a login/cookies and being light on resources.

[CaseOf]

@clipland Do you think it can be set with a simple css theme for Stylus?

To something like that:

@namespace url(http://www.w3.org/1999/xhtml);

@-moz-document domain("metacpan.org") {
  body, .autocomplete-suggestion {
    background-color: #727272 !important; color: #0a0a0a !important;
  }
  a, a:hover, a:visited {
    color: #fa4;
  }
  .navbar-default .navbar-nav > li > a {
    color: #da2037;
  }
  li.active a {
    background-color:#727272 !important; border-top-color: #fa4 !important; box-shadow: inset -1px 0px 0 #000, inset 1px 0px 0 #000 !important;
  }
  input {
    background: #b0b0b0 !important; background-image: linear-gradient(#999, #b0b0b0) !important; border-color: #393939 !important; color: #020202 !important;
  }
  .btn {
    background-image: linear-gradient(#a6a6a6, #8a8a8a) !important; border: 1px solid #393939; border-radius: 4px; color: #020202; text-shadow: none;
  }
  .alert {
    background-color: #a6a6a6 !important; border-color: #b0b0b0 !important;
  }
  .navbar {
    background-color: #393939 !important; color: #fff !important; border-color: #000 !important; border-top-color: #000 !important;
  }
  .content {
    border-left-color: #000 !important;
  }
  .description {
    color: #161616 !important;
  }
  pre {
    background-color: #b0b0b0 !important;
  }
}

[clipland]

Stylus, the FF Add-On?
Well, I guess that's essentially the same. ;) Both solutions inject override CSS rules.

[ThisUsedToBeAnEmail]

volunteering and I've made a start over the past couple of days.

[clipland]

Congrats! Nice color scheme. Even nicer: it seems configurable. Am I right in assuming (from first screencap) you came up with some sort of client-side config, relying on web-storage/localstorage/(browser-extension) - not requiring a login? Would be great.

[ThisUsedToBeAnEmail]

Yes, the plan is to make everything configurable, I also want to add functionality to change font size and family.

Currently I am using local storage to cache the account profile so that I don't need to make an API request per page refresh.

As I mentioned I am using an api and storing this against the author document. The reason I'm doing this is because I would like persistency between my devices, however I'll welcome more opinions on this.

[haarg]

I really don't think we should have this be configurable on a per color basis. If someone wants to tweak individual colors, they can already do that with user stylesheets.

Having a dark mode seems reasonable.

[ThisUsedToBeAnEmail]

I'm not finished going through every page yet but currently you can configure the following colours:

I'm open to removing this and only having the dark mode switch, I would like some more opinions though.

Here are some more screenshots:

[oalders]

That looks really good!

[konstantinos-giannakakis]

Hello! Any progress with this feature? Still could be pretty useful.

[oalders]

Thanks for the nudge. I've asked internally about what we need to do to get this merged.

[ThisUsedToBeAnEmail]

If you want something you can use now I wrote an extension:

https://chrome.google.com/webstore/detail/metacpantheme/dmdmhdilgmmdnklgdnokgfcfnbegfkil?hl=en
https://addons.mozilla.org/en-US/firefox/addon/meta-cpan-theme/

[clipland]

Note to anyone following/reading this: please make it standards conformant and not reliant on logins/auth of some sort.

• Work with alternative style sheets. See this Moz Dev post for details. Such alternate styles are then available in FF i.e. via "View > Page Style". Also, these style sheets can be triggered/selected by JS etc.

• Take a look into the CSS prefers-color-scheme @media feature. It allows a user to set a preference in browser so appropriate CSS styles get activated accordingly. To test this in FF, i.e., see this post.

[Altreus]

+1 for the prefers-color-scheme feature. I think browsers can read the system preferences on OSes that support it, and feed that through, so if you've got your OS set to dark mode the browser will ask the site to prefer dark mode.

[akarelas]

One of the few big sites that still don't support dark mode. And it's so easy to implement (if you already know the colors to use).

[oalders]

I would love to see dark mode as well, but someone needs to step up and volunteer the time.

[Grinnz]

I can recommend this snippet from the bootstrap docs as a nice way to auto detect as well as save the color preference in local storage. Styling of course would all have to be figured out specific to MetaCPAN. https://getbootstrap.com/docs/5.3/customize/color-modes/#javascript

[akarelas]

Even a simple "follow system's color mode" would be great - can be done with plain CSS. See https://karelcom.net

[oalders]

If there's a PR, we are happy to review it.

[akarelas]

I really think this should be set as first-priority. I think it's one of those things that separates neanderthal websites from active ones (according to the average modern web-user). I mean, people will see it.