From 203bded1e75b218fff82d3f0b3da87e30015e647 Mon Sep 17 00:00:00 2001
From: maxkadushkin <maxim.kadushkin@onlyoffice.com>
Date: Fri, 24 Sep 2021 17:12:58 +0300
Subject: [PATCH] [all] fix old-style loader (#1205)

---
 apps/common/main/lib/controller/Themes.js     |  9 +++-
 apps/common/main/lib/util/htmlutils.js        |  6 +--
 apps/documenteditor/main/index_loader.html    | 45 ++++++++++-------
 .../main/index_loader.html.deploy             | 49 ++++++++++++-------
 .../presentationeditor/main/index_loader.html | 46 ++++++++++-------
 .../main/index_loader.html.deploy             | 49 ++++++++++++-------
 apps/spreadsheeteditor/main/index_loader.html | 47 +++++++++++-------
 .../main/index_loader.html.deploy             | 49 ++++++++++++-------
 8 files changed, 188 insertions(+), 112 deletions(-)

diff --git a/apps/common/main/lib/controller/Themes.js b/apps/common/main/lib/controller/Themes.js
index 4f964cd70..f52e28893 100644
--- a/apps/common/main/lib/controller/Themes.js
+++ b/apps/common/main/lib/controller/Themes.js
@@ -232,7 +232,14 @@ define([
                                     !classname.startsWith('theme-type-') && themes_map[classname] )
                             {
                                 theme_name = classname;
-                                Common.localStorage.setItem('ui-theme-id', theme_name);
+                                // Common.localStorage.setItem('ui-theme-id', theme_name);
+                                var theme_obj = {
+                                    id: theme_name,
+                                    type: themes_map[theme_name].type,
+                                };
+
+                                Common.localStorage.setItem('ui-theme', JSON.stringify(theme_obj));
+
                             }
                         });
                 }
diff --git a/apps/common/main/lib/util/htmlutils.js b/apps/common/main/lib/util/htmlutils.js
index 5b511ce8f..a910a6922 100644
--- a/apps/common/main/lib/util/htmlutils.js
+++ b/apps/common/main/lib/util/htmlutils.js
@@ -61,14 +61,14 @@ if ( !!params.uitheme && checkLocalStorage && !localStorage.getItem("ui-theme-id
     if ( params.uitheme == 'default-light' )
         params.uitheme = 'theme-classic-light';
 
-    localStorage.setItem("ui-theme-id", params.uitheme);
+    localStorage.removeItem("ui-theme");
 }
 
-var ui_theme_name = checkLocalStorage ? localStorage.getItem("ui-theme-id") : undefined;
+var ui_theme_name = checkLocalStorage && localStorage.getItem("ui-theme-id") ? localStorage.getItem("ui-theme-id") : params.uitheme;
 if ( !ui_theme_name ) {
     if ( window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches ) {
         ui_theme_name = 'theme-dark';
-        checkLocalStorage && localStorage.setItem("ui-theme-id", ui_theme_name);
+        checkLocalStorage && localStorage.removeItem("ui-theme");
     }
 }
 if ( !!ui_theme_name ) {
diff --git a/apps/documenteditor/main/index_loader.html b/apps/documenteditor/main/index_loader.html
index ec8d05340..29cd5630c 100644
--- a/apps/documenteditor/main/index_loader.html
+++ b/apps/documenteditor/main/index_loader.html
@@ -10,6 +10,10 @@
     <!-- splash -->
 
     <style type="text/css">
+        .theme-dark {
+            --romb-start-color: #555;
+        }
+
         .loadmask {
             left: 0;
             top: 0;
@@ -53,6 +57,12 @@
             font-size: 16px;
             margin-bottom: 5px;
         }
+        .theme-dark .loadmask {
+            background-color: #555;
+        }
+        .theme-dark .loader-page-text {
+            color: rgba(255, 255, 255, 0.8);
+        }
         .romb {
             width: 40px;
             height: 40px;
@@ -99,8 +109,8 @@
         @-webkit-keyframes red {
             0%    { top:120px; background: #de7a59; }
             10%    { top:120px; background: #F2CBBF; }
-            14%    { background: #f4f4f4; top:120px; }
-            15%    { background: #f4f4f4; top:0;}
+            14%    { background: #f4f4f4; background: var(--romb-start-color,#f4f4f4); top:120px; }
+            15%    { background: #f4f4f4; background: var(--romb-start-color,#f4f4f4); top:0;}
             20%    { background: #E6E4E4; }
             30%    { background: #D2D2D2; }
             40%    { top:120px; }
@@ -109,8 +119,8 @@
         @keyframes red {
             0%    { top:120px; background: #de7a59; }
             10%    { top:120px; background: #F2CBBF; }
-            14%    { background: #f4f4f4; top:120px; }
-            15%    { background: #f4f4f4; top:0; }
+            14%    { background: #f4f4f4; background: var(--romb-start-color,#f4f4f4); top:120px; }
+            15%    { background: #f4f4f4; background: var(--romb-start-color,#f4f4f4); top:0; }
             20%    { background: #E6E4E4; }
             30%    { background: #D2D2D2; }
             40%    { top:120px; }
@@ -119,9 +129,9 @@
         @-webkit-keyframes green {
             0%    { top:110px; background: #a1cb5c; opacity:1; }
             10%    { top:110px; background: #CBE0AC; opacity:1; }
-            14%    { background: #f4f4f4; top:110px; opacity:1; }
-            15%    { background: #f4f4f4; top:0; opacity:1; }
-            20%    { background: #f4f4f4; top:0; opacity:0; }
+            14%    { background: #f4f4f4; top:110px; background: var(--romb-start-color,#f4f4f4); opacity:1; }
+            15%    { background: #f4f4f4; top:0; background: var(--romb-start-color,#f4f4f4); opacity:1; }
+            20%    { background: #f4f4f4; top:0; background: var(--romb-start-color,#f4f4f4); opacity:0; }
             25%    { background: #EFEFEF; top:0; opacity:1; }
             30%    { background:#E6E4E4; }
             70%    { top:110px; }
@@ -130,9 +140,9 @@
         @keyframes green {
             0%    { top:110px; background: #a1cb5c; opacity:1; }
             10%    { top:110px; background: #CBE0AC; opacity:1; }
-            14%    { background: #f4f4f4; top:110px; opacity:1; }
-            15%    { background: #f4f4f4; top:0; opacity:1; }
-            20%    { background: #f4f4f4; top:0; opacity:0; }
+            14%    { background: #f4f4f4; top:110px; background: var(--romb-start-color,#f4f4f4); opacity:1; }
+            15%    { background: #f4f4f4; top:0; background: var(--romb-start-color,#f4f4f4); opacity:1; }
+            20%    { background: #f4f4f4; top:0; background: var(--romb-start-color,#f4f4f4); opacity:0; }
             25%    { background: #EFEFEF; top:0; opacity:1; }
             30%    { background:#E6E4E4; }
             70%    { top:110px; }
@@ -141,19 +151,19 @@
         @-webkit-keyframes blue {
             0%    { top:100px; background: #55bce6; opacity:1; }
             10%    { top:100px; background: #BFE8F8; opacity:1; }
-            14%    { background: #f4f4f4; top:100px; opacity:1; }
-            15%    { background: #f4f4f4; top:0; opacity:1; }
-            20%    { background: #f4f4f4; top:0; opacity:0; }
-            25%    { background: #f4f4f4; top:0; opacity:0; }
+            14%    { background: #f4f4f4; background: var(--romb-start-color,#f4f4f4); top:100px; opacity:1; }
+            15%    { background: #f4f4f4; background: var(--romb-start-color,#f4f4f4); top:0; opacity:1; }
+            20%    { background: #f4f4f4; background: var(--romb-start-color,#f4f4f4); top:0; opacity:0; }
+            25%    { background: #f4f4f4; background: var(--romb-start-color,#f4f4f4); top:0; opacity:0; }
             45%    { background: #EFEFEF; top:0; opacity:0.2; }
             100%    { top:100px; background: #55bce6; }
         }
         @keyframes blue {
             0%    { top:100px; background: #55bce6; opacity:1; }
             10%    { top:100px; background: #BFE8F8; opacity:1; }
-            14%    { background: #f4f4f4; top:100px; opacity:1; }
-            15%    { background: #f4f4f4; top:0; opacity:1; }
-            20%    { background: #f4f4f4; top:0; opacity:0; }
+            14%    { background: #f4f4f4; background: var(--romb-start-color,#f4f4f4); top:100px; opacity:1; }
+            15%    { background: #f4f4f4; background: var(--romb-start-color,#f4f4f4); top:0; opacity:1; }
+            20%    { background: #f4f4f4; background: var(--romb-start-color,#f4f4f4); top:0; opacity:0; }
             25%    { background: #fff; top:0; opacity:0; }
             45%    { background: #EFEFEF; top:0; opacity:0.2; }
             100%    { top:100px; background: #55bce6; }
@@ -254,6 +264,7 @@
     <!-- debug end -->
 </head>
 <body>
+<script src="../../common/main/lib/util/htmlutils.js"></script>
 <div id="viewport"></div>
 
 <script src="../../../vendor/svg-injector/svg-injector.min.js"></script>
diff --git a/apps/documenteditor/main/index_loader.html.deploy b/apps/documenteditor/main/index_loader.html.deploy
index 98047eef3..bdda3ff4e 100644
--- a/apps/documenteditor/main/index_loader.html.deploy
+++ b/apps/documenteditor/main/index_loader.html.deploy
@@ -11,6 +11,10 @@
     <!-- splash -->
 
     <style type="text/css">
+        .theme-dark {
+            --romb-start-color: #555;
+        }
+
         .loadmask {
             left: 0;
             top: 0;
@@ -61,6 +65,14 @@
             margin-bottom: 5px;
         }
 
+        .theme-dark .loadmask {
+            background-color: #555;
+        }
+
+        .theme-dark .loader-page-text {
+            color: rgba(255, 255, 255, 0.8);
+        }
+
         .romb {
             width: 40px;
             height: 40px;
@@ -111,8 +123,8 @@
         @-webkit-keyframes red {
               0%    { top:120px; background: #de7a59; }
              10%    { top:120px; background: #F2CBBF; }
-             14%    { background: #f4f4f4; top:120px; }
-             15%    { background: #f4f4f4; top:0;}
+             14%    { background: #f4f4f4; background: var(--romb-start-color,#f4f4f4); top:120px; }
+             15%    { background: #f4f4f4; background: var(--romb-start-color,#f4f4f4); top:0;}
              20%    { background: #E6E4E4; }
              30%    { background: #D2D2D2; }
              40%    { top:120px; }
@@ -122,8 +134,8 @@
         @keyframes red {
               0%    { top:120px; background: #de7a59; }
              10%    { top:120px; background: #F2CBBF; }
-             14%    { background: #f4f4f4; top:120px; }
-             15%    { background: #f4f4f4; top:0; }
+             14%    { background: #f4f4f4; background: var(--romb-start-color,#f4f4f4); top:120px; }
+             15%    { background: #f4f4f4; background: var(--romb-start-color,#f4f4f4); top:0;}
              20%    { background: #E6E4E4; }
              30%    { background: #D2D2D2; }
              40%    { top:120px; }
@@ -133,9 +145,9 @@
         @-webkit-keyframes green {
               0%    { top:110px; background: #a1cb5c; opacity:1; }
              10%    { top:110px; background: #CBE0AC; opacity:1; }
-             14%    { background: #f4f4f4; top:110px; opacity:1; }
-             15%    { background: #f4f4f4; top:0; opacity:1; }
-             20%    { background: #f4f4f4; top:0; opacity:0; }
+             14%    { background: #f4f4f4; top:110px; background: var(--romb-start-color,#f4f4f4); opacity:1; }
+             15%    { background: #f4f4f4; top:0; background: var(--romb-start-color,#f4f4f4); opacity:1; }
+             20%    { background: #f4f4f4; top:0; background: var(--romb-start-color,#f4f4f4); opacity:0; }
              25%    { background: #EFEFEF; top:0; opacity:1; }
              30%    { background:#E6E4E4; }
              70%    { top:110px; }
@@ -145,9 +157,9 @@
         @keyframes green {
               0%    { top:110px; background: #a1cb5c; opacity:1; }
              10%    { top:110px; background: #CBE0AC; opacity:1; }
-             14%    { background: #f4f4f4; top:110px; opacity:1; }
-             15%    { background: #f4f4f4; top:0; opacity:1; }
-             20%    { background: #f4f4f4; top:0; opacity:0; }
+             14%    { background: #f4f4f4; top:110px; background: var(--romb-start-color,#f4f4f4); opacity:1; }
+             15%    { background: #f4f4f4; top:0; background: var(--romb-start-color,#f4f4f4); opacity:1; }
+             20%    { background: #f4f4f4; top:0; background: var(--romb-start-color,#f4f4f4); opacity:0; }
              25%    { background: #EFEFEF; top:0; opacity:1; }
              30%    { background:#E6E4E4; }
              70%    { top:110px; }
@@ -157,10 +169,10 @@
         @-webkit-keyframes blue {
               0%    { top:100px; background: #55bce6; opacity:1; }
              10%    { top:100px; background: #BFE8F8; opacity:1; }
-             14%    { background: #f4f4f4; top:100px; opacity:1; }
-             15%    { background: #f4f4f4; top:0; opacity:1; }
-             20%    { background: #f4f4f4; top:0; opacity:0; }
-             25%    { background: #f4f4f4; top:0; opacity:0; }
+             14%    { background: #f4f4f4; background: var(--romb-start-color,#f4f4f4); top:100px; opacity:1; }
+             15%    { background: #f4f4f4; background: var(--romb-start-color,#f4f4f4); top:0; opacity:1; }
+             20%    { background: #f4f4f4; background: var(--romb-start-color,#f4f4f4); top:0; opacity:0; }
+             25%    { background: #f4f4f4; background: var(--romb-start-color,#f4f4f4); top:0; opacity:0; }
              45%    { background: #EFEFEF; top:0; opacity:0.2; }
             100%    { top:100px; background: #55bce6; }
         }
@@ -168,10 +180,10 @@
         @keyframes blue {
               0%    { top:100px; background: #55bce6; opacity:1; }
              10%    { top:100px; background: #BFE8F8; opacity:1; }
-             14%    { background: #f4f4f4; top:100px; opacity:1; }
-             15%    { background: #f4f4f4; top:0; opacity:1; }
-             20%    { background: #f4f4f4; top:0; opacity:0; }
-             25%    { background: #f4f4f4; top:0; opacity:0; }
+             14%    { background: #f4f4f4; background: var(--romb-start-color,#f4f4f4); top:100px; opacity:1; }
+             15%    { background: #f4f4f4; background: var(--romb-start-color,#f4f4f4); top:0; opacity:1; }
+             20%    { background: #f4f4f4; background: var(--romb-start-color,#f4f4f4); top:0; opacity:0; }
+             25%    { background: #f4f4f4; background: var(--romb-start-color,#f4f4f4); top:0; opacity:0; }
              45%    { background: #EFEFEF; top:0; opacity:0.2; }
             100%    { top:100px; background: #55bce6; }
         }
@@ -275,6 +287,7 @@
     <link rel="stylesheet" type="text/css" href="../../../apps/documenteditor/main/resources/css/app.css">
 </head>
 <body>
+    <script src="../../common/main/lib/util/htmlutils.js"></script>
 
     <script>
         window.requireTimeourError = function(){
diff --git a/apps/presentationeditor/main/index_loader.html b/apps/presentationeditor/main/index_loader.html
index 96110678b..cfdb61213 100644
--- a/apps/presentationeditor/main/index_loader.html
+++ b/apps/presentationeditor/main/index_loader.html
@@ -9,6 +9,9 @@
 
     <!-- splash -->
     <style type="text/css">
+        .theme-dark {
+            --romb-start-color: #555;
+        }
         .loadmask {
             left: 0;
             top: 0;
@@ -52,6 +55,12 @@
             font-size: 16px;
             margin-bottom: 5px;
         }
+        .theme-dark .loadmask {
+            background-color: #555;
+        }
+        .theme-dark .loader-page-text {
+            color: rgba(255, 255, 255, 0.8);
+        }
         .romb {
             width: 40px;
             height: 40px;
@@ -98,8 +107,8 @@
         @-webkit-keyframes red {
             0%    { top:120px; background: #de7a59; }
             10%    { top:120px; background: #F2CBBF; }
-            14%    { background: #f4f4f4; top:120px; }
-            15%    { background: #f4f4f4; top:0;}
+            14%    { background: #f4f4f4; background: var(--romb-start-color,#f4f4f4); top:120px; }
+            15%    { background: #f4f4f4; background: var(--romb-start-color,#f4f4f4); top:0;}
             20%    { background: #E6E4E4; }
             30%    { background: #D2D2D2; }
             40%    { top:120px; }
@@ -108,8 +117,8 @@
         @keyframes red {
             0%    { top:120px; background: #de7a59; }
             10%    { top:120px; background: #F2CBBF; }
-            14%    { background: #f4f4f4; top:120px; }
-            15%    { background: #f4f4f4; top:0; }
+            14%    { background: #f4f4f4; background: var(--romb-start-color,#f4f4f4); top:120px; }
+            15%    { background: #f4f4f4; background: var(--romb-start-color,#f4f4f4); top:0;}
             20%    { background: #E6E4E4; }
             30%    { background: #D2D2D2; }
             40%    { top:120px; }
@@ -118,9 +127,9 @@
         @-webkit-keyframes green {
             0%    { top:110px; background: #a1cb5c; opacity:1; }
             10%    { top:110px; background: #CBE0AC; opacity:1; }
-            14%    { background: #f4f4f4; top:110px; opacity:1; }
-            15%    { background: #f4f4f4; top:0; opacity:1; }
-            20%    { background: #f4f4f4; top:0; opacity:0; }
+            14%    { background: #f4f4f4; top:110px; background: var(--romb-start-color,#f4f4f4); opacity:1; }
+            15%    { background: #f4f4f4; top:0; background: var(--romb-start-color,#f4f4f4); opacity:1; }
+            20%    { background: #f4f4f4; top:0; background: var(--romb-start-color,#f4f4f4); opacity:0; }
             25%    { background: #EFEFEF; top:0; opacity:1; }
             30%    { background:#E6E4E4; }
             70%    { top:110px; }
@@ -129,9 +138,9 @@
         @keyframes green {
             0%    { top:110px; background: #a1cb5c; opacity:1; }
             10%    { top:110px; background: #CBE0AC; opacity:1; }
-            14%    { background: #f4f4f4; top:110px; opacity:1; }
-            15%    { background: #f4f4f4; top:0; opacity:1; }
-            20%    { background: #f4f4f4; top:0; opacity:0; }
+            14%    { background: #f4f4f4; top:110px; background: var(--romb-start-color,#f4f4f4); opacity:1; }
+            15%    { background: #f4f4f4; top:0; background: var(--romb-start-color,#f4f4f4); opacity:1; }
+            20%    { background: #f4f4f4; top:0; background: var(--romb-start-color,#f4f4f4); opacity:0; }
             25%    { background: #EFEFEF; top:0; opacity:1; }
             30%    { background:#E6E4E4; }
             70%    { top:110px; }
@@ -140,20 +149,20 @@
         @-webkit-keyframes blue {
             0%    { top:100px; background: #55bce6; opacity:1; }
             10%    { top:100px; background: #BFE8F8; opacity:1; }
-            14%    { background: #f4f4f4; top:100px; opacity:1; }
-            15%    { background: #f4f4f4; top:0; opacity:1; }
-            20%    { background: #f4f4f4; top:0; opacity:0; }
-            25%    { background: #f4f4f4; top:0; opacity:0; }
+            14%    { background: #f4f4f4; background: var(--romb-start-color,#f4f4f4); top:100px; opacity:1; }
+            15%    { background: #f4f4f4; background: var(--romb-start-color,#f4f4f4); top:0; opacity:1; }
+            20%    { background: #f4f4f4; background: var(--romb-start-color,#f4f4f4); top:0; opacity:0; }
+            25%    { background: #f4f4f4; background: var(--romb-start-color,#f4f4f4); top:0; opacity:0; }
             45%    { background: #EFEFEF; top:0; opacity:0.2; }
             100%    { top:100px; background: #55bce6; }
         }
         @keyframes blue {
             0%    { top:100px; background: #55bce6; opacity:1; }
             10%    { top:100px; background: #BFE8F8; opacity:1; }
-            14%    { background: #f4f4f4; top:100px; opacity:1; }
-            15%    { background: #f4f4f4; top:0; opacity:1; }
-            20%    { background: #f4f4f4; top:0; opacity:0; }
-            25%    { background: #f4f4f4; top:0; opacity:0; }
+            14%    { background: #f4f4f4; background: var(--romb-start-color,#f4f4f4); top:100px; opacity:1; }
+            15%    { background: #f4f4f4; background: var(--romb-start-color,#f4f4f4); top:0; opacity:1; }
+            20%    { background: #f4f4f4; background: var(--romb-start-color,#f4f4f4); top:0; opacity:0; }
+            25%    { background: #f4f4f4; background: var(--romb-start-color,#f4f4f4); top:0; opacity:0; }
             45%    { background: #EFEFEF; top:0; opacity:0.2; }
             100%    { top:100px; background: #55bce6; }
         }
@@ -245,6 +254,7 @@
     <!-- debug end -->
 </head>
 <body>
+<script src="../../common/main/lib/util/htmlutils.js"></script>
 <div id="viewport"></div>
 
 <script src="../../../vendor/svg-injector/svg-injector.min.js"></script>
diff --git a/apps/presentationeditor/main/index_loader.html.deploy b/apps/presentationeditor/main/index_loader.html.deploy
index abec1311c..108e60c98 100644
--- a/apps/presentationeditor/main/index_loader.html.deploy
+++ b/apps/presentationeditor/main/index_loader.html.deploy
@@ -11,6 +11,10 @@
     <!-- splash -->        
 
     <style type="text/css">
+        .theme-dark {
+            --romb-start-color: #555;
+        }
+
         .loadmask {
             left: 0;
             top: 0;
@@ -61,6 +65,14 @@
             margin-bottom: 5px;
         }
 
+        .theme-dark .loadmask {
+            background-color: #555;
+        }
+
+        .theme-dark .loader-page-text {
+            color: rgba(255, 255, 255, 0.8);
+        }
+
         .romb {
             width: 40px;
             height: 40px;
@@ -111,8 +123,8 @@
         @-webkit-keyframes red {
               0%    { top:120px; background: #de7a59; }
              10%    { top:120px; background: #F2CBBF; }
-             14%    { background: #f4f4f4; top:120px; }
-             15%    { background: #f4f4f4; top:0;}
+             14%    { background: #f4f4f4; background: var(--romb-start-color,#f4f4f4); top:120px; }
+             15%    { background: #f4f4f4; background: var(--romb-start-color,#f4f4f4); top:0;}
              20%    { background: #E6E4E4; }
              30%    { background: #D2D2D2; }
              40%    { top:120px; }
@@ -122,8 +134,8 @@
         @keyframes red {
               0%    { top:120px; background: #de7a59; }
              10%    { top:120px; background: #F2CBBF; }
-             14%    { background: #f4f4f4; top:120px; }
-             15%    { background: #f4f4f4; top:0; }
+             14%    { background: #f4f4f4; background: var(--romb-start-color,#f4f4f4); top:120px; }
+             15%    { background: #f4f4f4; background: var(--romb-start-color,#f4f4f4); top:0;}
              20%    { background: #E6E4E4; }
              30%    { background: #D2D2D2; }
              40%    { top:120px; }
@@ -133,9 +145,9 @@
         @-webkit-keyframes green {
               0%    { top:110px; background: #a1cb5c; opacity:1; }
              10%    { top:110px; background: #CBE0AC; opacity:1; }
-             14%    { background: #f4f4f4; top:110px; opacity:1; }
-             15%    { background: #f4f4f4; top:0; opacity:1; }
-             20%    { background: #f4f4f4; top:0; opacity:0; }
+             14%    { background: #f4f4f4; top:110px; background: var(--romb-start-color,#f4f4f4); opacity:1; }
+             15%    { background: #f4f4f4; top:0; background: var(--romb-start-color,#f4f4f4); opacity:1; }
+             20%    { background: #f4f4f4; top:0; background: var(--romb-start-color,#f4f4f4); opacity:0; }
              25%    { background: #EFEFEF; top:0; opacity:1; }
              30%    { background:#E6E4E4; }
              70%    { top:110px; }
@@ -145,9 +157,9 @@
         @keyframes green {
               0%    { top:110px; background: #a1cb5c; opacity:1; }
              10%    { top:110px; background: #CBE0AC; opacity:1; }
-             14%    { background: #f4f4f4; top:110px; opacity:1; }
-             15%    { background: #f4f4f4; top:0; opacity:1; }
-             20%    { background: #f4f4f4; top:0; opacity:0; }
+             14%    { background: #f4f4f4; top:110px; background: var(--romb-start-color,#f4f4f4); opacity:1; }
+             15%    { background: #f4f4f4; top:0; background: var(--romb-start-color,#f4f4f4); opacity:1; }
+             20%    { background: #f4f4f4; top:0; background: var(--romb-start-color,#f4f4f4); opacity:0; }
              25%    { background: #EFEFEF; top:0; opacity:1; }
              30%    { background:#E6E4E4; }
              70%    { top:110px; }
@@ -157,10 +169,10 @@
         @-webkit-keyframes blue {
               0%    { top:100px; background: #55bce6; opacity:1; }
              10%    { top:100px; background: #BFE8F8; opacity:1; }
-             14%    { background: #f4f4f4; top:100px; opacity:1; }
-             15%    { background: #f4f4f4; top:0; opacity:1; }
-             20%    { background: #f4f4f4; top:0; opacity:0; }
-             25%    { background: #f4f4f4; top:0; opacity:0; }
+             14%    { background: #f4f4f4; background: var(--romb-start-color,#f4f4f4); top:100px; opacity:1; }
+             15%    { background: #f4f4f4; background: var(--romb-start-color,#f4f4f4); top:0; opacity:1; }
+             20%    { background: #f4f4f4; background: var(--romb-start-color,#f4f4f4); top:0; opacity:0; }
+             25%    { background: #f4f4f4; background: var(--romb-start-color,#f4f4f4); top:0; opacity:0; }
              45%    { background: #EFEFEF; top:0; opacity:0.2; }
             100%    { top:100px; background: #55bce6; }
         }
@@ -168,10 +180,10 @@
         @keyframes blue {
               0%    { top:100px; background: #55bce6; opacity:1; }
              10%    { top:100px; background: #BFE8F8; opacity:1; }
-             14%    { background: #f4f4f4; top:100px; opacity:1; }
-             15%    { background: #f4f4f4; top:0; opacity:1; }
-             20%    { background: #f4f4f4; top:0; opacity:0; }
-             25%    { background: #f4f4f4; top:0; opacity:0; }
+             14%    { background: #f4f4f4; background: var(--romb-start-color,#f4f4f4); top:100px; opacity:1; }
+             15%    { background: #f4f4f4; background: var(--romb-start-color,#f4f4f4); top:0; opacity:1; }
+             20%    { background: #f4f4f4; background: var(--romb-start-color,#f4f4f4); top:0; opacity:0; }
+             25%    { background: #f4f4f4; background: var(--romb-start-color,#f4f4f4); top:0; opacity:0; }
              45%    { background: #EFEFEF; top:0; opacity:0.2; }
             100%    { top:100px; background: #55bce6; }
         }
@@ -275,6 +287,7 @@
     <link rel="stylesheet" type="text/css" href="../../../apps/presentationeditor/main/resources/css/app.css">
 </head>
 <body>
+    <script src="../../common/main/lib/util/htmlutils.js"></script>
 
     <script>
         window.requireTimeourError = function(){
diff --git a/apps/spreadsheeteditor/main/index_loader.html b/apps/spreadsheeteditor/main/index_loader.html
index 921ad7e46..e0b887b0f 100644
--- a/apps/spreadsheeteditor/main/index_loader.html
+++ b/apps/spreadsheeteditor/main/index_loader.html
@@ -8,6 +8,9 @@
 
     <!-- splash -->
     <style type="text/css">
+        .theme-dark {
+            --romb-start-color: #555;
+        }
         .loadmask {
             left: 0;
             top: 0;
@@ -51,6 +54,12 @@
             font-size: 16px;
             margin-bottom: 5px;
         }
+        .theme-dark .loadmask {
+            background-color: #555;
+        }
+        .theme-dark .loader-page-text {
+            color: rgba(255, 255, 255, 0.8);
+        }
         .romb {
             width: 40px;
             height: 40px;
@@ -97,8 +106,8 @@
         @-webkit-keyframes red {
             0%    { top:120px; background: #de7a59; }
             10%    { top:120px; background: #F2CBBF; }
-            14%    { background: #f4f4f4; top:120px; }
-            15%    { background: #f4f4f4; top:0;}
+            14%    { background: #f4f4f4; background: var(--romb-start-color,#f4f4f4); top:120px; }
+            15%    { background: #f4f4f4; background: var(--romb-start-color,#f4f4f4); top:0;}
             20%    { background: #E6E4E4; }
             30%    { background: #D2D2D2; }
             40%    { top:120px; }
@@ -107,8 +116,8 @@
         @keyframes red {
             0%    { top:120px; background: #de7a59; }
             10%    { top:120px; background: #F2CBBF; }
-            14%    { background: #f4f4f4; top:120px; }
-            15%    { background: #f4f4f4; top:0; }
+            14%    { background: #f4f4f4; background: var(--romb-start-color,#f4f4f4); top:120px; }
+            15%    { background: #f4f4f4; background: var(--romb-start-color,#f4f4f4); top:0;}
             20%    { background: #E6E4E4; }
             30%    { background: #D2D2D2; }
             40%    { top:120px; }
@@ -117,9 +126,9 @@
         @-webkit-keyframes green {
             0%    { top:110px; background: #a1cb5c; opacity:1; }
             10%    { top:110px; background: #CBE0AC; opacity:1; }
-            14%    { background: #f4f4f4; top:110px; opacity:1; }
-            15%    { background: #f4f4f4; top:0; opacity:1; }
-            20%    { background: #f4f4f4; top:0; opacity:0; }
+            14%    { background: #f4f4f4; top:110px; background: var(--romb-start-color,#f4f4f4); opacity:1; }
+            15%    { background: #f4f4f4; top:0; background: var(--romb-start-color,#f4f4f4); opacity:1; }
+            20%    { background: #f4f4f4; top:0; background: var(--romb-start-color,#f4f4f4); opacity:0; }
             25%    { background: #EFEFEF; top:0; opacity:1; }
             30%    { background:#E6E4E4; }
             70%    { top:110px; }
@@ -128,9 +137,9 @@
         @keyframes green {
             0%    { top:110px; background: #a1cb5c; opacity:1; }
             10%    { top:110px; background: #CBE0AC; opacity:1; }
-            14%    { background: #f4f4f4; top:110px; opacity:1; }
-            15%    { background: #f4f4f4; top:0; opacity:1; }
-            20%    { background: #f4f4f4; top:0; opacity:0; }
+            14%    { background: #f4f4f4; top:110px; background: var(--romb-start-color,#f4f4f4); opacity:1; }
+            15%    { background: #f4f4f4; top:0; background: var(--romb-start-color,#f4f4f4); opacity:1; }
+            20%    { background: #f4f4f4; top:0; background: var(--romb-start-color,#f4f4f4); opacity:0; }
             25%    { background: #EFEFEF; top:0; opacity:1; }
             30%    { background:#E6E4E4; }
             70%    { top:110px; }
@@ -139,20 +148,20 @@
         @-webkit-keyframes blue {
             0%    { top:100px; background: #55bce6; opacity:1; }
             10%    { top:100px; background: #BFE8F8; opacity:1; }
-            14%    { background: #f4f4f4; top:100px; opacity:1; }
-            15%    { background: #f4f4f4; top:0; opacity:1; }
-            20%    { background: #f4f4f4; top:0; opacity:0; }
-            25%    { background: #f4f4f4; top:0; opacity:0; }
+            14%    { background: #f4f4f4; background: var(--romb-start-color,#f4f4f4); top:100px; opacity:1; }
+            15%    { background: #f4f4f4; background: var(--romb-start-color,#f4f4f4); top:0; opacity:1; }
+            20%    { background: #f4f4f4; background: var(--romb-start-color,#f4f4f4); top:0; opacity:0; }
+            25%    { background: #f4f4f4; background: var(--romb-start-color,#f4f4f4); top:0; opacity:0; }
             45%    { background: #EFEFEF; top:0; opacity:0.2; }
             100%    { top:100px; background: #55bce6; }
         }
         @keyframes blue {
             0%    { top:100px; background: #55bce6; opacity:1; }
             10%    { top:100px; background: #BFE8F8; opacity:1; }
-            14%    { background: #f4f4f4; top:100px; opacity:1; }
-            15%    { background: #f4f4f4; top:0; opacity:1; }
-            20%    { background: #f4f4f4; top:0; opacity:0; }
-            25%    { background: #f4f4f4; top:0; opacity:0; }
+            14%    { background: #f4f4f4; background: var(--romb-start-color,#f4f4f4); top:100px; opacity:1; }
+            15%    { background: #f4f4f4; background: var(--romb-start-color,#f4f4f4); top:0; opacity:1; }
+            20%    { background: #f4f4f4; background: var(--romb-start-color,#f4f4f4); top:0; opacity:0; }
+            25%    { background: #f4f4f4; background: var(--romb-start-color,#f4f4f4); top:0; opacity:0; }
             45%    { background: #EFEFEF; top:0; opacity:0.2; }
             100%    { top:100px; background: #55bce6; }
         }
@@ -246,7 +255,7 @@
     <!-- debug end -->
 </head>
 <body>
-
+<script src="../../common/main/lib/util/htmlutils.js"></script>
 <div id="viewport"></div>
 
 <script src="../../../vendor/svg-injector/svg-injector.min.js"></script>
diff --git a/apps/spreadsheeteditor/main/index_loader.html.deploy b/apps/spreadsheeteditor/main/index_loader.html.deploy
index a37a6dd03..dead86926 100644
--- a/apps/spreadsheeteditor/main/index_loader.html.deploy
+++ b/apps/spreadsheeteditor/main/index_loader.html.deploy
@@ -10,6 +10,10 @@
 
     <!-- splash -->
     <style type="text/css">
+        .theme-dark {
+            --romb-start-color: #555;
+        }
+
         .loadmask {
             left: 0;
             top: 0;
@@ -60,6 +64,14 @@
             margin-bottom: 5px;
         }
 
+        .theme-dark .loadmask {
+            background-color: #555;
+        }
+
+        .theme-dark .loader-page-text {
+            color: rgba(255, 255, 255, 0.8);
+        }
+
         .romb {
             width: 40px;
             height: 40px;
@@ -110,8 +122,8 @@
         @-webkit-keyframes red {
               0%    { top:120px; background: #de7a59; }
              10%    { top:120px; background: #F2CBBF; }
-             14%    { background: #f4f4f4; top:120px; }
-             15%    { background: #f4f4f4; top:0;}
+             14%    { background: #f4f4f4; background: var(--romb-start-color,#f4f4f4); top:120px; }
+             15%    { background: #f4f4f4; background: var(--romb-start-color,#f4f4f4); top:0;}
              20%    { background: #E6E4E4; }
              30%    { background: #D2D2D2; }
              40%    { top:120px; }
@@ -121,8 +133,8 @@
         @keyframes red {
               0%    { top:120px; background: #de7a59; }
              10%    { top:120px; background: #F2CBBF; }
-             14%    { background: #f4f4f4; top:120px; }
-             15%    { background: #f4f4f4; top:0; }
+             14%    { background: #f4f4f4; background: var(--romb-start-color,#f4f4f4); top:120px; }
+             15%    { background: #f4f4f4; background: var(--romb-start-color,#f4f4f4); top:0;}
              20%    { background: #E6E4E4; }
              30%    { background: #D2D2D2; }
              40%    { top:120px; }
@@ -132,9 +144,9 @@
         @-webkit-keyframes green {
               0%    { top:110px; background: #a1cb5c; opacity:1; }
              10%    { top:110px; background: #CBE0AC; opacity:1; }
-             14%    { background: #f4f4f4; top:110px; opacity:1; }
-             15%    { background: #f4f4f4; top:0; opacity:1; }
-             20%    { background: #f4f4f4; top:0; opacity:0; }
+             14%    { background: #f4f4f4; top:110px; background: var(--romb-start-color,#f4f4f4); opacity:1; }
+             15%    { background: #f4f4f4; top:0; background: var(--romb-start-color,#f4f4f4); opacity:1; }
+             20%    { background: #f4f4f4; top:0; background: var(--romb-start-color,#f4f4f4); opacity:0; }
              25%    { background: #EFEFEF; top:0; opacity:1; }
              30%    { background:#E6E4E4; }
              70%    { top:110px; }
@@ -144,9 +156,9 @@
         @keyframes green {
               0%    { top:110px; background: #a1cb5c; opacity:1; }
              10%    { top:110px; background: #CBE0AC; opacity:1; }
-             14%    { background: #f4f4f4; top:110px; opacity:1; }
-             15%    { background: #f4f4f4; top:0; opacity:1; }
-             20%    { background: #f4f4f4; top:0; opacity:0; }
+             14%    { background: #f4f4f4; top:110px; background: var(--romb-start-color,#f4f4f4); opacity:1; }
+             15%    { background: #f4f4f4; top:0; background: var(--romb-start-color,#f4f4f4); opacity:1; }
+             20%    { background: #f4f4f4; top:0; background: var(--romb-start-color,#f4f4f4); opacity:0; }
              25%    { background: #EFEFEF; top:0; opacity:1; }
              30%    { background:#E6E4E4; }
              70%    { top:110px; }
@@ -156,10 +168,10 @@
         @-webkit-keyframes blue {
               0%    { top:100px; background: #55bce6; opacity:1; }
              10%    { top:100px; background: #BFE8F8; opacity:1; }
-             14%    { background: #f4f4f4; top:100px; opacity:1; }
-             15%    { background: #f4f4f4; top:0; opacity:1; }
-             20%    { background: #f4f4f4; top:0; opacity:0; }
-             25%    { background: #f4f4f4; top:0; opacity:0; }
+             14%    { background: #f4f4f4; background: var(--romb-start-color,#f4f4f4); top:100px; opacity:1; }
+             15%    { background: #f4f4f4; background: var(--romb-start-color,#f4f4f4); top:0; opacity:1; }
+             20%    { background: #f4f4f4; background: var(--romb-start-color,#f4f4f4); top:0; opacity:0; }
+             25%    { background: #f4f4f4; background: var(--romb-start-color,#f4f4f4); top:0; opacity:0; }
              45%    { background: #EFEFEF; top:0; opacity:0.2; }
             100%    { top:100px; background: #55bce6; }
         }
@@ -167,10 +179,10 @@
         @keyframes blue {
               0%    { top:100px; background: #55bce6; opacity:1; }
              10%    { top:100px; background: #BFE8F8; opacity:1; }
-             14%    { background: #f4f4f4; top:100px; opacity:1; }
-             15%    { background: #f4f4f4; top:0; opacity:1; }
-             20%    { background: #f4f4f4; top:0; opacity:0; }
-             25%    { background: #f4f4f4; top:0; opacity:0; }
+             14%    { background: #f4f4f4; background: var(--romb-start-color,#f4f4f4); top:100px; opacity:1; }
+             15%    { background: #f4f4f4; background: var(--romb-start-color,#f4f4f4); top:0; opacity:1; }
+             20%    { background: #f4f4f4; background: var(--romb-start-color,#f4f4f4); top:0; opacity:0; }
+             25%    { background: #f4f4f4; background: var(--romb-start-color,#f4f4f4); top:0; opacity:0; }
              45%    { background: #EFEFEF; top:0; opacity:0.2; }
             100%    { top:100px; background: #55bce6; }
         }
@@ -275,6 +287,7 @@
     <link rel="stylesheet" type="text/css" href="../../../apps/spreadsheeteditor/main/resources/css/app.css">
 </head>
 <body>
+    <script src="../../common/main/lib/util/htmlutils.js"></script>
     <script>
         window.requireTimeourError = function(){
             var reqerr;