Material Theme for Github

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

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.

Notifier de
0 Commentaires
Inline Feedbacks
View all comments
Défilement vers le haut