[theme]: made the output stylable.

Signed-off-by: Akos Kitta <kittaakos@typefox.io>

Author: Akos Kitta

arduino-ide-extension/src/browser/arduino-frontend-contribution.tsx

@@ -312,6 +312,24 @@ export class ArduinoFrontendContribution implements FrontendApplicationContribut
                     hc: 'activityBar.inactiveForeground'
                 },
                 description: 'Background color of the toolbar items when hovering over them. Such as Upload, Verify, etc.'
+            },
+            {
+                id: 'arduino.output.foreground',
+                defaults: {
+                    dark: 'editor.foreground',
+                    light: 'editor.foreground',
+                    hc: 'editor.foreground'
+                },
+                description: 'Color of the text in the Output view.'
+            },
+            {
+                id: 'arduino.output.background',
+                defaults: {
+                    dark: 'editor.background',
+                    light: 'editor.background',
+                    hc: 'editor.background'
+                },
+                description: 'Background color of the Output view.'
             }
         );
     }

arduino-ide-extension/src/browser/data/arduino.color-theme.json

@@ -108,7 +108,9 @@
     "secondaryButton.hoverBackground": "#dae3e3",
     "arduino.branding.primary": "#00979d",
     "arduino.branding.secondary": "#b5c8c9",
-    "arduino.foreground": "#edf1f1"
+    "arduino.foreground": "#edf1f1",
+    "arduino.output.foreground": "#FFFFFF",
+    "arduino.output.background": "#000000"
   },
   "type": "light",
   "name": "Arduino"

arduino-ide-extension/src/browser/style/main.css

@@ -132,13 +132,17 @@
     box-sizing: border-box;
 }
 
-/* To left shift the content in the Output view */
-/* .theia-output {
-    margin-left: -20px;
-} */
+.theia-output .editor-container {
+    background-color: var(--theia-arduino-output-background);
+}
+
+.theia-output .monaco-editor .lines-content.monaco-editor-background {
+    background-color: var(--theia-arduino-output-background);
+}
 
 .theia-output .monaco-editor .margin {
     border-right: none;
+    background-color: var(--theia-arduino-output-background);
 }
 
 .noWrapInfo {