diff --git a/apps/common/main/resources/less/colors-table.less b/apps/common/main/resources/less/colors-table.less
index 4fe462dad..77d7faa05 100644
--- a/apps/common/main/resources/less/colors-table.less
+++ b/apps/common/main/resources/less/colors-table.less
@@ -229,4 +229,6 @@
 
 // Canvas
 // ---------------------------
+@canvas-background: var(--canvas-background);
 @canvas-content-background: var(--canvas-content-background);
+@canvas-page-border: var(--canvas-page-border);
diff --git a/apps/documenteditor/main/index.html b/apps/documenteditor/main/index.html
index 4b44c621a..0f0757a29 100644
--- a/apps/documenteditor/main/index.html
+++ b/apps/documenteditor/main/index.html
@@ -15,13 +15,22 @@
             --background-toolbar: #404040;
             --border-toolbar: #2a2a2a;
             --highlight-button-hover: #e0e0e0;
+            --highlight-header-button-hover: rgba(255,255,255,.05);
             --canvas-background: #666666;
             /*--canvas-content-background: #fff;*/
             --canvas-page-border: #555;
         }
 
         .theme-classic-light {
-            --highlight-button-hover: #d8dadc;
+        }
+
+        .theme-light {
+            --background-toolbar: #f7f7f7;
+            /*--border-toolbar: #cbcbcb;*/
+            --highlight-button-hover: #ccc;
+            --highlight-header-button-hover: rgba(255,255,255,.15);
+            --canvas-background: #eee;
+            --canvas-page-border: #ccc;
         }
 
         .loadmask {
@@ -32,8 +41,8 @@
             width: 100%;
             overflow: hidden;
             border: none;
-            background: #f0f0f0;
-            background: var(--canvas-background, #f0f0f0);
+            background: #e2e2e2;
+            background: var(--canvas-background, #e2e2e2);
             z-index: 1001;
         }
 
@@ -73,12 +82,13 @@
             height: 12px;
             border-radius: 3px;
             margin: 0 10px;
-            background: rgba(255, 255, 255, 0.2);
+            background: rgba(255,255,255,.2);
+            background: var(--highlight-header-button-hover, rgba(255,255,255,.2));
         }
 
         .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;
@@ -94,8 +104,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;
@@ -124,15 +134,15 @@
             width: 794px;
             margin: 46px auto;
             height: 100%;
-            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(--canvas-page-border, #bbbec2);
             padding-top: 50px;
         }
 
         .loadmask > .placeholder > .line {
             height: 15px;
             margin: 30px 80px;
-            background: #e2e2e2;
+            background: rgba(0,0,0,.05);
             overflow: hidden;
             position: relative;
 
diff --git a/apps/documenteditor/main/index.html.deploy b/apps/documenteditor/main/index.html.deploy
index 70a90f658..4fb78e4ee 100644
--- a/apps/documenteditor/main/index.html.deploy
+++ b/apps/documenteditor/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: 1001;
         }
 
@@ -60,12 +60,13 @@
             height: 12px;
             border-radius: 3px;
             margin: 0 10px;
-            background: rgba(255, 255, 255, 0.2);
+            background: rgba(255,255,255,.2);
+            background: var(--highlight-header-button-hover, rgba(255,255,255,.2));
         }
 
         .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;
@@ -81,8 +82,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;
@@ -111,15 +112,15 @@
             width: 794px;
             margin: 46px auto;
             height: 100%;
-            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(--canvas-page-border, #bbbec2);
             padding-top: 50px;
         }
 
         .loadmask > .placeholder > .line {
             height: 15px;
             margin: 30px 80px;
-            background: #e2e2e2;
+            background: rgba(0,0,0,.05);
             overflow: hidden;
             position: relative;
 
diff --git a/apps/documenteditor/main/resources/less/app.less b/apps/documenteditor/main/resources/less/app.less
index ec00a795c..d7a520360 100644
--- a/apps/documenteditor/main/resources/less/app.less
+++ b/apps/documenteditor/main/resources/less/app.less
@@ -149,23 +149,33 @@
     --big-icon-background-image:  ~"url(@{app-image-const-path}/iconsbig.png)";
     --huge-icon-background-image: ~"url(@{app-image-const-path}/iconshuge.png)";
 
+    --big-icon-background-image-width: 56px;
+    --huge-icon-background-image-width: 80px;
+
     @safari-fix-base-path: "resources/img";
-    &.safari {
+    .safari {
         --big-icon-background-image:  ~"url(@{safari-fix-base-path}/iconsbig.png)";
         --huge-icon-background-image: ~"url(@{safari-fix-base-path}/iconshuge.png)";
     }
 
-    --big-icon-background-image-width: 56px;
-    --huge-icon-background-image-width: 80px;
-
     .pixel-ratio__1_5 {
         --big-icon-background-image:  ~"url(@{app-image-const-path}/iconsbig@1.5x.png)";
         --huge-icon-background-image: ~"url(@{app-image-const-path}/iconshuge@1.5x.png)";
+
+        &.safari {
+            --big-icon-background-image:  ~"url(@{safari-fix-base-path}/iconsbig@1.5x.png)";
+            --huge-icon-background-image: ~"url(@{safari-fix-base-path}/iconshuge@1.5x.png)";
+        }
     }
 
     .pixel-ratio__2 {
         --big-icon-background-image:  ~"url(@{app-image-const-path}/iconsbig@2x.png)";
         --huge-icon-background-image: ~"url(@{app-image-const-path}/iconshuge@2x.png)";
+
+        &.safari {
+            --big-icon-background-image:  ~"url(@{safari-fix-base-path}/iconsbig@2x.png)";
+            --huge-icon-background-image: ~"url(@{safari-fix-base-path}/iconshuge@2x.png)";
+        }
     }
 
     @huge-icon-background-image: var(--huge-icon-background-image);
@@ -185,12 +195,16 @@
 
 // Skeleton of document
 
+#editor-container {
+    background-color: @canvas-background;
+}
+
 .doc-placeholder {
-    background: #fbfbfb;
+    background: @canvas-content-background;
     width: 794px;
     margin: 46px auto;
     height: 100%;
-    border: 1px solid #bebebe;
+    border: 1px solid @canvas-page-border;
     padding-top: 50px;
     position: absolute;
     left: 0;
@@ -202,7 +216,7 @@
     > .line {
         height: 15px;
         margin: 30px 80px;
-        background: #e2e2e2;
+        background: fade(#000, 5%);
         overflow: hidden;
         position: relative;
     }
diff --git a/apps/spreadsheeteditor/main/index.html b/apps/spreadsheeteditor/main/index.html
index 8b959591b..9c0c57b70 100644
--- a/apps/spreadsheeteditor/main/index.html
+++ b/apps/spreadsheeteditor/main/index.html
@@ -20,7 +20,15 @@
         }
 
         .theme-classic-light {
-            --highlight-button-hover: #d8dadc;
+        }
+
+        .theme-classic-light {
+            --background-toolbar: #f7f7f7;
+            /*--border-toolbar: #cbcbcb;*/
+            --highlight-button-hover: #ccc;
+            --highlight-header-button-hover: rgba(255,255,255,.15);
+            --canvas-background: #eee;
+            --canvas-page-border: #ccc;
         }
 
         .loadmask {
@@ -31,8 +39,8 @@
             width: 100%;
             overflow: hidden;
             border: none;
-            background: #f0f0f0;
-            background: var(--canvas-background, #f0f0f0);
+            background: #e2e2e2;
+            background: var(--canvas-background, #e2e2e2);
             z-index: 1001;
         }
 
@@ -72,12 +80,13 @@
             height: 12px;
             border-radius: 3px;
             margin: 0 10px;
-            background: rgba(255, 255, 255, 0.2);
+            background: rgba(255,255,255,.2);
+            background: var(--highlight-header-button-hover, rgba(255,255,255,.2));
         }
 
         .loadmask > .sktoolbar {
-            background: #f7f7f7;
-            background: var(--background-toolbar, #f7f7f7);
+            background: #f1f1f1;
+            background: var(--background-toolbar, #f1f1f1);
             height: 46px;
             padding: 10px 6px;
             box-sizing: content-box;
@@ -91,8 +100,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;
@@ -117,8 +126,8 @@
 
         .loadmask > .skformula {
             height: 24px;
-            background: #f7f7f7;
-            background: var(--background-toolbar, #f7f7f7);
+            background: #f1f1f1;
+            background: var(--background-toolbar, #f1f1f1);
         }
 
         .loadmask > .skformula ul {
@@ -158,8 +167,8 @@
             width: 100%;
             height: 100%;
             font-size: 0;
-            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(--canvas-page-border, #bbbec2);
             white-space: nowrap;
 
             -webkit-animation: flickerAnimation 2s infinite ease-in-out;
diff --git a/apps/spreadsheeteditor/main/index.html.deploy b/apps/spreadsheeteditor/main/index.html.deploy
index 09545445e..c8f8fd4dc 100644
--- a/apps/spreadsheeteditor/main/index.html.deploy
+++ b/apps/spreadsheeteditor/main/index.html.deploy
@@ -18,8 +18,8 @@
             width: 100%;
             overflow: hidden;
             border: none;
-            background: #f0f0f0;
-            background: var(--canvas-background, #f0f0f0);
+            background: #e2e2e2;
+            background: var(--canvas-background, #e2e2e2);
             z-index: 1001;
         }
 
@@ -60,11 +60,12 @@
             border-radius: 3px;
             margin: 0 10px;
             background: rgba(255, 255, 255, 0.2);
+            background: var(--highlight-header-button-hover, rgba(255,255,255,.2));
         }
 
         .loadmask > .sktoolbar {
-            background: #f7f7f7;
-            background: var(--background-toolbar, #f7f7f7);
+            background: #f1f1f1;
+            background: var(--background-toolbar, #f1f1f1);
             height: 46px;
             padding: 10px 6px;
             box-sizing: content-box;
@@ -78,8 +79,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;
@@ -104,8 +105,8 @@
 
         .loadmask>.skformula {
             height: 24px;
-            background: #f7f7f7;
-            background: var(--background-toolbar, #f7f7f7);
+            background: #f1f1f1;
+            background: var(--background-toolbar, #f1f1f1);
         }
 
         .loadmask>.skformula ul {
@@ -145,8 +146,8 @@
             width: 100%;
             height: 100%;
             font-size: 0;
-            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(--canvas-page-border, #bbbec2);
             white-space: nowrap;
 
             -webkit-animation: flickerAnimation 2s infinite ease-in-out;
diff --git a/apps/spreadsheeteditor/main/resources/less/advanced-settings.less b/apps/spreadsheeteditor/main/resources/less/advanced-settings.less
index ffb3848ab..55e519908 100644
--- a/apps/spreadsheeteditor/main/resources/less/advanced-settings.less
+++ b/apps/spreadsheeteditor/main/resources/less/advanced-settings.less
@@ -54,8 +54,8 @@
 
         .selected {
             .listitem-icon {
-                background-position-x: 0;
-                background-position-x: @button-small-normal-icon-offset-x;
+                background-position-x: -20px;
+                background-position-x: @button-small-active-icon-offset-x;
             }
         }