Sets contribution calendar color to white for contrast

[johnmaguire]

This might be a bit controversial, and maybe there's a better way to go about it.

I use the Solarized theme with Github Dark, and my contribution calendar is very blue. The problem is, it's very hard to tell the lowest tier apart from black, and even harder to sort of "guage" the filled-in-ness of a contribution calendar with the theme (compared to the green on black), especially on certain monitors or brightness settings.

The white on black seems to work pretty well, and I think it looks nice too. If there's a better way I could implement this change, please let me know.

Old:

New:

[silverwind]

I think we want to keep the color of the squares, but we can try improving the contrast of the contribution levels, maybe be making the "no contribution" square darker.

If you prefer monochrome colors, you could always define a second userstyle that overrides the colors:

@-moz-document domain("github.com") {
  body #contributions-calendar rect[fill="#d6e685"],
  body #contributions-calendar rect[fill="#8cc665"],
  body #contributions-calendar rect[fill="#44a340"],
  body #contributions-calendar rect[fill="#1e6823"] {
    background-color: #fff !important;
    fill: #fff !important;
  }
}

[johnmaguire]

👍 What determines the order of user style execution? I'll give that a shot.

I would prefer to have the blue work, but I couldn't come up with a good way -- I believe the issue is actually that Github is using transparency values to overlay the color onto the contribution graph. Meaning, if you make the "no contribution" square darker, you'll also make the blue darker. Try it with green and you'll see a muddy green effect on the lower side of contributions.

I think to adjust the contrast without using a brighter color, you'd either need to lighten the "no contribution" square, or disable setting the colors by transparency entirely.

[silverwind]

What determines the order of user style execution

Not sure exactly, but the body addition above should let your selector win.

[Mottie]

Actually, we're the ones adding an opacity to the colors (ref). It was the easiest method to use the base color and make darker shades.

The "no contributions" style is set as follows:

  #contributions-calendar rect[fill="#eeeeee"],
  .contrib-legend li[style*="#eee"] {
    background-color: #282828 !important;
    fill: #282828 !important;
  }

which we could make darker... or, maybe we could use a filter brightness instead of opacity.

[Mottie]

And @silverwind, do you want to leave in the halloween color styling?

[Mottie]

Hmm, ok filter: brightness(1.2) won't work on svg fills.

[silverwind]

@Mottie yeah let's keep halloween! 🎃

I pushed a change to go from #282828 and .8,.6,.4,.2 to #222 and 1,.75,.5,.25 which should help contrast.

[Mottie]

Yeah, that looks like it's easier to read... depending on the brightness of the base color.

[silverwind]

@Mottie Brightness not working on SVG looks like a Chome bug to me, working fine in Firefox :)

https://jsfiddle.net/r85tfgw2/2/

Edit: Safari also chokes on it, and refuses to render the rect, apparently.

[johnmaguire]

Thank you @silverwind and @Mottie! I tested the commit in Firefox 43 on Linux and it looks much better (using the default base color).