From f46f580b1738e395e693d017a73901b82e4bc743 Mon Sep 17 00:00:00 2001
From: Christian Weichel <christian.weichel@typefox.io>
Date: Wed, 8 May 2019 21:44:16 +0200
Subject: [PATCH] Added Arduino-ish colour theme

---
 arduino-ide-browser/package.json              |   2 +-
 arduino-ide-electron/package.json             |   2 +-
 .../data/ino.tmLanguage.json                  |   4 +
 .../src/browser/arduino-frontend-module.ts    |   5 +
 .../src/browser/arduino-theme.ts              |  27 +
 .../src/browser/data/arduino.color-theme.json | 495 ++++++++++++++++++
 .../src/browser/style/arduino.useable.css     | 197 +++++++
 .../src/browser/style/list-widget.css         |   1 +
 8 files changed, 731 insertions(+), 2 deletions(-)
 create mode 100644 arduino-ide-extension/src/browser/arduino-theme.ts
 create mode 100644 arduino-ide-extension/src/browser/data/arduino.color-theme.json
 create mode 100644 arduino-ide-extension/src/browser/style/arduino.useable.css

diff --git a/arduino-ide-browser/package.json b/arduino-ide-browser/package.json
index 22fa6b42..62f63b16 100644
--- a/arduino-ide-browser/package.json
+++ b/arduino-ide-browser/package.json
@@ -31,7 +31,7 @@
         "frontend": {
             "config": {
                 "applicationName": "Arduino-PoC",
-                "defaultTheme": "light"
+                "defaultTheme": "arduino"
             }
         }
     }
diff --git a/arduino-ide-electron/package.json b/arduino-ide-electron/package.json
index f8af8467..8dae9587 100644
--- a/arduino-ide-electron/package.json
+++ b/arduino-ide-electron/package.json
@@ -33,7 +33,7 @@
         "frontend": {
             "config": {
                 "applicationName": "Arduino-PoC",
-                "defaultTheme": "light"
+                "defaultTheme": "arduino"
             }
         }
     }
diff --git a/arduino-ide-extension/data/ino.tmLanguage.json b/arduino-ide-extension/data/ino.tmLanguage.json
index 4913602e..fee483b0 100644
--- a/arduino-ide-extension/data/ino.tmLanguage.json
+++ b/arduino-ide-extension/data/ino.tmLanguage.json
@@ -24,6 +24,10 @@
 			"match": "\\b(break|case|continue|default|do|else|for|goto|if|_Pragma|return|switch|while)\\b",
 			"name": "keyword.control.c"
 		},
+		{
+			"match": "\\b(loop|setup)\\b",
+			"name": "support.function"
+		},
 		{
 			"include": "#storage_types"
 		},
diff --git a/arduino-ide-extension/src/browser/arduino-frontend-module.ts b/arduino-ide-extension/src/browser/arduino-frontend-module.ts
index 4e9811bc..e063d3ff 100644
--- a/arduino-ide-extension/src/browser/arduino-frontend-module.ts
+++ b/arduino-ide-extension/src/browser/arduino-frontend-module.ts
@@ -24,6 +24,8 @@ import { ToolOutputServiceClientImpl } from './tool-output/client-service-impl';
 import { BoardsNotificationService } from './boards-notification-service';
 import { WorkspaceService } from '@theia/workspace/lib/browser/workspace-service';
 import { AWorkspaceService } from './arduino-workspace-service';
+import { ThemeService } from '@theia/core/lib/browser/theming';
+import { ArduinoTheme } from './arduino-theme';
 
 export default new ContainerModule((bind: interfaces.Bind, unbind: interfaces.Unbind, isBound: interfaces.IsBound, rebind: interfaces.Rebind) => {
     // Commands and toolbar items
@@ -86,4 +88,7 @@ export default new ContainerModule((bind: interfaces.Bind, unbind: interfaces.Un
     });
 
     rebind(WorkspaceService).to(AWorkspaceService).inSingletonScope();
+    
+    const themeService = ThemeService.get();
+    themeService.register(...ArduinoTheme.themes);
 });
diff --git a/arduino-ide-extension/src/browser/arduino-theme.ts b/arduino-ide-extension/src/browser/arduino-theme.ts
new file mode 100644
index 00000000..98eedafa
--- /dev/null
+++ b/arduino-ide-extension/src/browser/arduino-theme.ts
@@ -0,0 +1,27 @@
+
+import { Theme } from '@theia/core/lib/browser/theming';
+import { MonacoThemeRegistry } from '@theia/monaco/lib/browser/textmate/monaco-theme-registry';
+
+const ARDUINO_CSS = require('../../src/browser/style/arduino.useable.css');
+const ARDUINO_JSON = MonacoThemeRegistry.SINGLETON.register(
+    require('../../src/browser/data/arduino.color-theme.json'), {}, 'arduino', 'vs').name!;
+
+export class ArduinoTheme {
+
+    static readonly arduino: Theme = {
+        id: 'arduino-theme',
+        label: 'Arduino Light Theme',
+        description: 'Arduino Light Theme',
+        editorTheme: ARDUINO_JSON,
+        activate() {
+            ARDUINO_CSS.use();
+        },
+        deactivate() {
+            ARDUINO_CSS.unuse();
+        }
+    }
+
+    static readonly themes: Theme[] = [
+        ArduinoTheme.arduino
+    ]
+}
\ No newline at end of file
diff --git a/arduino-ide-extension/src/browser/data/arduino.color-theme.json b/arduino-ide-extension/src/browser/data/arduino.color-theme.json
new file mode 100644
index 00000000..6a10fedf
--- /dev/null
+++ b/arduino-ide-extension/src/browser/data/arduino.color-theme.json
@@ -0,0 +1,495 @@
+{
+	"tokenColors": [
+		{
+			"settings": {
+				"background": "#FFFFFF",
+				"foreground": "#000000"
+			}
+		},
+		{
+			"name": "Source",
+			"scope": "source",
+			"settings": {
+				"background": "#FFFFFF",
+				"fontStyle": ""
+			}
+		},
+		{
+			"name": "Comment",
+			"scope": "comment",
+			"settings": {
+				"fontStyle": "italic",
+				"foreground": "#91a6a6"
+			}
+		},
+		{
+			"name": "Docblock",
+			"scope": "comment.block",
+			"settings": {
+				"fontStyle": "",
+				"foreground": "#91a6a6"
+			}
+		},
+		{
+			"name": "Docblock tag",
+			"scope": "keyword.other.phpdoc",
+			"settings": {
+				"fontStyle": "",
+				"foreground": "#91a6a6"
+			}
+		},
+		{
+			"name": "Core function",
+			"scope": "support.function",
+			"settings": {
+				"fontStyle": "",
+				"foreground": "#6f8100"
+			}
+		},
+		{
+			"name": "Keyword",
+			"scope": [
+				"keyword",
+				"storage"
+			],
+			"settings": {
+				"fontStyle": "bold",
+				"foreground": "#000000"
+			}
+		},
+		{
+			"name": "Keyword operator",
+			"scope": "keyword.operator.assignment",
+			"settings": {
+				"fontStyle": "",
+				"foreground": "#000000"
+			}
+		},
+		{
+			"name": "keyword like new",
+			"scope": "keyword.other.special-method",
+			"settings": {
+				"fontStyle": ""
+			}
+		},
+		{
+			"name": "Function (definition)",
+			"scope": [
+				"entity.name.function",
+				"keyword.other.name-of-parameter.objc",
+				"support.type.exception.python"
+			],
+			"settings": {
+				"fontStyle": "bold",
+				"foreground": "#000000"
+			}
+		},
+		{
+			"name": "Class (definition)",
+			"scope": "entity.name",
+			"settings": {
+				"fontStyle": "bold",
+				"foreground": "#445588"
+			}
+		},
+		{
+			"name": "Number",
+			"scope": "constant.numeric",
+			"settings": {
+				"fontStyle": "",
+				"foreground": "#00b0b3"
+			}
+		},
+		{
+			"name": "Variable",
+			"scope": [
+				"variable.language",
+				"variable.other"
+			],
+			"settings": {
+				"fontStyle": "",
+				"foreground": "#00b0b3"
+			}
+		},
+		{
+			"name": "Built-in constant",
+			"scope": "constant.language",
+			"settings": {
+				"fontStyle": "bold",
+				"foreground": "#000000"
+			}
+		},
+		{
+			"name": "Variable",
+			"scope": "variable.other.constant.ruby",
+			"settings": {
+				"foreground": "#0F8787"
+			}
+		},
+		{
+			"name": "Built-in constant",
+			"scope": [
+				"constant.language",
+				"support.function.construct"
+			],
+			"settings": {
+				"fontStyle": "bold",
+				"foreground": "#000000"
+			}
+		},
+		{
+			"name": "String",
+			"scope": "string",
+			"settings": {
+				"background": "#EB104512",
+				"foreground": "#006062"
+			}
+		},
+		{
+			"name": "Inherited class",
+			"scope": "entity.other.inherited-class",
+			"settings": {
+				"fontStyle": "",
+				"foreground": "#0F8787"
+			}
+		},
+		{
+			"name": "Inherited class seperator",
+			"scope": "punctuation.separator.inheritance",
+			"settings": {
+				"fontStyle": "bold",
+				"foreground": "#000000"
+			}
+		},
+		{
+			"name": "punctuation block",
+			"scope": "punctuation.separator.variable",
+			"settings": {
+				"fontStyle": "bold",
+				"foreground": "#000000"
+			}
+		},
+		{
+			"name": "array brackets",
+			"scope": "punctuation.section.array",
+			"settings": {
+				"fontStyle": "bold",
+				"foreground": "#000000"
+			}
+		},
+		{
+			"name": "hash separator",
+			"scope": "punctuation.separator.key-value",
+			"settings": {
+				"fontStyle": "bold",
+				"foreground": "#000000"
+			}
+		},
+		{
+			"name": "() brackets",
+			"scope": "punctuation.section.function",
+			"settings": {
+				"fontStyle": "",
+				"foreground": "#000000"
+			}
+		},
+		{
+			"name": "Method call",
+			"scope": "meta.function-call",
+			"settings": {
+				"fontStyle": "",
+				"foreground": "#108888"
+			}
+		},
+		{
+			"name": "Method call",
+			"scope": "meta.function-call.python",
+			"settings": {
+				"fontStyle": "",
+				"foreground": "#000000"
+			}
+		},
+		{
+			"name": "hash brackets",
+			"scope": "punctuation.section.scope",
+			"settings": {
+				"fontStyle": "",
+				"foreground": "#000000"
+			}
+		},
+		{
+			"name": "Special ruby method",
+			"scope": "keyword.other.special-method.ruby",
+			"settings": {
+				"fontStyle": "bold"
+			}
+		},
+		{
+			"name": "symbol",
+			"scope": "constant.other.symbol",
+			"settings": {
+				"fontStyle": "",
+				"foreground": "#000000"
+			}
+		},
+		{
+			"name": "Support class",
+			"scope": "support.class.ruby",
+			"settings": {
+				"fontStyle": "",
+				"foreground": "#008080"
+			}
+		},
+		{
+			"name": "String.regexp",
+			"scope": "string.regexp",
+			"settings": {
+				"foreground": "#009926"
+			}
+		},
+		{
+			"name": "String embedded source",
+			"scope": "string.quoted source",
+			"settings": {
+				"foreground": "#000000"
+			}
+		},
+		{
+			"name": "doctype punctation",
+			"scope": "meta.tag.sgml.html",
+			"settings": {
+				"fontStyle": "bold",
+				"foreground": "#999999"
+			}
+		},
+		{
+			"name": "doctype declaration",
+			"scope": "entity.name.tag.doctype",
+			"settings": {
+				"fontStyle": "bold",
+				"foreground": "#999999"
+			}
+		},
+		{
+			"name": "doctype string",
+			"scope": "string.quoted.double.doctype",
+			"settings": {
+				"fontStyle": "bold",
+				"foreground": "#999999"
+			}
+		},
+		{
+			"name": "html tag punctuation",
+			"scope": "punctuation.definition.tag",
+			"settings": {
+				"fontStyle": "",
+				"foreground": "#121289"
+			}
+		},
+		{
+			"name": "html tag punctuation",
+			"scope": "entity.name.tag",
+			"settings": {
+				"fontStyle": "",
+				"foreground": "#121289"
+			}
+		},
+		{
+			"name": "html attribute",
+			"scope": "entity.other.attribute-name",
+			"settings": {
+				"fontStyle": "",
+				"foreground": "#0A8585"
+			}
+		},
+		{
+			"name": "html attribute punctation",
+			"scope": "entity.other.attribute-name",
+			"settings": {
+				"fontStyle": "",
+				"foreground": "#0A8585"
+			}
+		},
+		{
+			"name": "erb tags",
+			"scope": "punctuation.section.embedded.ruby",
+			"settings": {
+				"fontStyle": "bold",
+				"foreground": "#999999"
+			}
+		},
+		{
+			"name": "ruby string interpolation",
+			"scope": "source.ruby.embedded.source punctuation.section.embedded.ruby",
+			"settings": {
+				"foreground": "#CF1040"
+			}
+		},
+		{
+			"name": "css brackets",
+			"scope": "punctuation.section.property-list.css",
+			"settings": {
+				"fontStyle": ""
+			}
+		},
+		{
+			"name": "css property",
+			"scope": "support.type.property-name.css",
+			"settings": {
+				"fontStyle": "bold"
+			}
+		},
+		{
+			"name": "css property punctuation",
+			"scope": "punctuation.separator.key-value.css",
+			"settings": {
+				"fontStyle": "",
+				"foreground": "#000000"
+			}
+		},
+		{
+			"name": "css property value",
+			"scope": [
+				"meta.property-value",
+				"constant.other.color"
+			],
+			"settings": {
+				"fontStyle": "",
+				"foreground": "#00b0b3"
+			}
+		},
+		{
+			"name": "css ending",
+			"scope": "punctuation.terminator.rule.css",
+			"settings": {
+				"fontStyle": "",
+				"foreground": "#000000"
+			}
+		},
+		{
+			"name": "css font",
+			"scope": "support.constant.font-name",
+			"settings": {
+				"fontStyle": "",
+				"foreground": "#000000"
+			}
+		},
+		{
+			"name": "css keyword",
+			"scope": "keyword.other.unit",
+			"settings": {
+				"fontStyle": "",
+				"foreground": "#00b0b3"
+			}
+		},
+		{
+			"name": "pseudo class",
+			"scope": "entity.other.attribute-name.pseudo-class",
+			"settings": {
+				"fontStyle": "",
+				"foreground": "#000000"
+			}
+		},
+		{
+			"name": "css constant property value",
+			"scope": "support.constant.property-value",
+			"settings": {
+				"fontStyle": "bold",
+				"foreground": "#000000"
+			}
+		},
+		{
+			"name": "css attribute class",
+			"scope": "entity.other.attribute-name.class",
+			"settings": {
+				"fontStyle": "bold",
+				"foreground": "#445588"
+			}
+		},
+		{
+			"name": "css attribute id",
+			"scope": "entity.other.attribute-name.id",
+			"settings": {
+				"fontStyle": "bold",
+				"foreground": "#990000"
+			}
+		},
+		{
+			"name": "diff header from",
+			"scope": "meta.diff.header.from-file",
+			"settings": {
+				"background": "#FFDDDD",
+				"fontStyle": "",
+				"foreground": "#000000"
+			}
+		},
+		{
+			"name": "diff header to",
+			"scope": "meta.diff.header.to-file",
+			"settings": {
+				"fontStyle": "",
+				"foreground": "#000000"
+			}
+		},
+		{
+			"name": "diff inserted",
+			"scope": "markup.inserted.diff",
+			"settings": {
+				"fontStyle": ""
+			}
+		},
+		{
+			"name": "diff deleted",
+			"scope": "markup.deleted.diff",
+			"settings": {
+				"background": "#FFDDDD",
+				"fontStyle": "",
+				"foreground": "#000000"
+			}
+		},
+		{
+			"name": "Function Parameters",
+			"scope": "variable.parameter",
+			"settings": {
+				"fontStyle": "italic"
+			}
+		},
+		{
+			"name": "Library object",
+			"scope": [
+				"support.function",
+				"support.variable",
+				"support.constant",
+				"support.class",
+				"support.type"
+			],
+			"settings": {
+				"fontStyle": "bold",
+				"foreground": "#4183c4"
+			}
+		},
+		{
+			"name": "Function Meta Call Arguments",
+			"scope": "meta.function-call.arguments",
+			"settings": {
+				"fontStyle": "italic"
+			}
+		},
+		{
+			"name": "Function Call",
+			"scope": "meta.function-call",
+			"settings": {
+				"fontStyle": ""
+			}
+		}
+	],
+	"colors": {
+		"editor.background": "#FFFFFF",
+		"editorCursor.foreground": "#000000",
+		"editor.foreground": "#000000",
+		"editorWhitespace.foreground": "#BFBFBF",
+		"editor.lineHighlightBackground": "#00000010",
+		"editor.selectionBackground": "#ffcb00"
+	},
+	"name": "Arduino"
+}
\ No newline at end of file
diff --git a/arduino-ide-extension/src/browser/style/arduino.useable.css b/arduino-ide-extension/src/browser/style/arduino.useable.css
new file mode 100644
index 00000000..8f372976
--- /dev/null
+++ b/arduino-ide-extension/src/browser/style/arduino.useable.css
@@ -0,0 +1,197 @@
+/*
+The following CSS variables define the main public API for styling Theia.
+These variables should be used by all extensions wherever possible. In other
+words, extensions should not define custom colors, sizes, etc. unless
+absolutely necessary. This enables users to adapt the visual theme of Theia
+by changing these variables.
+
+Many variables appear in ordered sequences (0,1,2,...). For most of these
+sequences, colors go from dark to bright for dark themes, and from bright to
+dark for bright themes. A few sequences are used to create contrast against
+the others, e.g. font and accent colors, and thus their brightness goes the
+other way around.
+
+Throughout Theia, we are mostly following principles from Google's Material
+Design when selecting colors. We are not, however, following all of MD as it
+is not optimized for dense, information rich UIs.
+*/
+
+:root {
+    /* Custom Theme Colors */
+    --theia-arduino-light: rgb(0, 102, 105);
+    --theia-arduino-light1: rgb(0, 164, 167);
+    /* Borders: Width and color (bright to dark) */
+    --theia-border-width: 1px;
+    --theia-panel-border-width: 2px;
+    --theia-border-color0: var(--md-grey-100);
+    --theia-border-color1: var(--md-grey-200);
+    --theia-border-color2: var(--md-grey-300);
+    --theia-border-color3: var(--md-grey-500);
+    /* UI fonts: Family, size and color (dark to bright)
+        ---------------------------------------------------
+         The UI font CSS variables are used for the typography all of the Theia
+         user interface elements that are not directly user-generated content.
+      */
+    --theia-ui-font-scale-factor: 1.2;
+    --theia-ui-font-size0: calc(var(--theia-ui-font-size1) / var(--theia-ui-font-scale-factor));
+    --theia-ui-font-size1: 13px;
+    /* Base font size */
+    --theia-ui-font-size2: calc(var(--theia-ui-font-size1) * var(--theia-ui-font-scale-factor));
+    --theia-ui-font-size3: calc(var(--theia-ui-font-size2) * var(--theia-ui-font-scale-factor));
+    --theia-ui-icon-font-size: 14px;
+    /* Ensures px perfect FontAwesome icons */
+    --theia-ui-font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
+    --theia-ui-font-color0: var(--md-grey-900);
+    --theia-ui-font-color1: var(--md-grey-700);
+    --theia-ui-font-color2: var(--md-grey-500);
+    --theia-ui-font-color3: var(--md-grey-300);
+    /* Special font colors */
+    --theia-ui-icon-font-color: #ffffff;
+    --theia-ui-bar-font-color0: var(--theia-ui-font-color0);
+    --theia-ui-bar-font-color1: var(--theia-ui-font-color1);
+    /* Use the inverse UI colors against the brand/accent/warn/error colors. */
+    --theia-inverse-ui-font-color0: rgba(255, 255, 255, 1.0);
+    --theia-inverse-ui-font-color2: rgba(255, 255, 255, 0.7);
+    --theia-inverse-ui-font-color3: rgba(255, 255, 255, 0.5);
+    /* Content fonts: Family, size and color (dark to bright)
+         Content font variables are used for typography of user-generated content.
+      */
+    --theia-content-font-size: 13px;
+    --theia-content-line-height: 1.5;
+    --theia-content-font-color0: black;
+    --theia-content-font-color1: black;
+    --theia-content-font-color2: var(--md-grey-700);
+    --theia-content-font-color3: var(--md-grey-500);
+    --theia-code-font-size: 13px;
+    --theia-code-line-height: 17px;
+    --theia-code-padding: 5px;
+    --theia-code-font-family: Menlo, Monaco, Consolas, "Droid Sans Mono", "Courier New", monospace, "Droid Sans Fallback";
+    --theia-terminal-font-family: monospace;
+    --theia-ui-padding: 6px;
+    /* Tab Icon Colors */
+    --theia-tab-icon-color: var(--theia-ui-font-color1);
+    --theia-tab-font-color: #000;
+    /* Main layout colors (bright to dark)
+        ------------------------------------ */
+    --theia-layout-color0: #ffffff;
+    --theia-layout-color1: #f3f3f3;
+    --theia-layout-color2: #ececec;
+    --theia-layout-color3: #dcdcdc;
+    --theia-layout-color4: #dcdcdc;
+    /* Brand colors */
+    --theia-brand-color0: var(--md-blue-700);
+    --theia-brand-color1: var(--md-blue-500);
+    --theia-brand-color2: var(--md-blue-300);
+    --theia-brand-color3: var(--md-blue-100);
+    /* Secondary Brand colors */
+    --theia-secondary-brand-color0: var(--md-grey-700);
+    --theia-secondary-brand-color1: var(--md-grey-500);
+    --theia-secondary-brand-color2: var(--md-grey-300);
+    --theia-secondary-brand-color3: var(--md-grey-100);
+    /* Accent colors (dark to bright): Use these to create contrast to layout colors. */
+    --theia-accent-color0: rgb(0, 102, 105);
+    --theia-accent-color1: rgb(0, 164, 167, 1.0);
+    --theia-accent-color2: rgb(0, 164, 167, 0.8);
+    --theia-accent-color3: rgb(0, 164, 167, 0.6);
+    --theia-accent-color4: rgb(0, 164, 167, 0.4);
+    /* Accent colors with opacity */
+    --theia-transparent-accent-color0: hsla(210, 63%, 46%, 0.3);
+    --theia-transparent-accent-color1: hsla(207, 66%, 56%, 0.3);
+    --theia-transparent-accent-color2: hsla(207, 64%, 85%, 0.3);
+    --theia-transparent-accent-color3: hsla(205, 70%, 91%, 0.3);
+    /* State colors (warn, error, success, info)
+        ------------------------------------------ */
+    --theia-warn-color0: var(--md-amber-500);
+    --theia-warn-color1: var(--md-amber-400);
+    --theia-warn-color2: var(--md-amber-300);
+    --theia-warn-color3: var(--md-amber-200);
+    --theia-warn-font-color0: var(--md-grey-900);
+    --theia-error-color0: var(--md-red-400);
+    --theia-error-color1: var(--md-red-300);
+    --theia-error-color2: var(--md-red-200);
+    --theia-error-color3: var(--md-red-100);
+    --theia-error-font-color0: var(--md-grey-300);
+    --theia-success-color0: var(--md-green-500);
+    --theia-success-color1: var(--md-green-300);
+    --theia-success-color2: var(--md-green-100);
+    --theia-success-color3: var(--md-green-50);
+    --theia-success-font-color0: var(--md-grey-300);
+    --theia-info-color0: var(--md-cyan-700);
+    --theia-info-color1: var(--md-cyan-500);
+    --theia-info-color2: var(--md-cyan-300);
+    --theia-info-color3: var(--md-cyan-100);
+    --theia-info-font-color0: var(--md-grey-300);
+    --theia-disabled-color0: var(--md-grey-500);
+    --theia-disabled-color1: var(--md-grey-300);
+    --theia-disabled-color2: var(--md-grey-200);
+    --theia-disabled-color3: var(--md-grey-50);
+    --theia-added-color0: rgba(0, 255, 0, 0.8);
+    --theia-removed-color0: rgba(230, 0, 0, 0.8);
+    --theia-modified-color0: rgba(0, 100, 150, 0.8);
+    /* Background for selected text */
+    --theia-selected-text-background: var(--theia-accent-color3);
+    /* Colors to highlight words in widgets like tree or editors */
+    --theia-word-highlight-color0: rgba(168, 172, 148, 0.7);
+    --theia-word-highlight-color1: rgba(253, 255, 0, 0.2);
+    --theia-word-highlight-match-color0: rgba(234, 92, 0, 0.33);
+    --theia-word-highlight-match-color1: rgba(234, 92, 0, 0.5);
+    --theia-word-highlight-replace-color0: rgba(155, 185, 85, 0.2);
+    /* Scroll-bars */
+    --theia-scrollbar-width: 10px;
+    --theia-scrollbar-rail-width: 10px;
+    --theia-scrollbar-thumb-color: hsla(0, 0%, 61%, .4);
+    --theia-scrollbar-rail-color: transparent;
+    --theia-scrollbar-active-thumb-color: hsla(0, 0%, 39%, .4);
+    --theia-scrollbar-active-rail-color: transparent;
+    /* Menu */
+    --theia-menu-color0: var(--theia-layout-color3);
+    --theia-menu-color1: var(--theia-layout-color0);
+    --theia-menu-color2: var(--theia-layout-color3);
+    /* Statusbar */
+    --theia-statusbar-color: var(--theia-github-light);
+    --theia-statusBar-font-color: var(--theia-inverse-ui-font-color0);
+    --theia-statusBar-font-size: 12px;
+    /* Buttons */
+    --theia-ui-button-color: var(--theia-github-light);
+    --theia-ui-button-color-hover: var(--theia-github-light1);
+    --theia-ui-button-font-color: var(--theia-inverse-ui-font-color0);
+    --theia-ui-button-color-secondary: var(--theia-secondary-brand-color1);
+    --theia-ui-button-color-secondary-hover: var(--theia-secondary-brand-color0);
+    --theia-ui-button-font-color-secondary: var(--theia-inverse-ui-font-color0);
+    --theia-ui-button-color-disabled: var(--theia-accent-color3);
+    --theia-ui-button-font-color-disabled: var(--theia-ui-font-color2);
+    --theia-ui-button-color-secondary-disabled: var(--theia-disabled-color1);
+    --theia-ui-button-font-color-secondary-disabled: var(--theia-ui-font-color2);
+    /* Expand/collapse element */
+    --theia-ui-expand-button-color: var(--theia-accent-color4);
+    --theia-ui-expand-button-font-color: var(--theia-ui-font-color1);
+    /* Dialogs */
+    --theia-ui-dialog-header-color: var(--theia-github-light);
+    --theia-ui-dialog-header-font-color: var(--theia-inverse-ui-font-color0);
+    --theia-ui-dialog-color: var(--theia-layout-color0);
+    --theia-ui-dialog-font-color: var(--theia-ui-font-color1);
+    /* Variables */
+    --theia-variable-name-color: #9B46B0;
+    --theia-variable-value-color: rgba(108, 108, 108, 0.8);
+    --theia-number-variable-color: #09885A;
+    --theia-boolean-variable-color: #0000FF;
+    --theia-string-variable-color: #A31515;
+    /* ANSI color */
+    --theia-ansi-black-color: gray;
+    --theia-ansi-red-color: #BE1717;
+    --theia-ansi-green-color: #338A2F;
+    --theia-ansi-yellow-color: #BEB817;
+    --theia-ansi-blue-color: darkblue;
+    --theia-ansi-magenta-color: darkmagenta;
+    --theia-ansi-cyan-color: darkcyan;
+    --theia-ansi-white-color: #BDBDBD;
+    /* ANSI background color */
+    --theia-ansi-black-background-color: gray;
+    --theia-ansi-red-background-color: #BE1717;
+    --theia-ansi-green-background-color: #338A2F;
+    --theia-ansi-yellow-background-color: #BEB817;
+    --theia-ansi-blue-background-color: darkblue;
+    --theia-ansi-magenta-background-color: darkmagenta;
+    --theia-ansi-cyan-background-color: darkcyan;
+    --theia-ansi-white-background-color: #BDBDBD;
+  }
\ No newline at end of file
diff --git a/arduino-ide-extension/src/browser/style/list-widget.css b/arduino-ide-extension/src/browser/style/list-widget.css
index 23466806..2a78cae5 100644
--- a/arduino-ide-extension/src/browser/style/list-widget.css
+++ b/arduino-ide-extension/src/browser/style/list-widget.css
@@ -53,6 +53,7 @@
     font-size: 10px;
     font-weight: bold;
     max-height: calc(1em + 4px);
+    color: var(--theia-layout-color0);
 }
 
 .component-list-item .footer {