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!