From a791ecdb85cd9d5b08382f1e88a44c5ec1406a3c Mon Sep 17 00:00:00 2001
From: Maxim Kadushkin <maxim.kadushkin@onlyoffice.com>
Date: Fri, 2 Jul 2021 16:15:54 +0300
Subject: [PATCH] [DE] added "Dark mode" option

---
 apps/common/main/lib/controller/Themes.js     | 14 ++++++++
 apps/common/main/lib/view/Header.js           | 17 ++++++++++
 .../main/app/controller/Viewport.js           | 33 +++++++++++++++++++
 3 files changed, 64 insertions(+)

diff --git a/apps/common/main/lib/controller/Themes.js b/apps/common/main/lib/controller/Themes.js
index c43c88411..d29019179 100644
--- a/apps/common/main/lib/controller/Themes.js
+++ b/apps/common/main/lib/controller/Themes.js
@@ -290,6 +290,20 @@ define([
                 return themes_map[this.currentThemeId()].type == 'dark';
             },
 
+            isContentThemeDark: function () {
+                return Common.localStorage.getItem("content-theme") == 'dark';
+            },
+
+            toggleContentTheme: function () {
+                var is_current_dark = this.isContentThemeDark();
+                is_current_dark ? Common.localStorage.setItem('content-theme', 'light') : Common.localStorage.setItem('content-theme', 'dark');
+
+                if ( this.api.asc_setContentDarkMode )
+                    this.api.asc_setContentDarkMode(!is_current_dark);
+
+                Common.NotificationCenter.trigger('contenttheme:dark', !is_current_dark);
+            },
+
             setTheme: function (obj, force) {
                 var id = get_ui_theme_name(obj);
                 if ( (this.currentThemeId() != id || force) && !!themes_map[id] ) {
diff --git a/apps/common/main/lib/view/Header.js b/apps/common/main/lib/view/Header.js
index 1e193310e..f672fd920 100644
--- a/apps/common/main/lib/view/Header.js
+++ b/apps/common/main/lib/view/Header.js
@@ -97,6 +97,7 @@ define([
                                     '</section>'+
                                 '</div>' +
                                 '<div class="hedset">' +
+                                    '<div class="btn-slot" id="slot-btn-mode"></div>' +
                                     '<div class="btn-slot" id="slot-btn-back"></div>' +
                                     '<div class="btn-slot" id="slot-btn-favorite"></div>' +
                                     '<div class="btn-slot" id="slot-btn-options"></div>' +
@@ -350,6 +351,10 @@ define([
 
             if ( me.btnOptions )
                 me.btnOptions.updateHint(me.tipViewSettings);
+
+            if ( me.btnContentMode ) {
+                me.btnContentMode.on('click', function (e) { Common.UI.Themes.toggleContentTheme(); });
+            }
         }
 
         function onDocNameKeyDown(e) {
@@ -386,6 +391,12 @@ define([
             }
         }
 
+        function onContentThemeChangedToDark(isdark) {
+            if ( this.btnContentMode ) {
+                this.btnContentMode.changeIcon(!isdark ? {curr: 'btn-mode-dark', next: 'btn-mode-light'} : {curr: 'btn-mode-light', next: 'btn-mode-dark'});
+            }
+        }
+
         return {
             options: {
                 branding: {},
@@ -444,6 +455,7 @@ define([
                     'app:face': function(mode) {Common.Utils.asyncCall(onAppShowed, me, mode);}
                 });
                 Common.NotificationCenter.on('collaboration:sharingdeny', onLostEditRights);
+                Common.NotificationCenter.on('contenttheme:dark', onContentThemeChangedToDark.bind(this));
             },
 
             render: function (el, role) {
@@ -536,6 +548,11 @@ define([
 
                     $panelUsers.hide();
 
+                    if ( !!DE ) {
+                        var mode_cls = Common.UI.Themes.isContentThemeDark() ? 'btn-mode-dark' : 'btn-mode-light';
+                        me.btnContentMode = createTitleButton('toolbar__icon icon--inverse ' + mode_cls, $html.findById('#slot-btn-mode'));
+                    }
+
                     return $html;
                 } else
                 if ( role == 'title' ) {
diff --git a/apps/documenteditor/main/app/controller/Viewport.js b/apps/documenteditor/main/app/controller/Viewport.js
index 80e01e5c5..ae4636adb 100644
--- a/apps/documenteditor/main/app/controller/Viewport.js
+++ b/apps/documenteditor/main/app/controller/Viewport.js
@@ -153,6 +153,8 @@ define([
 
             Common.NotificationCenter.on('app:face', this.onAppShowed.bind(this));
             Common.NotificationCenter.on('app:ready', this.onAppReady.bind(this));
+            Common.NotificationCenter.on('uitheme:changed', this.onThemeChanged.bind(this));
+            Common.NotificationCenter.on('contenttheme:dark', this.onContentThemeChangedToDark.bind(this));
         },
 
         onAppShowed: function (config) {
@@ -248,6 +250,14 @@ define([
                 if (!config.isEdit)
                     mnuitemHideRulers.hide();
 
+                me.header.menuItemsDarkMode = new Common.UI.MenuItem({
+                    caption: 'Dark mode',
+                    checkable: true,
+                    checked: Common.UI.Themes.isContentThemeDark(),
+                    disabled: !Common.UI.Themes.isDarkTheme(),
+                    value: 'mode:dark'
+                });
+
                 me.header.mnuitemFitPage = new Common.UI.MenuItem({
                     caption: me.textFitPage,
                     checkable: true,
@@ -286,6 +296,8 @@ define([
                             mnuitemHideStatusBar,
                             mnuitemHideRulers,
                             {caption:'--'},
+                            me.header.menuItemsDarkMode,
+                            {caption:'--'},
                             me.header.mnuitemFitPage,
                             me.header.mnuitemFitWidth,
                             me.header.mnuZoom,
@@ -314,6 +326,7 @@ define([
                 })).on('click', _on_btn_zoom.bind(me, 'up'));
 
                 me.header.btnOptions.menu.on('item:click', me.onOptionsItemClick.bind(this));
+                me.header.btnContentMode.setDisabled(!Common.UI.Themes.isDarkTheme());
             }
         },
 
@@ -354,6 +367,25 @@ define([
             this.api.Resize();
         },
 
+        onThemeChanged: function (id) {
+            var menuItem = this.header.menuItemsDarkMode;
+            if ( !Common.UI.Themes.isDarkTheme() ) {
+                Common.Utils.InternalSettings.set("de-mode-dark", menuItem.isChecked());
+
+                menuItem.setChecked(false);
+                menuItem.setDisabled(true);
+            } else {
+                menuItem.setChecked(Common.Utils.InternalSettings.get("de-mode-dark"));
+                menuItem.setDisabled(false);
+            }
+
+            this.header.btnContentMode.setDisabled(!Common.UI.Themes.isDarkTheme());
+        },
+
+        onContentThemeChangedToDark: function (isdark) {
+            this.header.menuItemsDarkMode.setChecked(isdark, true);
+        },
+
         onWindowResize: function(e) {
             this.onLayoutChanged('window');
             Common.NotificationCenter.trigger('window:resize');
@@ -400,6 +432,7 @@ define([
                 Common.NotificationCenter.trigger('edit:complete', me.header);
                 break;
             case 'advanced': me.header.fireEvent('file:settings', me.header); break;
+            case 'mode:dark': Common.UI.Themes.toggleContentTheme(); break;
             }
         },