[feat] Theme authoring : brackets core UI variables as CSS variables that can be overridden in theme CSS.

[abose]

Describe the problem

Currently, there is no eazy way for extensions to modify theme CSS variables to be changed via CSS. The extension authors have to go to every single place the color is used and replace it individually. That is out right impossible.

to address this, we should consider changing less variables as css variables that can be overridden by cascading theme css.

Describe the solution you'd like

• Covert core less variables as native css variables that can be overridden by extensions
• Expose them in the themes template

Alternatives considered

No response

Additional context

#971

This can be easily done with:

• declare an extensible-css.less file and import from brackets less files.
• Now refactor all extension modifiable less variables as a root variable

:root {
 --ui-color: red;
}

• now in extensions, we can simply have a line on top --ui-color: red; under no braces and it will override the UI variables.
• Update the template theme extension with the values
• Refactor all svg buttons which sets background image with image-mask and background-color css instead of hardcoded color in svg
• Decide how to apply the color scheme in the welcome screen dialogue/extensions panel/ general iframe based dialogue