diff --git a/apps/documenteditor/main/index.html b/apps/documenteditor/main/index.html
index 11d936106a..c14799816b 100644
--- a/apps/documenteditor/main/index.html
+++ b/apps/documenteditor/main/index.html
@@ -93,8 +93,8 @@
             height: 12px;
             border-radius: 3px;
             margin: 0 10px;
-            background: rgba(255,255,255,.2);
-            background: var(--highlight-header-button-hover, rgba(255,255,255,.2));
+            background: rgba(0,0,0,.15);
+            background: var(--highlight-header-button-hover, rgba(0,0,0,.15));
         }
 
         .loadmask > .brendpanel .circle {
@@ -103,8 +103,8 @@
             height: 20px;
             border-radius: 20px;
             margin: 0 10px;
-            background: rgba(255,255,255,.2);
-            background: var(--highlight-header-button-hover, rgba(255,255,255,.2));
+            background: rgba(0,0,0,.15);
+            background: var(--highlight-header-button-hover, rgba(0,0,0,.15));
         }
 
         .loadmask > .sktoolbar {
diff --git a/apps/documenteditor/main/index.html.deploy b/apps/documenteditor/main/index.html.deploy
index 0088bb41f2..836849d965 100644
--- a/apps/documenteditor/main/index.html.deploy
+++ b/apps/documenteditor/main/index.html.deploy
@@ -71,8 +71,8 @@
             height: 12px;
             border-radius: 3px;
             margin: 0 10px;
-            background: rgba(255,255,255,.2);
-            background: var(--highlight-header-button-hover, rgba(255,255,255,.2));
+            background: rgba(0,0,0,.15);
+            background: var(--highlight-header-button-hover, rgba(0,0,0,.15));
         }
 
         .loadmask > .brendpanel .circle {
@@ -81,8 +81,8 @@
             height: 20px;
             border-radius: 20px;
             margin: 0 10px;
-            background: rgba(255,255,255,.2);
-            background: var(--highlight-header-button-hover, rgba(255,255,255,.2));
+            background: rgba(0,0,0,.15);
+            background: var(--highlight-header-button-hover, rgba(0,0,0,.15));
         }
 
         .loadmask > .sktoolbar {
diff --git a/apps/pdfeditor/main/index.html b/apps/pdfeditor/main/index.html
index e2cbd3e997..5f3fc9be08 100644
--- a/apps/pdfeditor/main/index.html
+++ b/apps/pdfeditor/main/index.html
@@ -88,8 +88,8 @@
             height: 12px;
             border-radius: 3px;
             margin: 0 10px;
-            background: rgba(255,255,255,.2);
-            background: var(--highlight-header-button-hover, rgba(255,255,255,.2));
+            background: rgba(0,0,0,.15);
+            background: var(--highlight-header-button-hover, rgba(0,0,0,.15));
         }
 
         .loadmask > .brendpanel .circle {
@@ -98,8 +98,8 @@
             height: 20px;
             border-radius: 20px;
             margin: 0 10px;
-            background: rgba(255,255,255,.2);
-            background: var(--highlight-header-button-hover, rgba(255,255,255,.2));
+            background: rgba(0,0,0,.15);
+            background: var(--highlight-header-button-hover, rgba(0,0,0,.15));
         }
 
         .loadmask > .sktoolbar {
diff --git a/apps/pdfeditor/main/index.html.deploy b/apps/pdfeditor/main/index.html.deploy
index e6b8cb8fe7..23778bfdec 100644
--- a/apps/pdfeditor/main/index.html.deploy
+++ b/apps/pdfeditor/main/index.html.deploy
@@ -66,8 +66,8 @@
             height: 12px;
             border-radius: 3px;
             margin: 0 10px;
-            background: rgba(255,255,255,.2);
-            background: var(--highlight-header-button-hover, rgba(255,255,255,.2));
+            background: rgba(0,0,0,.15);
+            background: var(--highlight-header-button-hover, rgba(0,0,0,.15));
         }
 
         .loadmask > .brendpanel .circle {
@@ -76,8 +76,8 @@
             height: 20px;
             border-radius: 20px;
             margin: 0 10px;
-            background: rgba(255,255,255,.2);
-            background: var(--highlight-header-button-hover, rgba(255,255,255,.2));
+            background: rgba(0,0,0,.15);
+            background: var(--highlight-header-button-hover, rgba(0,0,0,.15));
         }
 
         .loadmask > .sktoolbar {
diff --git a/apps/presentationeditor/main/index.html b/apps/presentationeditor/main/index.html
index d21cafd33e..975a4b4d81 100644
--- a/apps/presentationeditor/main/index.html
+++ b/apps/presentationeditor/main/index.html
@@ -81,8 +81,8 @@
             height: 12px;
             border-radius: 3px;
             margin: 0 10px;
-            background: rgba(255, 255, 255,.2);
-            background: var(--highlight-header-button-hover, rgba(255,255,255,.2));
+            background: rgba(0,0,0,.15);
+            background: var(--highlight-header-button-hover, rgba(0,0,0,.15));
         }
 
         .loadmask > .brendpanel .circle {
@@ -91,8 +91,8 @@
             height: 20px;
             border-radius: 20px;
             margin: 0 10px;
-            background: rgba(255,255,255,.2);
-            background: var(--highlight-header-button-hover, rgba(255,255,255,.2));
+            background: rgba(0,0,0,.15);
+            background: var(--highlight-header-button-hover, rgba(0,0,0,.15));
         }
 
         .loadmask > .sktoolbar {
diff --git a/apps/presentationeditor/main/index.html.deploy b/apps/presentationeditor/main/index.html.deploy
index 677818bfe7..13e98dc5eb 100644
--- a/apps/presentationeditor/main/index.html.deploy
+++ b/apps/presentationeditor/main/index.html.deploy
@@ -19,8 +19,8 @@
             width: 100%;
             overflow: hidden;
             border: none;
-            background: #f0f0f0;
-            background: var(--canvas-background, #f0f0f0);
+            background: #e2e2e2;
+            background: var(--canvas-background, #e2e2e2);
             z-index: 1002;
         }
 
@@ -60,7 +60,8 @@
             height: 12px;
             border-radius: 3px;
             margin: 0 10px;
-            background: rgba(255, 255, 255, 0.2);
+            background: rgba(0,0,0,.15);
+            background: var(--highlight-header-button-hover, rgba(0,0,0,.15));
         }
 
         .loadmask > .brendpanel .circle {
@@ -69,12 +70,13 @@
             height: 20px;
             border-radius: 20px;
             margin: 0 10px;
-            background: rgba(255,255,255,.2);
+            background: rgba(0,0,0,.15);
+            background: var(--highlight-header-button-hover, rgba(0,0,0,.15));
         }
 
         .loadmask > .sktoolbar {
-            background: #f7f7f7;
-            background: var(--background-toolbar, #f7f7f7);
+            background: #f1f1f1;
+            background: var(--background-toolbar, #f1f1f1);
             border-bottom: 1px solid #cbcbcb;
             border-bottom: var(--scaled-one-px-value, 1px) solid var(--border-toolbar, #cbcbcb);
             height: 46px;
@@ -91,8 +93,8 @@
         }
 
         .loadmask > .sktoolbar li {
-            background: #ccc;
-            background: var(--highlight-button-hover, #ccc);
+            background: #d8dadc;
+            background: var(--highlight-button-hover, #d8dadc);
             border-radius: 3px;
             width: 20px;
             height: 20px;
@@ -159,8 +161,8 @@
             width: 100%;
             background: #fff;
             background: var(--canvas-content-background, #fff);
-            border: 1px solid #ccc;
-            border: var(--scaled-one-px-value, 1px) solid var(--canvas-page-border, #ccc);
+            border: 1px solid #bbbec2;
+            border: var(--scaled-one-px-value, 1px) solid var(--skeleton-canvas-page-border, var(--canvas-page-border, #bbbec2));
 
             -webkit-animation: flickerAnimation 2s infinite ease-in-out;
             -moz-animation: flickerAnimation 2s infinite ease-in-out;
diff --git a/apps/spreadsheeteditor/main/index.html b/apps/spreadsheeteditor/main/index.html
index 6caa8bd463..a56915598d 100644
--- a/apps/spreadsheeteditor/main/index.html
+++ b/apps/spreadsheeteditor/main/index.html
@@ -81,8 +81,8 @@
             height: 12px;
             border-radius: 3px;
             margin: 0 10px;
-            background: rgba(255,255,255,.2);
-            background: var(--highlight-header-button-hover, rgba(255,255,255,.2));
+            background: rgba(0,0,0,.15);
+            background: var(--highlight-header-button-hover, rgba(0,0,0,.15));
         }
 
         .loadmask > .brendpanel .circle {
@@ -91,8 +91,8 @@
             height: 20px;
             border-radius: 20px;
             margin: 0 10px;
-            background: rgba(255,255,255,.2);
-            background: var(--highlight-header-button-hover, rgba(255,255,255,.2));
+            background: rgba(0,0,0,.15);
+            background: var(--highlight-header-button-hover, rgba(0,0,0,.15));
         }
 
         .loadmask > .sktoolbar {
diff --git a/apps/spreadsheeteditor/main/index.html.deploy b/apps/spreadsheeteditor/main/index.html.deploy
index 83f095d7c4..e5557024d5 100644
--- a/apps/spreadsheeteditor/main/index.html.deploy
+++ b/apps/spreadsheeteditor/main/index.html.deploy
@@ -59,8 +59,8 @@
             height: 12px;
             border-radius: 3px;
             margin: 0 10px;
-            background: rgba(255, 255, 255, 0.2);
-            background: var(--highlight-header-button-hover, rgba(255,255,255,.2));
+            background: rgba(0,0,0,.15);
+            background: var(--highlight-header-button-hover, rgba(0,0,0,.15));
         }
 
         .loadmask > .brendpanel .circle {
@@ -69,8 +69,8 @@
             height: 20px;
             border-radius: 20px;
             margin: 0 10px;
-            background: rgba(255,255,255,.2);
-            background: var(--highlight-header-button-hover, rgba(255,255,255,.2));
+            background: rgba(0,0,0,.15);
+            background: var(--highlight-header-button-hover, rgba(0,0,0,.15));
         }
 
         .loadmask > .sktoolbar {