UI: Theme extensions

[dennisreimann]

Adds the ability to choose the themeing strategy: Extend one of the existing themes (light or dark) or go fully custom. The latter was the only option up to now, which isn't ideal:

• One had to provide a full-blown theme file overriding all variables
• Tedious, error prone and hard to maintain, because one has to keep track of updates

This PR makes it so that one can choose light or dark as base theme and do modifications on top.

Benefit: You can specify a limited set of variables and might get away with 5-20 lines of CSS.

Example: This is what the CSS theme for Einundzwanzig could look like:

:root {
  --btcpay-primary-100: #fef3e6;
  --btcpay-primary-200: #fcdcb5;
  --btcpay-primary-300: #fbc584;
  --btcpay-primary-400: #f9ae53;
  --btcpay-primary-500: #f79621;
  --btcpay-primary-600: #de7d08;
  --btcpay-primary-700: #ac6106;
  --btcpay-primary-800: #7b4504;
  --btcpay-primary-900: #4a2a03;

  --btcpay-primary-rgb: 247,150,33;
  --btcpay-primary: rgb(var(--btcpay-primary-rgb));
  --btcpay-primary-accent: var(--btcpay-primary-600);
  --btcpay-primary-shadow: rgba(var(--btcpay-primary-rgb), .5);
}

This is the implementation for themeing on the server/instance level — a similar and maybe even more reduced approach could be used for the stores as well. I'll tackle that once we get to unify the public store-related pages with the new checkout design.

In Action

Backwards-compatibility

The default option is "fully custom", which makes it work with the CustomThemeCssUri which might be specified already. If that property is set, we also don't show the CSS file upload, because those would conflict.

The idea here is that we can deprecate the old way of themeing by presenting the new one in case the old approach isn't used (anymore).

[dstrukt]

Still testing and exploring...

In order to upload a theme file, a [file storage] must be configured. to confirm, this will disappear when #4386 is merged, yeah?

Chose the fully custom (which is the default .. wondering if it should default to the extension of the current selected theme, if this is possible, as if you go full custom, but don't upload anything you're met with this .. which isn't ideal, but I'm thinking we should probably handle this case a little better, but not 100% certain what the best route would be...

[dennisreimann]

@dstrukt good point, updated it to ensure a custom theme is present, otherwise it'll fall back to the server theme.

to confirm, this will disappear when #4386 is merged, yeah?

Exactly!