[feature] add variables to theme css

[clragon]

Adding all variables in their default values to the theme css would allow modifying them with plugins like ThemeSettings and generally would allow easily changing the theme in an editor.

I propose adding something like this:

:root {
    /* App elements */
     --app-bg: url(https://i.imgur.com/U8bSjj5.jpg); /* The background image for the entire Discord app. Default: url(https://i.imgur.com/U8bSjj5.jpg) */
     --app-blur: 6px; /* The strength of the blur for every element that has one. Default: 6px */
     --app-margin: 24px; /* The margin surrounding the content area. Default: 24px */
     --app-radius: 8px; /* The border radius of the app and every element that has a border radius. Default: 8px */
     --app-accent: #d73d3d; /* The app accent color. Default: #d73d3d */
     --app-accent-rgb: 215,61,61; /* The rgb values of the app accent color. Default: 215,61,61 */
     --app-accent-text: #000; /* The text color for buttons and other various elements with the accent background color. Default: #000 */
     --sidebar-color: rgba(0,0,0, 0.4); /* The background color of the sidebars. Default: rgba(0,0,0, 0.4) */
     --main-content-color: rgba(0,0,0, 0.2); /* The background color of the main content areas. Default: rgba(0,0,0, 0.2) */
    /* Messages */
     --messages-color: rgba(0,0,0, 0.4); /* The background color for messages. Default: rgba(0,0,0, 0.4) */
     --messages-radius: 8px; /* The border radius for messages. Default: 8px */
     --mention-color: #d73d3d; /* The border and glow color for mentioned messages. Default: #d73d3d */
     --mention-rgb: 215,61,61; /* The rgb values of the mention color. Default: 215,61,61 */
     --mention-alt: #5274e9; /* The border and glow color for highlighted messages that aren't mentions. Default: #5274e9 */
    /* Textareas and inputs */
     --textarea-color: 0,0,0; /* The background color for any textareas and inputs. Default: 0,0,0 */
     --textarea-text-color: #fff; /* The text color for textareas and inputs. Default: #fff */
     --textarea-radius: 22px; /* The border radius for textareas (not inputs). Default: 22px */
     --input-height: 36px; /* The height for inputs. Default: 36px */
     --input-radius: 18px; /* The border radius for inputs (not textareas). Default: 18px */
    /* Cards */
     --card-color: rgba(0,0,0, 0.4); /* The background color for cards. Default: rgba(0,0,0, 0.4) */
     --card-color-hover: rgba(0,0,0, 0.5); /* The background color for hovering over cards (if there is a hover animation). Default: rgba(0,0,0, 0.5) */
     --card-radius: 8px; /* The border radius for cards. Default: 8px */
    /* Buttons */ 
     --button-color: #d73d3d; /* The background color for most buttons. Default: #d73d3d */
     --button-action-color: #000; /* The background color for hovering and clicking on buttons (has a lowered opacity). Default: #000 */
     --button-text-color:#000; /* The text color for any buttons that use:; /*-button-color. Default: #000 */
     --button-radius: 8px; /* The border radius for buttons. Default: 8px */
    /* Popouts and modals */
     --popout-color: rgba(0,0,0, 0.55); /* The background color for modals/popouts. Default: rgba(0,0,0, 0.55) */
     --popout-blur: 5px; /* The blur strength for modals/popouts. Default: 5px */
     --popout-header-opacity: 0.3; /* The header opacity for modals/popouts. Default: 0.3 */
     --popout-header-shadow: 0px 3px 9px 0px rgba(0,0,0, 0.25); /* The shadow for headers in modals/popouts. Default: 0px 3px 9px 0px rgba(0,0,0, 0.25) */
     --popout-radius: 8px; /* The border radius for modals/popouts. Default: 8px */
     --popout-shadow: 0 8px 10px 1px rgba(0,0,0, 0.14); /* The shadow for modals/popouts. Default: 0 8px 10px 1px rgba(0,0,0, 0.14) */
}

of course, this might introduce a problem with auto-updating...

[CapnKitten]

Added the variables that are easily edited to the theme file. It shouldn't cause any issues with auto updating since I only touch the source import file, and not the theme file itself.