Material Theme for Github
I wrote and maintain a dark theme for GitHub. It brings famous Material Theme to github.com.
material-github (this link opens in a new window) by CharlieEtienne (this link opens in a new window)
A Material Dark Theme for GitHub
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.
This magic even let us have a custom hue / custom saturation settings.
You can see the full code here.