Use github's color variables to support dark mode

[voliva]

Original issue => #137

Here's my approach to integrate with github's dark mode - I'm using github's CSS custom properties so that it grabs the same colour as github's theme.

There are a few colours I didn't really know which one to pick... For those ones it currently does the job, but we have no guarantee it will look alright if github decides to change it.

Which also makes me think that if github removes some of these variables, this extension will need to be updated again - I'm absolutely open to suggestions or better implementations.

Normal

Search

^^^^ This search one is an example where it could get better. Maybe we need to also have our own "fallback" palette that it depends on html[data-color-mode] attribute?

[voliva]

Specifically these are the ones I'm not sure I'm targetting the right custom property

[berzniz]

Thanks @voliva, I think this is the correct approach. I'll review and add it for the next release

[berzniz]

Hi @voliva, are you aware of any way to provide fallback values to CSS variables? That way we can keep the original colors as fallback, in case GitHub removes these variables, and will not make the extension completely unusable

[voliva]

Hey @berzniz - Yes there is, it's the second parameter when using var (e.g. var(--color-text-primary, #fff))

Question I have though is should we keep the dark mode in settings? Another possibility would be to try and detect whether github is running in dark mode directly.

[berzniz]

Hi @voliva - so let's add the fallback colors. I prefer to completely remove the dark mode settings and base it on the GitHub appearance preference (the solution you showed).

[voliva]

Updated with fallbacks.

A caveat is that with appearance=auto it will fallback to light mode - Solution is to use a media query @media (prefers-color-scheme: dark), but I would have to copy-paste all the fallback dark colors inside the media query :| - IMO it doesn't matter that much as they are just in case github changes their variable names.

[berzniz]

Great, thank you @voliva, I am merging and this will be out in the next version (I'll submit it today)