fix sketchbook icons colors

Author: francescospissu

arduino-ide-extension/src/browser/style/cloud-sketchbook.css

@@ -13,12 +13,19 @@
     margin-bottom: 20px;
 }
 
-
 .cloud-sketchbook-tree-icon {
-    background: url("./cloud-sketchbook-tree-icon.svg") center center no-repeat;
+    background-color: #424242;
+    -webkit-mask: url(./cloud-sketchbook-tree-icon.svg);
+    -webkit-mask-position: center;
+    -webkit-mask-repeat: no-repeat;
     width: var(--theia-icon-size);
     height: var(--theia-icon-size);
-    background-size: auto 90%;
+    -webkit-mask-size: auto 90%;
+}
+
+.p-mod-current
+.cloud-sketchbook-tree-icon {
+    background-color: var(--theia-statusBar-background);
 }
 
 .sketchbook-trees-container
@@ -89,13 +96,19 @@
 }
 
 .pull-sketch-icon {
-    background: url("./pull-sketch-icon.svg") center center no-repeat;
+    background-color: #424242;
+    -webkit-mask: url(./pull-sketch-icon.svg);
+    -webkit-mask-position: center;
+    -webkit-mask-repeat: no-repeat;
     width: var(--theia-icon-size);
     height: var(--theia-icon-size);
 }
 
 .push-sketch-icon {
-    background: url("./push-sketch-icon.svg") center center no-repeat;
+    background-color: #424242;
+    -webkit-mask: url(./push-sketch-icon.svg);
+    -webkit-mask-position: center;
+    -webkit-mask-repeat: no-repeat;
     width: var(--theia-icon-size);
     height: var(--theia-icon-size);
 }
@@ -181,4 +194,4 @@
 
 .arduino-share-sketch-dialog .sketch-link-embed textarea {
     width: 100%;
-}
+}

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

@@ -1,27 +1,38 @@
 .sketchbook-tab-icon {
-    -webkit-mask: url('./sketchbook.svg');
-    mask: url('./sketchbook.svg');
+  -webkit-mask: url('./sketchbook.svg');
+  mask: url('./sketchbook.svg');
 }
 
 .sketch-folder-icon {
-    background: url('./sketch-folder-icon.svg') center center no-repeat;
-    background-position-x: 1px;
-    width: var(--theia-icon-size);
-    height: var(--theia-icon-size);
+  background: url('./sketch-folder-icon.svg') center center no-repeat;
+  background-position-x: 1px;
+  width: var(--theia-icon-size);
+  height: var(--theia-icon-size);
 }
 
 .sketchbook-tree-icon {
-    background: url('./sketchbook-tree-icon.svg') center center no-repeat;
-    width: 19px !important;
-    height: var(--theia-icon-size);
+  background-color: #424242;
+  -webkit-mask: url(./sketchbook-tree-icon.svg);
+  -webkit-mask-position: center;
+  -webkit-mask-repeat: no-repeat;
+  width: 19px !important;
+  height: var(--theia-icon-size);
+}
+
+.p-mod-current
+.sketchbook-tree-icon {
+    background-color: var(--theia-statusBar-background);
 }
 
 .sketchbook-trees-container {
-    height: 100%;
+  height: 100%;
 }
 
 .sketchbook-tree__opts {
-  background: url('./sketchbook-opts-icon.svg') center center no-repeat;
+  background-color: #424242;
+  -webkit-mask: url(./sketchbook-opts-icon.svg);
+  -webkit-mask-position: center;
+  -webkit-mask-repeat: no-repeat;
   width: var(--theia-icon-size);
   height: var(--theia-icon-size);
 }
@@ -44,4 +55,4 @@
 .theia-TreeNode:hover .sketchbook-commands-icons,
 .theia-TreeNode.theia-mod-selected .sketchbook-commands-icons {
   display: block;
-}
+}