Adapted Dark, Light and Arduino themes

Signed-off-by: jbicker <jan.bicker@typefox.io>

arduino-ide-extension/src/browser/icons/mask-buttons.svg

@@ -0,0 +1,70 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!--Generator: Adobe Illustrator 18.1.1, SVG Export Plug-In . SVG Version: 6.00 Build 0)-->
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:cc="http://creativecommons.org/ns#" xmlns:dc="http://purl.org/dc/elements/1.1/" xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape" xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#" xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd" xmlns:svg="http://www.w3.org/2000/svg" id="Layer_1" width="198px" height="99px" x="0px" y="0px" enable-background="new 0 0 198 99" version="1.1" viewBox="0 0 198 99" inkscape:version="0.91 r13725" sodipodi:docname="buttons.svg" xml:space="preserve">
+  <metadata id="metadata327">
+    <rdf:RDF>
+      <cc:Work rdf:about="">
+        <dc:format>
+          image/svg+xml
+        </dc:format>
+        <dc:type rdf:resource="http://purl.org/dc/dcmitype/StillImage"/>
+        <dc:title/>
+      </cc:Work>
+    </rdf:RDF>
+  </metadata>
+  <defs id="defs325"/>
+  <sodipodi:namedview id="namedview323" bordercolor="#666666" borderopacity="1" gridtolerance="10" guidetolerance="10" objecttolerance="10" pagecolor="#ffffff" showgrid="false" showguides="true" inkscape:current-layer="Layer_1" inkscape:cx="45.252385" inkscape:cy="36.224987" inkscape:guide-bbox="true" inkscape:pageopacity="0" inkscape:pageshadow="2" inkscape:window-height="1000" inkscape:window-maximized="1" inkscape:window-width="1215" inkscape:window-x="65" inkscape:window-y="24" inkscape:zoom="4"/>
+  <g id="g5" transform="translate(-0.12000084,0)">
+    <polyline id="polyline9" stroke-miterlimit="10" points="21.453,12.745 15.788,20.571    11.775,16.658  " style="fill:none;stroke:#000000;stroke-width:2.30489993;stroke-miterlimit:10"/>
+  </g>
+  <g id="g23" transform="translate(-0.26100159,0)">
+    <polygon id="polygon27" points="45.412,15.313 49.307,15.313 49.307,11.53 54.701,16.875 49.331,22.245 49.331,18.563 45.412,18.539 " style="fill:#000000"/>
+  </g>
+  <g id="g41" transform="translate(-0.54399872,0)">
+    <polygon id="polygon45" points="114.44,19.083 114.44,15.116 110.586,15.116 116.032,9.621 121.502,15.091 117.751,15.091 117.726,19.083 " style="fill:#000000"/>
+    <rect id="rect47" width="1" height="1" x="110.511" y="22.193001" style="fill:#000000"/>
+    <rect id="rect49" width="1" height="1" x="112.518" y="22.193001" style="fill:#000000"/>
+    <rect id="rect51" width="1" height="1" x="114.517" y="22.193001" style="fill:#000000"/>
+    <rect id="rect53" width="1" height="1" x="116.525" y="22.193001" style="fill:#000000"/>
+    <rect id="rect55" width="1" height="1" x="118.524" y="22.193001" style="fill:#000000"/>
+    <rect id="rect57" width="1" height="1" x="120.531" y="22.193001" style="fill:#000000"/>
+  </g>
+  <g id="g59" transform="translate(-0.68600464,0)">
+    <polygon id="polygon63" points="150.79,9.621 150.79,13.588 154.644,13.588 149.198,19.083 143.728,13.612 147.479,13.613 147.504,9.621 " style="fill:#000000"/>
+    <rect id="rect65" width="1" height="1" x="143.65199" y="22.193001" style="fill:#000000"/>
+    <rect id="rect67" width="1" height="1" x="145.66" y="22.193001" style="fill:#000000"/>
+    <rect id="rect69" width="1" height="1" x="147.659" y="22.193001" style="fill:#000000"/>
+    <rect id="rect71" width="1" height="1" x="149.666" y="22.193001" style="fill:#000000"/>
+    <rect id="rect73" width="1" height="1" x="151.666" y="22.193001" style="fill:#000000"/>
+    <rect id="rect75" width="1" height="1" x="153.673" y="22.193001" style="fill:#000000"/>
+  </g>
+  <g id="g149" transform="translate(-0.40299988,0)">
+    <path id="path151" d="M 87.445,22.097" style="fill:#000000" inkscape:connector-curvature="0"/>
+    <polygon id="polygon155" points="83.44,10.094 84.441,10.094 88.421,14.079 88.421,15.057 87.445,15.057 83.44,15.057 " style="fill:#000000"/>
+    <polygon id="polygon157" points="78.404,11.093 78.404,22.097 87.445,22.097 87.445,14.87 88.421,14.87 88.421,23.134 77.399,23.134 77.399,10.094 83.562,10.094 83.568,11.093 " style="fill:#000000"/>
+    <rect id="rect159" width="0.995" height="0.99599999" x="79.399002" y="12.111" style="fill:#000000"/>
+    <rect id="rect161" width="0.995" height="0.99599999" x="81.394997" y="12.111" style="fill:#000000"/>
+    <rect id="rect163" width="0.995" height="0.99599999" x="79.399002" y="14.103" style="fill:#000000"/>
+    <rect id="rect165" width="0.995" height="0.99599999" x="81.394997" y="14.103" style="fill:#000000"/>
+    <rect id="rect167" width="0.995" height="0.99599999" x="79.399002" y="16.115999" style="fill:#000000"/>
+    <rect id="rect169" width="0.995" height="0.99599999" x="81.394997" y="16.115999" style="fill:#000000"/>
+    <rect id="rect171" width="0.995" height="0.99599999" x="83.403" y="16.115999" style="fill:#000000"/>
+    <rect id="rect173" width="0.995" height="0.99599999" x="85.400002" y="16.115999" style="fill:#000000"/>
+    <rect id="rect175" width="0.995" height="0.99599999" x="79.399002" y="18.118" style="fill:#000000"/>
+    <rect id="rect177" width="0.995" height="0.99599999" x="81.394997" y="18.118" style="fill:#000000"/>
+    <rect id="rect179" width="0.995" height="0.99599999" x="79.399002" y="20.132" style="fill:#000000"/>
+    <rect id="rect181" width="0.995" height="0.99599999" x="81.394997" y="20.132" style="fill:#000000"/>
+    <rect id="rect183" width="0.995" height="0.99599999" x="83.403" y="18.118" style="fill:#000000"/>
+    <rect id="rect185" width="0.995" height="0.99599999" x="85.400002" y="18.118" style="fill:#000000"/>
+    <rect id="rect187" width="0.995" height="0.99599999" x="83.403" y="20.132" style="fill:#000000"/>
+    <rect id="rect189" width="0.995" height="0.99599999" x="85.400002" y="20.132" style="fill:#000000"/>
+  </g>
+  <g id="g275" transform="translate(-0.82800293,0)">
+    <rect id="rect279" width="0.99900001" height="0.99800003" x="187.819" y="16.101" style="fill:#000000"/>
+    <rect id="rect281" width="0.99900001" height="0.99800003" x="189.825" y="16.101" style="fill:#000000"/>
+    <rect id="rect283" width="0.99900001" height="0.99800003" x="174.83299" y="16.101" style="fill:#000000"/>
+    <circle id="circle285" cx="181.80299" cy="16.101" r="4.0900002" stroke-miterlimit="10" style="fill:none;stroke:#000000;stroke-width:1.95439994;stroke-miterlimit:10"/>
+    <rect id="rect287" width="2.6800001" height="4.4229999" x="175.895" y="18.427999" style="fill:#000000" transform="matrix(0.6915,0.7224,-0.7224,0.6915,69.5827,-121.6599)"/>
+    <rect id="rect289" width="2.0280001" height="1.9960001" x="180.789" y="15.103" style="fill:#000000"/>
+  </g>
+</svg>

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

@@ -18,47 +18,57 @@ is not optimized for dense, information rich UIs.
 
 :root {
     /* Custom Theme Colors */
-    --theia-arduino-light: rgb(0, 102, 102);
+    --theia-arduino-light: rgb(0, 100, 104);
-    --theia-arduino-light1: rgb(0, 153, 153);
+    --theia-arduino-light1: rgb(23, 161, 165);
     --theia-arduino-light2: rgb(218, 226, 228);
     --theia-arduino-light3: rgb(237, 241, 242);
     --theia-arduino-terminal: rgb(0, 0, 0);
+
     /* 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-400);
+    
+    
     /* 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;
+    --theia-ui-font-size1: 13px; /* Base font size */
-    /* 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;
+    --theia-ui-icon-font-size: 14px; /* Ensures px perfect FontAwesome icons */
-    /* 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-inverse-ui-font-color0); /* 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;
@@ -71,75 +81,101 @@ is not optimized for dense, information rich UIs.
     --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: #f7f9f9;
     --theia-layout-color2: #ececec;
-    --theia-layout-color3: var(--theia-arduino-light);
+    --theia-layout-color3: var(--theia-arduino-light2);
     --theia-layout-color4: #dcdcdc;
+
     /* Brand colors */
+    
     --theia-brand-color0: var(--theia-arduino-light);
     --theia-brand-color1: var(--theia-arduino-light1);
     --theia-brand-color2: var(--theia-arduino-light2);
     --theia-brand-color3: var(--theia-arduino-light3);
+    
     /* Secondary Brand colors */
+    
     --theia-secondary-brand-color0: var(--md-grey-700);
     --theia-secondary-brand-color1: #b5c8c9;
     --theia-secondary-brand-color2: var(--theia-arduino-light2);
     --theia-secondary-brand-color3: var(--theia-arduino-light3);
+    
     /* 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-color0: var(--theia-arduino-light);
-    --theia-accent-color2: rgb(0, 164, 167, 0.8);
+    --theia-accent-color1: rgb(77, 183, 187, 1.0);
-    --theia-accent-color3: rgb(0, 164, 167, 0.6);
+    --theia-accent-color2: rgb(77, 183, 187, 0.8);
-    --theia-accent-color4: rgb(0, 164, 167, 0.4);
+    --theia-accent-color3: rgb(77, 183, 187, 0.6);
+    --theia-accent-color4: rgba(77, 183, 187, 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: #da5b4a;
     --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);
@@ -147,7 +183,7 @@ is not optimized for dense, information rich UIs.
     --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-color0: var(--theia-arduino-light);
     --theia-menu-color1: var(--theia-layout-color0);
     --theia-menu-color2: #dae3e3;
     /* Statusbar */
@@ -155,9 +191,9 @@ is not optimized for dense, information rich UIs.
     --theia-statusBar-font-color: var(--theia-inverse-ui-font-color0);
     --theia-statusBar-font-size: 12px;
     /* Buttons */
-    --theia-ui-button-color: var(--theia-arduino-light);
+    --theia-ui-button-color: var(--theia-accent-color1);
-    --theia-ui-button-color-hover: var(--theia-arduino-light1);
+    --theia-ui-button-color-hover: var(--theia-accent-color2);
-    --theia-ui-button-font-color: var(--theia-inverse-ui-font-color0);
+    --theia-ui-button-font-color: var(--theia-arduino-light);
     --theia-ui-button-color-secondary: var(--theia-secondary-brand-color1);
     --theia-ui-button-color-secondary-hover: var(--theia-menu-color2);
     --theia-ui-button-font-color-secondary: var(--theia-inverse-ui-font-color0);
@@ -197,4 +233,8 @@ is not optimized for dense, information rich UIs.
     --theia-ansi-magenta-background-color: darkmagenta;
     --theia-ansi-cyan-background-color: darkcyan;
     --theia-ansi-white-background-color: #BDBDBD;
+
+    /* Output */
+    --theia-output-font-color: var(--theia-ui-font-color3);
+
   }

arduino-ide-extension/src/browser/style/board-select-dialog.css

@@ -140,8 +140,8 @@ button.theia-button.secondary {
 
 button.theia-button.main {
     color: #fff;
-    background-color: #00979c;
+    /* background-color: #00979c; */
-    box-shadow: 0 4px #005c5f;
+    box-shadow: 0 4px var(--theia-accent-color0);
 }
 
 .dialogControl {
@@ -185,7 +185,7 @@ button.theia-button.main {
 }
 
 .arduino-boards-toolbar-item {
-    background: white;
+    background: var(--theia-layout-color1);
     height: 22px;
     display: flex;
     width: 100%;
@@ -193,7 +193,7 @@ button.theia-button.main {
 }
 
 .arduino-boards-dropdown-list {
-    background: #f7f7f7;
+    background: var(--theia-layout-color1);
     border: 3px solid var(--theia-border-color2);
     margin: -3px;
     z-index: 1000;
@@ -204,13 +204,14 @@ button.theia-button.main {
     display: flex;
     padding: 10px;
     cursor: pointer;
+    color: var(--theia-ui-font-color1);
 }
 
 .arduino-boards-dropdown-item .fa-check {
-    color: var(--theia-accent-color2);
+    color: var(--theia-accent-color1);
 }
 
 .arduino-boards-dropdown-item.selected,
 .arduino-boards-dropdown-item:hover {
-    background: var(--theia-ui-button-color-secondary-hover);
+    background: var(--theia-layout-color3);
 }

arduino-ide-extension/src/browser/style/list-widget.css

@@ -50,15 +50,15 @@
 }
 
 .filterable-list-container .items-container > div:nth-child(odd) {
-    background-color: var(--theia-secondary-brand-color2);
+    background-color: var(--theia-layout-color0);
 }
 
 .filterable-list-container .items-container > div:nth-child(even) {
-    background-color: var(--theia-secondary-brand-color3);
+    background-color: var(--theia-layout-color1);
 }
 
 .filterable-list-container .items-container > div:hover {
-    background-color: var(--theia-layout-color1);
+    background-color: var(--theia-layout-color2);
 }
 
 .component-list-item {
@@ -111,7 +111,7 @@
 .component-list-item .header .installed {
     margin-left: 4px;
     justify-self: end;
-    background-color: var(--theia-accent-color2);
+    background-color: var(--theia-accent-color1);
     padding: 2px 4px 2px 4px;
     font-size: 10px;
     font-weight: bold;

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

@@ -7,66 +7,65 @@
 }
 
 #outputView {
-    color: var(--theia-ui-font-color3);
     cursor: text;
 }
 
-#toggle-serial-monitor.arduino-tool-icon:hover,
-#arduino-verify.arduino-tool-icon:hover,
-#arduino-save-file.arduino-tool-icon:hover,
-#arduino-show-open-context-menu.arduino-tool-icon:hover,
-#arduino-upload.arduino-tool-icon:hover {
-    background-position-y: 60px;
-}
-
-#toggle-serial-monitor.arduino-tool-icon,
-#arduino-verify.arduino-tool-icon,
-#arduino-save-file.arduino-tool-icon,
-#arduino-show-open-context-menu.arduino-tool-icon,
-#arduino-upload.arduino-tool-icon {
-    height: 24px;
-    width: 24px;
-}
-
-#arduino-save-file {
-    background: url(../icons/buttons.svg);
-    background-size: 800%;
-    background-position-y: 28px;
-    background-position-x: 59px;
-}
-
-#arduino-verify {
-    background: url(../icons/buttons.svg);
-    background-size: 800%;
-    background-position-y: 28px;
-    background-position-x: 188px;
-}
-
-#arduino-upload {
-    background: url(../icons/buttons.svg);
-    background-size: 800%;
-    background-position-y: 28px;
-    background-position-x: 156px;
-}
-
-#arduino-show-open-context-menu {
-    background: url(../icons/buttons.svg);
-    background-size: 800%;
-    background-position-y: 28px;
-    background-position-x: 92px;
-}
-
-#toggle-serial-monitor {
-    background: url(../icons/buttons.svg);
-    background-size: 800%;
-    background-position-y: 28px;
-    background-position-x: 28px;
-}
-
 .p-TabBar-toolbar .item.arduino-tool-item {
     margin-left: 3px;
 }
 
+.p-TabBar-toolbar .item.arduino-tool-item > div {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    height: 24px;
+    width: 24px;
+    background: var(--theia-ui-button-color);
+}
+
+.p-TabBar-toolbar .item.arduino-tool-item > div:hover {
+    background: var(--theia-ui-button-color-hover);
+}
+
+.arduino-verify, .arduino-upload {
+    border-radius: 12px;
+}
+
+.arduino-tool-icon {
+    height: 24px;
+    width: 24px;
+    background: var(--theia-ui-button-font-color);
+    -webkit-mask: url(../icons/mask-buttons.svg);
+    mask: url(../icons/mask-buttons.svg);
+    -webkit-mask-size: 800%;
+    mask-size: 800%;
+}
+
+.arduino-save-file-icon {
+    -webkit-mask-position: 59px -4px;
+    mask-position: 59px -4px;
+}
+
+.arduino-verify-icon {
+    -webkit-mask-position: 188px -4px;
+    mask-position: 188px -4px;
+}
+
+.arduino-upload-icon {
+    -webkit-mask-position: 156px -4px;
+    mask-position: 156px -4px;
+}
+
+.arduino-show-open-context-menu-icon {
+    -webkit-mask-position: 92px -4px;
+    mask-position: 92px -4px;
+}
+
+.toggle-serial-monitor-icon {
+    -webkit-mask-position: 28px -4px;
+    mask-position: 28px -4px;
+}
+
 #arduino-toolbar-container {
     display: flex;
     width: 100%;
@@ -112,13 +111,22 @@
     color: var(--theia-ui-font-color3);
 }
 
-.p-TabBar-toolbar .item > div#arduino-toggle-advanced-mode {
+.p-TabBar-toolbar .item > div.arduino-toggle-advanced-mode {
     display: flex;
     width: 24px;
     height: 24px;
     justify-content: center;
     align-items: center;
-    color: var(--theia-ui-font-color3);
+}
+
+.arduino-toggle-advanced-mode-icon {
+    mask: none;
+    -webkit-mask: none;
+    background: none;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    color: var(--theia-ui-button-font-color);
 }
 
 .monaco-editor .margin {

arduino-ide-extension/src/browser/style/serial-monitor.css

@@ -14,7 +14,7 @@
 .serial-monitor-container .head {
     display: flex;
     padding: 5px;
-    background: var(--theia-brand-color2);
+    background: var(--theia-layout-color0);
     height: 27px;
 }
 
@@ -27,17 +27,22 @@
     display: flex;
     padding: 0 5px;
     align-items: center;
-    background: var(--theia-brand-color3);
+    color: var(--theia-ui-font-color1);
-    color: var(--theia-ui-dialog-font-color);
+    opacity: 0.7;
+}
+.serial-monitor-container .head .send .btn:hover {
+    opacity: 1;
+    cursor: pointer;
 }
 
 .serial-monitor-container .head .send form {
     flex: 1;
     display: flex;
+    background: var(--theia-layout-color2);
 }
 
 .serial-monitor-container .head .send input#serial-monitor-send {
-    background: var(--theia-layout-color0);
+    color: var(--theia-ui-font-color1);
     flex: 1;
 }
 
@@ -67,7 +72,7 @@
 }
 
 .p-TabBar-toolbar .item.arduino-monitor.toggled {
-    background: var(--theia-brand-color2);
+    background: var(--theia-secondary-brand-color0);
 }
 
 .p-TabBar-toolbar .item .clear-all {
@@ -77,6 +82,7 @@
 /* React Select Styles */
 .serial-monitor-select .sms__control {
     border: var(--theia-border-color1) var(--theia-border-width) solid;
+    background: var(--theia-layout-color2);
 }
 
 .serial-monitor-select .sms__control--is-focused {
@@ -110,6 +116,10 @@
     border-bottom: none;
 }
 
+.serial-monitor-select .sms__value-container .sms__single-value {
+    color: var(--theia-ui-font-color1);
+}
+
 .sms__menu-list {
     padding-top: 0 !important;
     padding-bottom: 0 !important;

arduino-ide-extension/src/browser/toolbar/arduino-toolbar.tsx

@@ -28,7 +28,7 @@ export class ArduinoToolbarComponent extends React.Component<ArduinoToolbarCompo
 
     protected renderItem = (item: TabBarToolbarItem) => {
         let innerText = '';
-        let className = `${item.id} arduino-tool-icon`;
+        let className = `arduino-tool-icon ${item.id}-icon`;
         if (item.text) {
             for (const labelPart of this.props.labelParser.parse(item.text)) {
                 if (typeof labelPart !== 'string' && LabelIcon.is(labelPart)) {
@@ -40,17 +40,18 @@ export class ArduinoToolbarComponent extends React.Component<ArduinoToolbarCompo
         }
         const command = this.props.commands.getCommand(item.command);
         const cls = `${ARDUINO_TOOLBAR_ITEM_CLASS} ${TabBarToolbar.Styles.TAB_BAR_TOOLBAR_ITEM} ${command && this.props.commandIsEnabled(command.id) ? ' enabled' : ''}`
-        return <div key={item.id}
+        return <div key={item.id} className={cls} >
-            className={cls} >
+            <div className={item.id}>
-            <div
+                <div
-                key={item.id + '-icon'}
+                    key={item.id + '-icon'}
-                id={item.id}
+                    id={item.id}
-                className={className}
+                    className={className}
-                onClick={this.props.executeCommand}
+                    onClick={this.props.executeCommand}
-                onMouseOver={() => this.setState({ tooltip: item.tooltip || '' })}
+                    onMouseOver={() => this.setState({ tooltip: item.tooltip || '' })}
-                onMouseOut={() => this.setState({ tooltip: '' })}
+                    onMouseOut={() => this.setState({ tooltip: '' })}
-                title={item.tooltip}>
+                    title={item.tooltip}>
-                {innerText}
+                    {innerText}
+                </div>
             </div>
         </div>
     }