[common] refactoring Themes controller

apps/common/main/lib/controller/Desktop.js

@@ -446,7 +446,7 @@ define([
                         'modal:close': _onModalDialog.bind(this, 'close'),
                         'modal:hide': _onModalDialog.bind(this, 'hide'),
                         'uitheme:changed' : function (name) {
-                            if (Common.localStorage.getBool('ui-theme-use-system', false)) {
+                            if ( window.uitheme.is_theme_system() ) {
                                 native.execCommand("uitheme:changed", JSON.stringify({name:'theme-system'}));
                             } else {
                                 var theme = Common.UI.Themes.get(name);

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

@@ -75,13 +75,7 @@ define([
             },
         }
 
-        if ( !!window.currentLoaderTheme ) {
-            if ( !themes_map[currentLoaderTheme.id] )
-                themes_map[currentLoaderTheme.id] = currentLoaderTheme;
-            window.currentLoaderTheme = undefined;
-        }
 
-        var is_dark_mode_allowed = true;
         var id_default_light_theme = 'theme-classic-light',
             id_default_dark_theme = 'theme-dark';
 
@@ -204,7 +198,8 @@ define([
             "canvas-select-all-icon"
         ];
 
-        var get_current_theme_colors = function (colors) {
+        var get_current_theme_colors = function (c) {
+            const colors = c || name_colors;
             var out_object = {};
             if ( !(Common.Utils.isIE10 || Common.Utils.isIE11) ) {
                 var style = getComputedStyle(document.body);
@@ -261,6 +256,36 @@ define([
             Common.NotificationCenter.trigger('uitheme:countchanged');
         }
 
+        const check_launched_custom_theme = function () {
+            let theme_id = window.uitheme.id;
+            if ( themes_map[theme_id] ) {
+                if ( themes_map[theme_id].source != 'static') {
+                    const m = document.body.className.match('theme-type-' + themes_map[theme_id].type);
+                    if ( !m )
+                        document.body.classList.add('theme-type-' + themes_map[theme_id].type);
+                    else if ( m.length )
+                        document.body.className = document.body.className.replace(/theme-type-(?:dark|ligth)/i, 'theme-type-' + themes_map[theme_id].type);
+                }
+            } else {
+                theme_id = get_system_default_theme().id;
+
+                document.body.className = document.body.className.replace(/theme-[\w-]+\s?/gi, '').trim();
+                document.body.classList.add(theme_id, 'theme-type-' + themes_map[theme_id].type);
+            }
+
+            const s = Common.localStorage.getItem('ui-theme');
+            if (!s || get_ui_theme_name(s) !== theme_id) {
+                var theme_obj = {
+                    id: theme_id,
+                    type: themes_map[theme_id].type,
+                    text: themes_map[theme_id].text,
+                    colors: get_current_theme_colors(),
+                };
+
+                Common.localStorage.setItem('ui-theme', JSON.stringify(theme_obj));
+            }
+        }
+
         var get_themes_config = function (url) {
             const me = this;
 
@@ -268,14 +293,7 @@ define([
                 function ( obj ) {
                     if ( obj != 'error' ) {
                         parse_themes_object(obj);
-
+                        check_launched_custom_theme();
-                        const match = document.body.className.match(/theme-(?!type)[\w-]+/g);
-                        if ( match.length > 1 && themes_map[match[0]] ) {
-                            const s = Common.localStorage.getItem('ui-theme');
-                            if ( !s || get_ui_theme_name(s) !== match[0] ) {
-                                me.setTheme(match[0])
-                            }
-                        }
                     } else {
                         console.warn('failed to load/parse themes.json');
                     }
@@ -303,9 +321,9 @@ define([
         }
 
         var on_document_open = function (data) {
-            if ( !!this.api.asc_setContentDarkMode && this.isDarkTheme() ) {
+            // if ( !!this.api.asc_setContentDarkMode && this.isDarkTheme() ) {
-                this.api.asc_setContentDarkMode(this.isContentThemeDark());
+            //     this.api.asc_setContentDarkMode(this.isContentThemeDark());
-            }
+            // }
         };
 
         const is_theme_type_system = function (id) { return themes_map[id].type == THEME_TYPE_SYSTEM; }
@@ -323,65 +341,80 @@ define([
         };
 
         const on_system_theme_dark = function (mql) {
-            if (Common.localStorage.getBool('ui-theme-use-system', false)) {
+            if ( window.uitheme.is_theme_system() ) {
-                this.setTheme('theme-system');
+                refresh_theme.call(this, true);
             }
         };
 
+        const apply_theme = function (id) {
+            window.uitheme.set_id(id);
+
+            const theme_id = window.uitheme.relevant_theme_id();
+            document.body.className = document.body.className.replace(/theme-[\w-]+\s?/gi, '').trim();
+            document.body.classList.add(theme_id, 'theme-type-' + themes_map[theme_id].type);
+
+            if ( themes_map[theme_id].type == 'dark' ) {
+                this.api.asc_setContentDarkMode(this.isContentThemeDark());
+                Common.NotificationCenter.trigger('contenttheme:dark', this.isContentThemeDark());
+            } else {
+                this.api.asc_setContentDarkMode(false);
+            }
+
+            const colors_obj = get_current_theme_colors();
+            colors_obj.type = themes_map[theme_id].type;
+            colors_obj.name = theme_id;
+            this.api.asc_setSkin(colors_obj);
+
+            if ( !(Common.Utils.isIE10 || Common.Utils.isIE11) ) {
+                if ( themes_map[id].source != 'static' ) {
+                    const theme_obj = {
+                        id: id,
+                        type: themes_map[id].type,
+                        text: themes_map[id].text,
+                        colors: colors_obj,
+                    };
+
+                    Common.localStorage.setItem('ui-theme', JSON.stringify(theme_obj));
+                }
+            }
+        }
+
+        const refresh_theme = function (force) {
+            if ( force || Common.localStorage.getItem('ui-theme-id') != window.uitheme.id ) {
+                const theme_id = Common.localStorage.getItem('ui-theme-id');
+
+                if ( theme_id ) {
+                    apply_theme.call(this, theme_id);
+                    Common.NotificationCenter.trigger('uitheme:changed', theme_id);
+                }
+            }
+        }
+
         return {
             init: function (api) {
-                var me = this;
-
                 Common.Gateway.on('opendocument', on_document_open.bind(this));
                 $(window).on('storage', function (e) {
-                    if ( e.key == 'ui-theme' || e.key == 'ui-theme-id' ) {
+                    if ( e.key == 'ui-theme-id' && !Common.Controllers.Desktop.isActive() ) {
                         if ( !!e.originalEvent.newValue ) {
-                            if (Common.localStorage.getBool('ui-theme-use-system', false)) {
+                            refresh_theme.call(this);
-                                me.setTheme('theme-system');
-                            } else me.setTheme(e.originalEvent.newValue, true);
                         }
                     } else
                     if ( e.key == 'content-theme' ) {
-                        me.setContentTheme(e.originalEvent.newValue, true);
+                        this.setContentTheme(e.originalEvent.newValue, true);
-                        console.log('changed content', e.originalEvent.newValue);
                     }
-                })
+                }.bind(this))
 
                 this.api = api;
-                var theme_name = get_ui_theme_name(Common.localStorage.getItem('ui-theme'));
-                if ( !theme_name ) {
-                    if ( !(Common.Utils.isIE10 || Common.Utils.isIE11) )
-                        document.body.classList.forEach(function (classname, i, o) {
-                            if ( !theme_name && classname.startsWith('theme-') &&
-                                !classname.startsWith('theme-type-') && themes_map[classname] )
-                            {
-                                theme_name = classname;
-                                var theme_obj = {
-                                    id: theme_name,
-                                    type: themes_map[theme_name].type
-                                };
 
-                                Common.localStorage.setItem('ui-theme', JSON.stringify(theme_obj));
+                const theme_id = window.uitheme.relevant_theme_id();
-                            }
+                const obj = get_current_theme_colors(name_colors);
-                        });
+                obj.type = window.uitheme.type ? window.uitheme.type : themes_map[theme_id] ? themes_map[theme_id].type : THEME_TYPE_LIGHT;
-                }
+                obj.name = theme_id;
-
-                if ( !themes_map[theme_name] )
-                    theme_name = id_default_light_theme;
-
-                if ( !$('body').hasClass(theme_name) ) {
-                    $('body').addClass(theme_name);
-                }
-
-                if ( !document.body.className.match(/theme-type-/) ) {
-                    document.body.classList.add('theme-type-' + themes_map[theme_name].type);
-                }
-
-                var obj = get_current_theme_colors(name_colors);
-                obj.type = themes_map[theme_name].type;
-                obj.name = theme_name;
                 api.asc_setSkin(obj);
 
+                const is_content_dark = themes_map[theme_id] && themes_map[theme_id].type == 'dark' && window.uitheme.iscontentdark;
+                api.asc_setContentDarkMode(is_content_dark);
+
                 if ( !(Common.Utils.isIE10 || Common.Utils.isIE11) )
                     window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', on_system_theme_dark.bind(this));
                 Common.NotificationCenter.on('document:ready', on_document_ready.bind(this));
@@ -410,12 +443,7 @@ define([
             },
 
             currentThemeId: function () {
-                if ( Common.localStorage.getBool('ui-theme-use-system', false) )
+                return !!themes_map[window.uitheme.id] ? window.uitheme.id : id_default_light_theme;
-                    return 'theme-system';
-
-                var t = Common.localStorage.getItem('ui-theme') || Common.localStorage.getItem('ui-theme-id');
-                var id = get_ui_theme_name(t);
-                return !!themes_map[id] ? id : id_default_light_theme;
             },
 
             defaultThemeId: function (type) {
@@ -432,18 +460,16 @@ define([
             },
 
             isContentThemeDark: function () {
-                return Common.localStorage.getItem("content-theme") == 'dark';
+                return window.uitheme.iscontentdark;
             },
 
             setContentTheme: function (mode, force) {
                 var set_dark = mode == 'dark';
-                if ( set_dark && !this.isDarkTheme() )
+                if ( set_dark != window.uitheme.iscontentdark || force ) {
-                    return;
+                    if ( this.isDarkTheme() )
-
-                if ( set_dark != this.isContentThemeDark() || force ) {
-                    if ( this.api.asc_setContentDarkMode )
                         this.api.asc_setContentDarkMode(set_dark);
 
+                    window.uitheme.iscontentdark = mode;
                     if ( Common.localStorage.getItem('content-theme') != mode )
                         Common.localStorage.setItem('content-theme', mode);
 
@@ -452,86 +478,27 @@ define([
             },
 
             toggleContentTheme: function () {
-                var is_current_dark = this.isContentThemeDark();
+                window.uitheme.iscontentdark = !window.uitheme.iscontentdark;
-                is_current_dark ? Common.localStorage.setItem('content-theme', 'light') : Common.localStorage.setItem('content-theme', 'dark');
+                Common.localStorage.setItem('content-theme', window.uitheme.iscontentdark ? 'dark' : 'light');
 
-                if ( this.api.asc_setContentDarkMode )
+                if ( this.isDarkTheme() )
-                    this.api.asc_setContentDarkMode(!is_current_dark);
+                    this.api.asc_setContentDarkMode(window.uitheme.iscontentdark);
 
-                Common.NotificationCenter.trigger('contenttheme:dark', !is_current_dark);
+                Common.NotificationCenter.trigger('contenttheme:dark', window.uitheme.iscontentdark);
             },
 
             setTheme: function (obj) {
                 if ( !obj ) return;
 
-                var id = get_ui_theme_name(obj),
+                const id = get_ui_theme_name(obj);
-                    refresh_only = arguments[1];
+                if ( themes_map[id] ) {
+                    if ( !(id == window.uitheme.id) ) {
+                        apply_theme.call(this, id);
 
-                if ( !refresh_only && is_theme_type_system(this.currentThemeId()) ) {
-                    // TODO: need refactoring. for bug 58801
-                    if ( get_system_default_theme().id == id ) {
-                        Common.localStorage.setBool('ui-theme-use-system', false);
-                        Common.localStorage.setItem('ui-theme-id', '');
                         Common.localStorage.setItem('ui-theme-id', id);
                         Common.NotificationCenter.trigger('uitheme:changed', id);
-                        return;
                     }
                 }
-
-                if ( is_theme_type_system(id) ) {
-                    if ( get_system_default_theme().id == this.currentThemeId() ) {
-                        Common.localStorage.setBool('ui-theme-use-system', true);
-                        Common.localStorage.setItem('ui-theme-id', '');
-                        Common.localStorage.setItem('ui-theme-id', id);
-                        Common.NotificationCenter.trigger('uitheme:changed', id);
-                        return;
-                    }
-
-                    Common.localStorage.setBool('ui-theme-use-system', true);
-                    id = get_system_default_theme().id;
-                } else {
-                    Common.localStorage.setBool('ui-theme-use-system', false);
-                }
-
-                if ( (this.currentThemeId() != id || refresh_only) && !!themes_map[id] ) {
-                    document.body.className = document.body.className.replace(/theme-[\w-]+\s?/gi, '').trim();
-                    document.body.classList.add(id, 'theme-type-' + themes_map[id].type);
-
-                    if ( this.api ) {
-                        if ( this.api.asc_setContentDarkMode && is_dark_mode_allowed )
-                            if ( themes_map[id].type == 'light' ) {
-                                this.api.asc_setContentDarkMode(false);
-                            } else {
-                                this.api.asc_setContentDarkMode(this.isContentThemeDark());
-                                Common.NotificationCenter.trigger('contenttheme:dark', this.isContentThemeDark());
-                            }
-
-                        var obj = get_current_theme_colors(name_colors);
-                        obj.type = themes_map[id].type;
-                        obj.name = id;
-
-                        this.api.asc_setSkin(obj);
-                    }
-
-                    if ( !(Common.Utils.isIE10 || Common.Utils.isIE11) ) {
-                        var theme_obj = {
-                            id: id,
-                            type: obj.type,
-                            text: themes_map[id].text,
-                        };
-
-                        if ( themes_map[id].source != 'static' ) {
-                            theme_obj.colors = obj;
-                        }
-
-                        if ( !refresh_only )
-                            Common.localStorage.setItem('ui-theme', JSON.stringify(theme_obj));
-                    }
-
-                    if ( !refresh_only )
-                        Common.localStorage.setItem('ui-theme-id', id);
-                    Common.NotificationCenter.trigger('uitheme:changed', id);
-                }
             },
 
             toggleTheme: function () {

apps/common/main/lib/util/desktopinit.js

@@ -46,7 +46,14 @@ if ( window.AscDesktopEditor ) {
     }
 
     if ( !!window.RendererProcessVariable ) {
-        desktop.theme = window.RendererProcessVariable.theme;
+        const theme = desktop.theme = window.RendererProcessVariable.theme;
+
+        if ( theme ) {
+            window.uitheme = {
+                id: theme.id,
+                type: theme.type,
+            }
+        }
     }
 
     window.desktop.execCommand('webapps:entry', (window.features && JSON.stringify(window.features)) || '');

apps/common/main/lib/util/htmlutils.js

@@ -112,79 +112,36 @@ window.Common = {
 
 checkScaling();
 
-var params = (function() {
+if ( !!params.uitheme ) {
-    var e,
+    if ( params.uitheme == 'default-dark' ) {
-        a = /\+/g,  // Regex for replacing addition symbol with a space
-        r = /([^&=]+)=?([^&]*)/g,
-        d = function (s) { return decodeURIComponent(s.replace(a, " ")); },
-        q = window.location.search.substring(1),
-        urlParams = {};
-
-    while (e = r.exec(q))
-        urlParams[d(e[1])] = d(e[2]);
-
-    return urlParams;
-})();
-
-if ( window.desktop ) {
-    var theme = desktop.theme
-
-    if ( theme ) {
-        if ( !theme.id && !!theme.type ) {
-            if ( theme.type == 'dark' ) theme.id = 'theme-dark'; else
-            if ( theme.type == 'light' ) theme.id = 'theme-classic-light';
-        }
-
-        if ( theme.id ) {
-            if ( theme.id == 'theme-system' ) {
-                localStorage.setItem("ui-theme-use-system", "1");
-                localStorage.removeItem("ui-theme-id");
-                delete params.uitheme;
-            } else {
-                localStorage.setItem("ui-theme-id", theme.id);
-                localStorage.removeItem("ui-theme-use-system");
-            }
-
-            localStorage.removeItem("ui-theme");
-        }
-    }
-}
-
-if ( !!params.uitheme && checkLocalStorage && !localStorage.getItem("ui-theme-id") ) {
-    // const _t = params.uitheme.match(/([\w-]+)/g);
-
-    if ( params.uitheme == 'default-dark' )
         params.uitheme = 'theme-dark';
-    else
+        params.uithemetype = 'dark';
-    if ( params.uitheme == 'default-light' )
+    } else
+    if ( params.uitheme == 'default-light' ) {
         params.uitheme = 'theme-classic-light';
-
+        params.uithemetype = 'light';
-    localStorage.removeItem("ui-theme");
+    } else
+    if ( params.uitheme == 'theme-system' ) {}
 }
 
-var ui_theme_name = checkLocalStorage && localStorage.getItem("ui-theme-id") ? localStorage.getItem("ui-theme-id") : params.uitheme;
+!window.uitheme.id && params.uitheme && (window.uitheme.id = params.uitheme);
-var ui_theme_type;
+if ( !window.uitheme.id ) {
-if ( !ui_theme_name ) {
+    window.uitheme.adapt_to_system_theme();
-    if ( (window.desktop && desktop.theme && desktop.theme.system == 'dark') ||
+} else {
-            (window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches) )
+    !window.uitheme.type && params.uitheme && (window.uitheme.type = params.uithemetype);
-    {
+}
-        ui_theme_name = 'theme-dark';
+
-        ui_theme_type = 'dark';
+document.body.classList.add(window.uitheme.relevant_theme_id());
-        checkLocalStorage && localStorage.removeItem("ui-theme");
+
+if ( window.uitheme.type == 'dark' ) {
+    document.body.classList.add("theme-type-dark");
+
+    if ( checkLocalStorage && localStorage.getItem("content-theme") == 'dark' ) {
+        document.body.classList.add("content-theme-dark");
+    } else {
+    // document.body.classList.add("theme-type-ligth");
     }
 }
-if ( !!ui_theme_name ) {
-    document.body.classList.add(ui_theme_name);
-}
 
-if ( checkLocalStorage ) {
+if ( !window.is_system_theme_dark )
-    let current_theme = localStorage.getItem("ui-theme");
+    delete window.is_system_theme_dark;
-    if ( !!current_theme && /type":\s*"dark/.test(current_theme) || ui_theme_type == 'dark' ) {
-        document.body.classList.add("theme-type-dark");
-
-        let content_theme = localStorage.getItem("content-theme");
-        if ( content_theme == 'dark' ) {
-            document.body.classList.add("content-theme-dark");
-        }
-    }
-}

apps/common/main/lib/util/themeinit.js

@@ -31,33 +31,66 @@
  */
 
 +function init_themes() {
-    if ( localStorage.getItem("ui-theme-use-system") == '1' ) {
+    !window.uitheme && (window.uitheme = {});
-        localStorage.removeItem("ui-theme-id");
+
+    window.uitheme.set_id = function (id) {
+        if ( id == 'theme-system' )
+            this.adapt_to_system_theme();
+        else this.id = id;
     }
 
-    var objtheme = localStorage.getItem("ui-theme");
+    window.uitheme.is_theme_system = function () {
-    if ( typeof(objtheme) == 'string' &&
+        return this.id == 'theme-system';
-            objtheme.startsWith("{") && objtheme.endsWith("}") )
-    {
-        objtheme = JSON.parse(objtheme);
     }
 
-    var ui_theme_name = objtheme && typeof(objtheme) == 'object' ? objtheme.id :
+    window.uitheme.adapt_to_system_theme = function () {
-        typeof(objtheme) == 'string' ? objtheme : localStorage.getItem("ui-theme-id");
+        this.id = 'theme-system';
+        this.type = this.is_system_theme_dark() ? 'dark' : 'light';
+    }
 
-    if ( !!ui_theme_name ) {
+    window.uitheme.relevant_theme_id = function () {
-        if ( !!objtheme && !!objtheme.colors ) {
+        if ( this.is_theme_system() )
-            var colors = [];
+            return this.is_system_theme_dark() ? 'theme-dark' : 'theme-classic-light';
-            for ( var c in objtheme.colors ) {
+        return this.id;
-                colors.push('--' + c + ':' + objtheme.colors[c]);
+    }
+
+    if ( !window.uitheme.is_system_theme_dark )
+        window.uitheme.is_system_theme_dark = function () {
+            return window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches;
+        }
+
+    !window.uitheme.id && window.uitheme.set_id(localStorage.getItem("ui-theme-id"));
+    window.uitheme.iscontentdark = localStorage.getItem("content-theme") == 'dark';
+
+    let objtheme = localStorage.getItem("ui-theme");
+    if ( !!objtheme ) {
+        if ( typeof(objtheme) == 'string' &&
+                objtheme.startsWith("{") && objtheme.endsWith("}") )
+        {
+            objtheme = JSON.parse(objtheme);
+        }
+
+        if ( objtheme ) {
+            if ( window.uitheme.id && window.uitheme.id != objtheme.id ) {
+                localStorage.removeItem("ui-theme");
+            } else {
+                window.uitheme.cache = objtheme;
+                if ( !window.uitheme.type && objtheme.type ) {
+                    window.uitheme.type = objtheme.type;
+                }
+
+                if ( objtheme.colors ) {
+                    let colors = [];
+                    for (let c in objtheme.colors) {
+                        colors.push('--' + c + ':' + objtheme.colors[c]);
+                    }
+
+                    var style = document.createElement('style');
+                    style.type = 'text/css';
+                    style.innerHTML = '.' + objtheme.id + '{' + colors.join(';') + ';}';
+                    document.getElementsByTagName('head')[0].appendChild(style);
+                }
             }
-
-            var style = document.createElement('style');
-            style.type = 'text/css';
-            style.innerHTML = '.' + ui_theme_name + '{'+ colors.join(';') +';}';
-            document.getElementsByTagName('head')[0].appendChild(style);
-
-            window.currentLoaderTheme = objtheme;
         }
     }
 }();

apps/documenteditor/main/index.html.deploy

@@ -230,8 +230,8 @@
     </script>
 
     <link rel="stylesheet" type="text/css" href="../../../apps/documenteditor/main/resources/css/app.css">
-    <script src="../../../../../apps/common/main/lib/util/themeinit.js?__inline=true"></script>
     <script src="../../../../../apps/common/main/lib/util/desktopinit.js?__inline=true"></script>
+    <script src="../../../../../apps/common/main/lib/util/themeinit.js?__inline=true"></script>
 </head>
 <body>
     <script src="../../../../../apps/common/main/lib/util/htmlutils.js?__inline=true"></script>

apps/documenteditor/main/index_loader.html.deploy

@@ -286,6 +286,7 @@
 
     <link rel="stylesheet" type="text/css" href="../../../apps/documenteditor/main/resources/css/app.css">
     <script src="../../../../../apps/common/main/lib/util/desktopinit.js?__inline=true"></script>
+    <script src="../../../../../apps/common/main/lib/util/themeinit.js?__inline=true"></script>
 </head>
 <body>
     <script src="../../../../../apps/common/main/lib/util/htmlutils.js?__inline=true"></script>

apps/presentationeditor/main/index.html.deploy

@@ -265,8 +265,8 @@
     </script>
 
     <link rel="stylesheet" type="text/css" href="../../../apps/presentationeditor/main/resources/css/app.css">
-    <script src="../../../../../apps/common/main/lib/util/themeinit.js?__inline=true"></script>
     <script src="../../../../../apps/common/main/lib/util/desktopinit.js?__inline=true"></script>
+    <script src="../../../../../apps/common/main/lib/util/themeinit.js?__inline=true"></script>
 </head>
 <body>
     <script src="../../../../../apps/common/main/lib/util/htmlutils.js?__inline=true"></script>

apps/presentationeditor/main/index_loader.html.deploy

@@ -287,6 +287,7 @@
 
     <link rel="stylesheet" type="text/css" href="../../../apps/presentationeditor/main/resources/css/app.css">
     <script src="../../../../../apps/common/main/lib/util/desktopinit.js?__inline=true"></script>
+    <script src="../../../../../apps/common/main/lib/util/themeinit.js?__inline=true"></script>
 </head>
 <body>
     <script src="../../../../../apps/common/main/lib/util/htmlutils.js?__inline=true"></script>

apps/spreadsheeteditor/main/index.html.deploy

@@ -267,8 +267,8 @@
 
     <link rel="stylesheet" type="text/css" href="../../../../sdkjs/cell/css/main.css"/>
     <link rel="stylesheet" type="text/css" href="../../../apps/spreadsheeteditor/main/resources/css/app.css">
-    <script src="../../../../../apps/common/main/lib/util/themeinit.js?__inline=true"></script>
     <script src="../../../../../apps/common/main/lib/util/desktopinit.js?__inline=true"></script>
+    <script src="../../../../../apps/common/main/lib/util/themeinit.js?__inline=true"></script>
 </head>
 <body>
     <script src="../../../../../apps/common/main/lib/util/htmlutils.js?__inline=true"></script>

apps/spreadsheeteditor/main/index_internal.html.deploy

@@ -182,8 +182,8 @@
 
     <link rel="stylesheet" type="text/css" href="../../../../sdkjs/cell/css/main.css"/>
     <link rel="stylesheet" type="text/css" href="../../../apps/spreadsheeteditor/main/resources/css/app.css">
-    <script src="../../../../../apps/common/main/lib/util/themeinit.js?__inline=true"></script>
     <script src="../../../../../apps/common/main/lib/util/desktopinit.js?__inline=true"></script>
+    <script src="../../../../../apps/common/main/lib/util/themeinit.js?__inline=true"></script>
 </head>
 <body>
     <script src="../../../../../apps/common/main/lib/util/htmlutils.js?__inline=true"></script>

apps/spreadsheeteditor/main/index_loader.html.deploy

@@ -287,6 +287,7 @@
     <link rel="stylesheet" type="text/css" href="../../../../sdkjs/cell/css/main.css"/>
     <link rel="stylesheet" type="text/css" href="../../../apps/spreadsheeteditor/main/resources/css/app.css">
     <script src="../../../../../apps/common/main/lib/util/desktopinit.js?__inline=true"></script>
+    <script src="../../../../../apps/common/main/lib/util/themeinit.js?__inline=true"></script>
 </head>
 <body>
     <script src="../../../../../apps/common/main/lib/util/htmlutils.js?__inline=true"></script>