Account-specific primary/secondary colors, adaptable in backend

[nhoening]

Recently, the CSS started using variables for colors. Mainly, we use a primary and a secondary color. The idea of this ticket is that it is possible to edit an account's primary and secondary colors.

• We need to update the account data model.
• Maybe also adapt the CLI (add account)
• This is the first reason to have an account editing feature in the UI. Usable by admins and (eventually, see #203) accounts who can govern accounts. Thus, we might want a new API endpoint PATCH account/<id>.
• If these settings on the current logged-in user's account are not null, FlexMeasures needs to adapt the CSS of its UI accordingly. I don't know exactly what the most elegant way is for this. Maybe dynamically write a colors.css which is then included in the (static) main.css?
• The CSS uses variations of these colours, so I'm unsure how to solve that right now. Either all of these are represented in the UI (and account data model), which seems excessive, or they are slightly varied (if set to something else than null in an account) from the primary or secondary colors by code properties on the Account class or something similar.

[Flix6x]

Automatically computed color variations can be done in css, too. I reckon it's possible to adapt the example below to make a slightly lighter and slightly darker version of the account's primary and secondary colors.

From SO:

:root {
  --r : 0;
  --g : 0;
  --b : 0;
}
#div {
  /* value should be aqua:  0, 255, 255 */
  background: rgb(calc(var(--r) * 255), calc(var(--g) + 1 * 255), calc(var(--b) + 255));
}

And for extracting the RGB colors from a hex color and putting all of the arithmetic into a single function, see this SO thread.