SpreadSheet Editor Dark Mode (dark document) 🌘 — companion to sdkjs PR

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

@@ -410,6 +410,7 @@ define([
                     Common.NotificationCenter.trigger('contenttheme:dark', this.isContentThemeDark());
                 } else {
                     this.api.asc_setContentDarkMode(false);
+                    Common.NotificationCenter.trigger('contenttheme:dark', false);
                 }
 
             const colors_obj = get_current_theme_colors();
@@ -570,7 +571,7 @@ define([
                 if ( set_dark != window.uitheme.iscontentdark || force ) {
                     window.uitheme.iscontentdark = set_dark;
 
-                    if ( this.isDarkTheme() )
+                    if ( this.isDarkTheme() && this.api.asc_setContentDarkMode )
                         this.api.asc_setContentDarkMode(set_dark);
 
                     if ( !(keep === false) && Common.localStorage.getItem('content-theme') != mode )
@@ -584,7 +585,7 @@ define([
                 window.uitheme.iscontentdark = !window.uitheme.iscontentdark;
                 Common.localStorage.setItem('content-theme', window.uitheme.iscontentdark ? 'dark' : 'light');
 
-                if ( this.isDarkTheme() )
+                if ( this.isDarkTheme() && this.api.asc_setContentDarkMode )
                     this.api.asc_setContentDarkMode(window.uitheme.iscontentdark);
 
                 Common.NotificationCenter.trigger('contenttheme:dark', window.uitheme.iscontentdark);

apps/spreadsheeteditor/main/app/controller/ViewTab.js

@@ -50,6 +50,7 @@ define([
         onLaunch: function () {
             this._state = {};
             Common.NotificationCenter.on('uitheme:changed', this.onThemeChanged.bind(this));
+            Common.NotificationCenter.on('contenttheme:dark', this.onContentThemeChangedToDark.bind(this));
             Common.NotificationCenter.on('tabstyle:changed', this.onTabStyleChange.bind(this));
         },
 
@@ -99,7 +100,8 @@ define([
                     'viewtab:viewmode': this.onPreviewMode,
                     'macros:click':  this.onClickMacros,
                     'macros:record':  _.bind(this.onClickMacrosRec, this),
-                    'macros:pause':  _.bind(this.onClickMacrosPause, this)
+                    'macros:pause':  _.bind(this.onClickMacrosPause, this),
+                    'darkmode:change': _.bind(this.onChangeDarkMode, this)
                 },
                 'Statusbar': {
                     'sheet:changed': this.onApiSheetChanged.bind(this),
@@ -296,9 +298,27 @@ define([
                     this.view.btnInterfaceTheme.menu.clearAll(true);
                     menu_item.setChecked(true, true);
                 }
+                Common.Utils.lockControls(Common.enumLock.inLightTheme, !Common.UI.Themes.isDarkTheme(), {array: [this.view.btnDarkDocument]});
             }
         },
 
+        onChangeDarkMode: function (isdarkmode) {
+            // same 500ms debounce as documenteditor's ViewTab.js already had
+            // TODO: look if is not a better solution
+            if (!this._darkModeTimer) {
+                var me = this;
+                me._darkModeTimer = setTimeout(function() {
+                    me._darkModeTimer = undefined;
+                }, 500);
+                Common.UI.Themes.setContentTheme(isdarkmode ? 'dark' : 'light');
+            } else
+                this.onContentThemeChangedToDark(Common.UI.Themes.isContentThemeDark());
+        },
+
+        onContentThemeChangedToDark: function (isdark) {
+            this.view && this.view.btnDarkDocument.toggle(isdark, true);
+        },
+
         onTabStyleChange: function () {
             if (this.view && this.view.menuTabStyle) {
                 _.each(this.view.menuTabStyle.items, function(item){

apps/spreadsheeteditor/main/app/view/Toolbar.js

@@ -108,6 +108,7 @@ define([
         userProtected: 'cell-user-protected',
         pageBreakLock: 'page-break-lock',
         externalChartProtected: 'external-chart-protected',
+        inLightTheme:   'light-theme',
         fileMenuOpened: 'file-menu-opened',
         cantMergeShape: 'merge-shape-lock',
         cantSave: 'cant-save',

apps/spreadsheeteditor/main/app/view/ViewTab.js

@@ -66,6 +66,7 @@ define([
             '<div class="separator long"></div>' +
             '<div class="group">' +
                 '<span class="btn-slot text x-huge" id="slot-btn-interface-theme"></span>' +
+                '<span class="btn-slot text x-huge" id="slot-btn-dark-document"></span>' +
             '</div>' +
             '<div class="separator long separator-theme"></div>' +
             '<div class="group sheet-freeze">' +
@@ -171,6 +172,9 @@ define([
             me.chRightMenu.on('change', _.bind(function (checkbox, state) {
                 me.fireEvent('rightmenu:hide', [me.chRightMenu, state === 'checked']);
             }, me));
+            me.btnDarkDocument.on('click', _.bind(function (e) {
+                me.fireEvent('darkmode:change', [e.pressed]);
+            }, me));
             me.btnMacros && me.btnMacros.on('click', function () {
                 me.fireEvent('macros:click');
             });
@@ -384,6 +388,18 @@ define([
                 });
                 this.lockedControls.push(this.btnInterfaceTheme);
 
+                this.btnDarkDocument = new Common.UI.Button({
+                    cls: 'btn-toolbar x-huge icon-top',
+                    iconCls: 'toolbar__icon btn-dark-mode',
+                    lock: [_set.inLightTheme],
+                    caption: this.textDarkDocument,
+                    enableToggle: true,
+                    dataHint: '1',
+                    dataHintDirection: 'bottom',
+                    dataHintOffset: 'small'
+                });
+                this.lockedControls.push(this.btnDarkDocument);
+
                 this.chFormula = new Common.UI.CheckBox({
                     labelText: this.textFormula,
                     value: !Common.localStorage.getBool('sse-hidden-formula'),
@@ -454,6 +470,7 @@ define([
                 this.cmbZoom.setValue(100);
                 $host.find('#slot-lbl-zoom').text(this.textZoom);
                 this.btnInterfaceTheme.render($host.find('#slot-btn-interface-theme'));
+                this.btnDarkDocument.render($host.find('#slot-btn-dark-document'));
                 this.chFormula.render($host.find('#slot-chk-formula'));
                 this.chStatusbar.render($host.find('#slot-chk-statusbar'));
                 this.chToolbar.render($host.find('#slot-chk-toolbar'));
@@ -490,6 +507,7 @@ define([
                     }
                     me.btnMacros && me.btnMacros.updateHint(me.tipMacros);
                     me.btnInterfaceTheme.updateHint(me.tipInterfaceTheme);
+                    me.btnDarkDocument.updateHint(me.tipDarkDocument);
                     me.btnRecMacro && me.btnRecMacro.updateHint(me.tipRecMacro);
                     me.btnPauseMacro && me.btnPauseMacro.updateHint(me.tipPauseMacro);
 
@@ -618,7 +636,13 @@ define([
                             me.btnInterfaceTheme.menu.on('item:click', _.bind(function (menu, item) {
                                 var value = item.value;
                                 Common.UI.Themes.setTheme(value);
+                                Common.Utils.lockControls(Common.enumLock.inLightTheme, !Common.UI.Themes.isDarkTheme(), {array: [me.btnDarkDocument]});
                             }, me));
+
+                            setTimeout(function () {
+                                me.btnDarkDocument.toggle(Common.UI.Themes.isContentThemeDark(), true);
+                                Common.Utils.lockControls(Common.enumLock.inLightTheme, !Common.UI.Themes.isDarkTheme(), {array: [me.btnDarkDocument]});
+                            }, 0);
                         }
                     }
 
@@ -736,6 +760,8 @@ define([
             textInterfaceTheme: 'Interface theme',
             textShowFrozenPanesShadow: 'Show frozen panes shadow',
             tipInterfaceTheme: 'Interface theme',
+            textDarkDocument: 'Dark document',
+            tipDarkDocument: 'Dark document',
             textLeftMenu: 'Left panel',
             textRightMenu: 'Right panel',
             txtViewNormal: 'Normal',