Add custom -bd-accent-color css value

[TheCommieAxolotl]

Closes #970.

Adds a special --os-accent-color variable that themes/customcss can use.

e.g.

:root {
	--theme-accent: var(--os-accent-color);
}

[TheCommieAxolotl]

Video Preview:

accent.mov

[rauenzi]

I understand why you prefixed it with -bd but I think the name is a bit misleading. Maybe something like --os-accent-color. I also think it would be better to just add a snippet like this

:root {
   --os-accent-color: <result of ipc>;
}

rather than trying to manually process and replace every css added through the DOM manager as that adds additional overhead (and makes it unexpectedly asynchronous) and does not catch all cases.

[TheCommieAxolotl]

I've updated it to do that, the only issue is that there might be a noticeable delay before the colour "loads" as it's executing after the rest of the startup process however that would only be a problem if a theme used this value extensively.

[rauenzi]

Yeah that's a fair point, and I don't have a problem with it being moved to before themes in the core order and done via then so we don't necessarily have to wait.

IPC.getSystemAccentColor().then(value => DOMManager.injectStyle("bd-os-values", `:root {--os-accent-color: ${value}));

Or is there something else that prevents us from doing it that early?

I also thought about whether this should be a user setting, but I think making it a setting would end up with too much inconsistency.

My only other thought is, what do you think about returning "" as default value instead of #000000 so themes can make use of variable fallback (var(--os-accent-color, #f0f0ff))? Or maybe #000000 is an electron defined default thing.

[TheCommieAxolotl]

I also thought about whether this should be a user setting, but I think making it a setting would end up with too much inconsistency.

That could be done, but yes I do agree it would add a level of complexity.

[rauenzi]

Yeah if you think it's not worth it then let's not bother. It LGTM otherwise.

[rauenzi]

Actually I think there's a typo in the css being injected, is there no closing bracket for the :root? I probably did that above too 😅