System color Theme

[Kilian]

CSS has the option to pick system default colors and fonts, detailed here: https://www.sitepoint.com/css-system-styles/ implementing the use of these colors and fonts will get you additional integration for relatively little effort!

[jarek-foksa]

According to the CSS Color Module Level 4 spec the system color keywords should have hard-coded values which does not make them that useful. Are you able to distinguish between the Blue and Graphite macOS appearances using them?

The macOS theme is already using BlinkMacSystemFont keyword to apply the system font.

[Kilian]

I think Chrome indeed already uses hardcoded values (firefox follows my system colors) so it might be less useful in that regard. But: worst case is you have a nice abstraction on which to base your color names, and the defaults will be colors that work well together (undefined environments/styles would get that, and if you specifically go for "the macOS" style, you could overlay the current macOS styling)

They have been deprecated in CSS module 4, but the CSS3 replacement "Appearance", whilst not fully supported, could also help for example to style buttons on macOS.

[jarek-foksa]

In my opinion each theme should define its own set of configurable color variables with names and default values that follow corresponding HIG (like "primary", "secondary" and "accent" in Material Design).

Then Electron users could override those variables with values retrieved from the system using systemPreferences.getColor(color) and systemPreferences.getAccentColor() APIs:

document.body.style.setProperty("--accent-color", systemPreferences.getAccentColor());

Currently those APIs work only on Windows, but I don't see any reason why they couldn't be extended to macOS and Linux in future.

[Kilian]

I get wanting to follow the HIGs in naming, and using the Electron apis like that sounds like a good idea as well! :)

[jarek-foksa]

Done in Xel 0.9.