Material Theme for Github

I wrote and maintain a dark theme for GitHub. It brings famous Material Theme to github.com.

Dark Mode

material-github (this link opens in a new window) by CharlieEtienne (this link opens in a new window)

A Material Dark Theme for GitHub

7 Subscribers 92 Watchers 12 Forks Check out this repository on GitHub.com (this link opens in a new window)

How it works

Material GitHub works with Stylus, a fork of Stylish.

Behind the scenes, it uses UserCSS, CSS vars, and HSL color system.

These three pieces of technology make available a lot of possibilities, and very powerful CSS declarations:

--color-autocomplete-shadow: hsla(/*[[theme]]*/, calc(13% * /*[[lightness]]*/), 0.15) 0px 3px 6px;

Here we have /*[[theme]]*/ which is a UserCSS variable containing a string like 200, 19% and is defined by the user settings. A popup let users define some settings.
This setting in particular is declared like this:

This declaration gives us a dropdown select:

We also have /*[[lightness]]*/ which is a UserCSS variable too and declared this way:

This declaration allows us to have a range cursor like that:

Fortunately, the hsl(a) color system gives the ability to play with hue and saturation while playing with luminosity with a default value which is consistent for every theme.

Read more about HSL

This magic even let us have a custom hue / custom saturation settings.

You can see the full code here.