Should we use accent colours in the UI?

[jandubois]

All our platforms support the concept of accent colours to emphasize parts of the UI. This is even supported by browsers, but most web pages don't bother supporting it.

Github itself uses it sparingly, just for checked radio buttons and checkboxes:

It should normally also be used for the current selection in a list, or the default button in a dialog etc.

Can we support this with reasonable effort?

With macOS Big Sur and later apps can even supply their own preferred accent colour, which is used when the system setting is set to "multicolour". So we could pick a shade of blue that exactly matches the blue in our icon.

[rak-phillip]

Rancher Manager already support customizing colors through "branding". I think it will be realistic to implement what's been done over in Rancher Desktop

[jandubois]

So we could offer the user 3 choices (when we have an "App | Appearence" preferences page):

• App default (the colour of our icon)
• System accent colour
• Custom choice

Once you notice it, it is pretty glaring that the checkbox colour doesn't match the icon colour, accent colour, or the hyperlink colour (which are all the same shade of blue):

[jandubois]

Cool, so we could just call systemPreferences.getAccentColor() and use that.

Unfortunately this doesn't seem to be supported on Linux; it probably is specific to the window manager.

I did a quick search for defining an app-specific accent colour (on macOS), but it seems to require defining a colour scheme in your asset catalog that XCode will then somehow apply. So not sure if this will be an option that can be applied after the fact to an Electron build.

[jandubois]

Hmm, CSS has an accent-color: auto setting that may be even easier: accent-color

Of course for custom controls, like our switch, we would probably still have to implement it ourselves.

[rak-phillip]

This might not be as all-encompassing as we desire

Browsers that support accent-color currently apply it to the following HTML elements:

• <input type="checkbox">
• <input type="radio">
• <input type="range">
• <progress>

https://developer.mozilla.org/en-US/docs/Web/CSS/accent-color

[kwwii]

Yeah, it would be cool if we had a switcher to change between light, dark and in addition the accent color similar to OSX