How it works
Material GitHub works with Stylus, a fork of Stylish.
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.