From 937501deead393aa702455fe67dfaf7cfc607f40 Mon Sep 17 00:00:00 2001
From: Maxim Kadushkin <maxim.kadushkin@onlyoffice.com>
Date: Thu, 4 Nov 2021 22:44:24 +0300
Subject: [PATCH] [DE] fix skeleton dark theme

---
 apps/common/main/lib/util/htmlutils.js         | 10 ++++++++++
 apps/documenteditor/main/index.html            | 18 ++++++++++++------
 .../main/resources/less/app.less               | 11 +++++++++++
 3 files changed, 33 insertions(+), 6 deletions(-)

diff --git a/apps/common/main/lib/util/htmlutils.js b/apps/common/main/lib/util/htmlutils.js
index b7b9b730a..c51bfb264 100644
--- a/apps/common/main/lib/util/htmlutils.js
+++ b/apps/common/main/lib/util/htmlutils.js
@@ -90,3 +90,13 @@ if ( !ui_theme_name ) {
 if ( !!ui_theme_name ) {
     document.body.classList.add(ui_theme_name);
 }
+
+if ( checkLocalStorage ) {
+    var content_theme = localStorage.getItem("content-theme");
+    if ( content_theme == 'dark' ) {
+        var current_theme = localStorage.getItem("ui-theme");
+        if ( !!current_theme && /type":\s*"dark/.test(current_theme) ) {
+            document.body.classList.add("content-theme-dark");
+        }
+    }
+}
diff --git a/apps/documenteditor/main/index.html b/apps/documenteditor/main/index.html
index 8d72d3a61..36960bbe3 100644
--- a/apps/documenteditor/main/index.html
+++ b/apps/documenteditor/main/index.html
@@ -16,9 +16,15 @@
             --border-toolbar: #2a2a2a;
             --highlight-button-hover: #555;
             --highlight-header-button-hover: rgba(255,255,255,.05);
-            --canvas-background: #666666;
+            --canvas-background: #555;
             /*--canvas-content-background: #fff;*/
-            --canvas-page-border: #555;
+            --loadmask-canvas-page-border: #555;
+        }
+
+        .content-theme-dark {
+            --skeleton-canvas-content-background: #3a3a3a;
+            --skeleton-canvas-page-border: #2a2a2a;
+            --skeleton-canvas-line: rgba(255,255,255,.05);
         }
 
         .theme-classic-light {
@@ -30,7 +36,7 @@
             --highlight-button-hover: #ccc;
             --highlight-header-button-hover: rgba(255,255,255,.15);
             --canvas-background: #eee;
-            --canvas-page-border: #ccc;
+            --loadmask-canvas-page-border: #ccc;
         }
 
         .loadmask {
@@ -130,19 +136,19 @@
 
         .loadmask > .placeholder {
             background: #fff;
-            background: var(--canvas-content-background, #fff);
+            background: var(--skeleton-canvas-content-background, #fff);
             width: 794px;
             margin: 46px auto;
             height: 100%;
             border: 1px solid #bbbec2;
-            border: var(--scaled-one-px-value, 1px) solid var(--canvas-page-border, #bbbec2);
+            border: var(--scaled-one-px-value, 1px) solid var(--skeleton-canvas-page-border, #bbbec2);
             padding-top: 50px;
         }
 
         .loadmask > .placeholder > .line {
             height: 15px;
             margin: 30px 80px;
-            background: rgba(0,0,0,.05);
+            background: var(--skeleton-canvas-line, 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 54e4f6f2a..356beb99f 100644
--- a/apps/documenteditor/main/resources/less/app.less
+++ b/apps/documenteditor/main/resources/less/app.less
@@ -228,4 +228,15 @@
         overflow: hidden;
         position: relative;
     }
+
+    .content-theme-dark & {
+        @canvas-content-dark-background: #3a3a3a;
+        @canvas-content-dark-page-border: #2a2a2a;
+        background-color: @canvas-content-dark-background;
+        border-color: @canvas-content-dark-page-border;
+
+        > .line {
+            background-color: fade(#fff, 5%);
+        }
+    }
 }
\ No newline at end of file