[mobile] fix bug 58272

apps/common/mobile/lib/controller/Themes.js

@@ -12,6 +12,51 @@ class ThemesController {
                 id: 'theme-light',
                 type: 'light'
             }};
+
+        this.name_colors = [
+            "canvas-background",
+            "canvas-content-background",
+            "canvas-page-border",
+
+            "canvas-ruler-background",
+            "canvas-ruler-border",
+            "canvas-ruler-margins-background",
+            "canvas-ruler-mark",
+            "canvas-ruler-handle-border",
+            "canvas-ruler-handle-border-disabled",
+
+            "canvas-high-contrast",
+            "canvas-high-contrast-disabled",
+
+            "canvas-cell-border",
+            "canvas-cell-title-border",
+            "canvas-cell-title-border-hover",
+            "canvas-cell-title-border-selected",
+            "canvas-cell-title-hover",
+            "canvas-cell-title-selected",
+
+            "canvas-dark-cell-title",
+            "canvas-dark-cell-title-hover",
+            "canvas-dark-cell-title-selected",
+            "canvas-dark-cell-title-border",
+            "canvas-dark-cell-title-border-hover",
+            "canvas-dark-cell-title-border-selected",
+            "canvas-dark-content-background",
+            "canvas-dark-page-border",
+
+            "canvas-scroll-thumb",
+            "canvas-scroll-thumb-hover",
+            "canvas-scroll-thumb-pressed",
+            "canvas-scroll-thumb-border",
+            "canvas-scroll-thumb-border-hover",
+            "canvas-scroll-thumb-border-pressed",
+            "canvas-scroll-arrow",
+            "canvas-scroll-arrow-hover",
+            "canvas-scroll-arrow-pressed",
+            "canvas-scroll-thumb-target",
+            "canvas-scroll-thumb-target-hover",
+            "canvas-scroll-thumb-target-pressed",
+        ];
     }
 
     init() {
@@ -41,6 +86,16 @@ class ThemesController {
         return !!obj ? JSON.parse(obj).type === 'dark' : false;
     }
 
+    get_current_theme_colors(colors) {
+        let out_object = {};
+        const style = getComputedStyle(document.body);
+        colors.forEach((item, index) => {
+            out_object[item] = style.getPropertyValue('--' + item).trim()
+        })
+
+        return out_object;
+    }
+
     switchDarkTheme(dark) {
         const theme = typeof dark == 'object' ? dark : this.themes_map[dark ? 'dark' : 'light'];
         const refresh_only = !!arguments[1];
@@ -53,7 +108,11 @@ class ThemesController {
         $body.addClass(`theme-type-${theme.type}`);
 
         const on_engine_created = api => {
-            api.asc_setSkin(theme.id);
+            let obj = this.get_current_theme_colors(this.name_colors);
+            obj.type = theme.type;
+            obj.name = theme.id;
+
+            api.asc_setSkin(obj);
         };
 
         const api = Common.EditorApi ? Common.EditorApi.get() : undefined;

apps/common/mobile/resources/less/colors-table-dark.less

@@ -33,12 +33,53 @@
 
         --image-border-types-filter: invert(100%) brightness(4);
 
-        --canvas-content-background: #fff;
-        
         --active-opacity-word: fade(#446995, 20%);
         --active-opacity-slide: fade(#AA5252, 20%);
         --active-opacity-cell: fade(#40865C, 20%);
 
         --image-border-types-filter: invert(100%) brightness(4);
+
+        // Canvas
+
+        --canvas-background: #555;
+        --canvas-content-background: #fff;
+        --canvas-page-border: #555;
+
+        --canvas-ruler-background: #555;
+        --canvas-ruler-border: #2A2A2A;
+        --canvas-ruler-margins-background: #444;
+        --canvas-ruler-mark: #b6b6b6;
+        --canvas-ruler-handle-border: #b6b6b6;
+        --canvas-ruler-handle-border-disabled: #808080;
+
+        --canvas-high-contrast: #fff;
+        --canvas-high-contrast-disabled: #ccc;
+
+        --canvas-cell-border: fade(#000, 10%);
+        --canvas-cell-title-border: #757575;
+        --canvas-cell-title-border-hover: #858585;
+        --canvas-cell-title-border-selected: #9e9e9e;
+        --canvas-cell-title-hover: #787878;
+        --canvas-cell-title-selected: #939393;
+
+        --canvas-dark-cell-title: #111;
+        --canvas-dark-cell-title-hover: #000;
+        --canvas-dark-cell-title-selected: #333;
+        --canvas-dark-cell-title-border: #282828;
+        --canvas-dark-cell-title-border-hover: #191919;
+        --canvas-dark-cell-title-border-selected: #474747;
+
+        --canvas-scroll-thumb: #404040;
+        --canvas-scroll-thumb-hover: #999;
+        --canvas-scroll-thumb-pressed: #adadad;
+        --canvas-scroll-thumb-border: #2a2a2a;
+        --canvas-scroll-thumb-border-hover: #999;
+        --canvas-scroll-thumb-border-pressed: #adadad;
+        --canvas-scroll-arrow: #999;
+        --canvas-scroll-arrow-hover: #404040;
+        --canvas-scroll-arrow-pressed: #404040;
+        --canvas-scroll-thumb-target: #999;
+        --canvas-scroll-thumb-target-hover: #404040;
+        --canvas-scroll-thumb-target-pressed: #404040;
     }
 }

apps/common/mobile/resources/less/colors-table.less

@@ -29,13 +29,56 @@
 
     --component-disabled-opacity: .4;
 
-    --canvas-content-background: #fff;
-
     --active-opacity-word: fade(#446995, 30%);
     --active-opacity-slide: fade(#AA5252, 30%);
     --active-opacity-cell: fade(#40865C, 30%);
 
     --image-border-types-filter: none;
+
+    // Canvas
+
+    --canvas-background: #eee;
+    --canvas-content-background: #fff;
+    --canvas-page-border: #ccc;
+
+    --canvas-ruler-background: #fff;
+    --canvas-ruler-border: #cbcbcb;
+    --canvas-ruler-margins-background: #d9d9d9;
+    --canvas-ruler-mark: #555;
+    --canvas-ruler-handle-border: #555;
+    --canvas-ruler-handle-border-disabled: #aaa;
+
+    --canvas-high-contrast: #000;
+    --canvas-high-contrast-disabled: #666;
+
+    --canvas-cell-border: fade(#000, 10%);
+    --canvas-cell-title-hover: #dfdfdf;
+    --canvas-cell-title-selected: #cfcfcf;
+    --canvas-cell-title-border: #d8d8d8;
+    --canvas-cell-title-border-hover: #c9c9c9;
+    --canvas-cell-title-border-selected: #bbb;
+
+    --canvas-dark-cell-title: #444;
+    --canvas-dark-cell-title-hover: #666 ;
+    --canvas-dark-cell-title-selected: #111;
+    --canvas-dark-cell-title-border: #3d3d3d;
+    --canvas-dark-cell-title-border-hover: #5c5c5c;
+    --canvas-dark-cell-title-border-selected: #0f0f0f;
+    --canvas-dark-content-background: #3a3a3a;
+    --canvas-dark-page-border: #2a2a2a;
+
+    --canvas-scroll-thumb: #f7f7f7;
+    --canvas-scroll-thumb-hover: #c0c0c0;
+    --canvas-scroll-thumb-pressed: #adadad;
+    --canvas-scroll-thumb-border: #cbcbcb;
+    --canvas-scroll-thumb-border-hover: #cbcbcb;
+    --canvas-scroll-thumb-border-pressed: #adadad;
+    --canvas-scroll-arrow: #adadad;
+    --canvas-scroll-arrow-hover: #f7f7f7;
+    --canvas-scroll-arrow-pressed: #f7f7f7;
+    --canvas-scroll-thumb-target: #c0c0c0;
+    --canvas-scroll-thumb-target-hover: #f7f7f7;
+    --canvas-scroll-thumb-target-pressed: #f7f7f7;
 }
 
 @brand-word: var(--brand-word);