Lbry-desktop: Use css vars for theming

[btzr-io]

The Issue

To make a theme I need to compile all scss into > all.css every time a change it's made.
Also I can't edit vars from developer-tools ( because its get compiled to css values ), so
this make a tedious process for testing / creating new themes.

Steps to reproduce

1. Copy all scss styles.
2. Modify vars.
3. Build / compile scss > all.css

Expected behaviour

Enable editing themes (vars) inside developer-tools

Actual behaviour

To make a theme I need to compile all scss into > all.css every time a change it's made.
Also I can't edit vars from developer-tools ( because its get compiled to css values ), so
this make a tedious process for testing / creating new themes.

System Configuration

Configuration | Version
-- | --
App | 0.14.3
Daemon (lbrynet) | 0.14.2
Wallet (lbryum) | 3.1.4
Platform | Linux (Linux-4.10.0-28-generic-x86_64-with-elementary-0.4.1-loki)

[btzr-io]

CSS Variables are entities defined by CSS authors which contain specific values to be reused throughout a document. They are set using custom property notation (e.g. --main-color: black;) and are accessed using the var() function (e.g. color: var(--main-color);) .

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

[MSFTserver]

Example Adding vars to CSS:

:root {
  --red: #b00;
  --blue: #4679bd;
  --grey: #ddd;
}
body {
  color: var(--red);
  background: var(--grey);
}

[btzr-io]

We can override the current scss vars like this:

   $color-main: var(--color-main);
   $color-bg: var(--color-bg);

[MSFTserver]

whipped one for an example and tester for people to use
https://spee.ch/9/Custum-Create-Your-Own.png

[kauffj]

Merged in branch v16, to be next release.