diff --git a/src/editor/components/seButton.js b/src/editor/components/seButton.js
index 1a1e0663..3c6f49a8 100644
--- a/src/editor/components/seButton.js
+++ b/src/editor/components/seButton.js
@@ -6,7 +6,7 @@ template.innerHTML = `
   <style>
   :host(:hover) :not(.disabled)
   {
-    background-color: #2B3C45;
+    background-color: var(--icon-bg-color-hover);
   }
   div
   {
@@ -14,7 +14,7 @@ template.innerHTML = `
     width: 24px;
     margin: 2px 2px 4px;
     padding: 3px;
-    background-color: #72797A;
+    background-color: var(--icon-bg-color);
     cursor: pointer;
     border-radius: 3px;
   }
@@ -30,7 +30,7 @@ template.innerHTML = `
     height: 100%;
   }
   .pressed {
-    background-color: #2B3C45;
+    background-color: var(--icon-bg-color-hover);
   }
   .disabled {
     opacity: 0.3;
diff --git a/src/editor/components/seExplorerButton.js b/src/editor/components/seExplorerButton.js
index 8dfba19c..fc6eacc3 100644
--- a/src/editor/components/seExplorerButton.js
+++ b/src/editor/components/seExplorerButton.js
@@ -16,11 +16,10 @@ template.innerHTML = `
   .overall.pressed .button-icon,
   .overall.pressed,
   .menu-item.pressed {
-    background-color: #2B3C45 !important;
+    background-color: var(--icon-bg-color-hover) !important;
   }
   .overall.pressed .menu-button {
-    box-shadow: inset 1px 1px 2px rgba(0,0,0,0.4), 1px 1px  0 white  !important;
-    background-color: #2B3C45 !important;
+    background-color: var(--icon-bg-color-hover) !important;
   }
   .disabled {
     opacity: 0.3;
@@ -31,7 +30,7 @@ template.innerHTML = `
     width: 24px;
     margin: 2px 2px 4px;
     padding: 3px;
-    background-color: #72797A;
+    background-color: var(--icon-bg-color);
     cursor: pointer;
     position: relative;
     border-radius: 3px;
diff --git a/src/editor/components/seFlyingButton.js b/src/editor/components/seFlyingButton.js
index a27dc564..6d2e21ed 100644
--- a/src/editor/components/seFlyingButton.js
+++ b/src/editor/components/seFlyingButton.js
@@ -6,7 +6,7 @@ template.innerHTML = `
   }
   .overall:hover *
   {
-    background-color: #2B3C45;
+    background-color: var(--icon-bg-color-hover);
   }
   img {
     border: none;
@@ -15,10 +15,10 @@ template.innerHTML = `
   }
   .overall.pressed .button-icon,
   .overall.pressed .handle {
-    background-color: #2B3C45 !important;
+    background-color: var(--icon-bg-color-hover) !important;
   }
   .overall.pressed .menu-button {
-    background-color: #2B3C45 !important;
+    background-color: var(--icon-bg-color-hover) !important;
   }
   .disabled {
     opacity: 0.3;
@@ -29,7 +29,7 @@ template.innerHTML = `
     width: 24px;
     margin: 2px 2px 4px;
     padding: 3px;
-    background-color: #72797A;
+    background-color: var(--icon-bg-color);
     cursor: pointer;
     position: relative;
     border-radius: 3px;
diff --git a/src/editor/svgedit.css b/src/editor/svgedit.css
index 36effe35..a01be6ff 100644
--- a/src/editor/svgedit.css
+++ b/src/editor/svgedit.css
@@ -1,13 +1,15 @@
 :root{
-  --main-bg-color: #f4f4f4;
+  --main-bg-color: #72797A;
   --text-color: #000000;
   --border-color: #808080;
   --canvas-bg-color:  radial-gradient(#7a7676, #ffffff 50%);
   --link-color: #19c;
   --ruler-color: #f4f4f4;
+  --icon-bg-color: #72797A;
+  --icon-bg-color-hover: #2B3C45;
 }
 
-body {  
+body {
   background: var(--main-bg-color);
 }
 
@@ -123,7 +125,7 @@ hr {
   overflow: hidden;
   display: flex;
   justify-content: center;
-  align-items: center;  
+  align-items: center;
 }
 
 #layerlist {