Merge pull request #1337 from ONLYOFFICE/fix/bug-53753

[DE forms] Add dark mode

apps/documenteditor/forms/app/controller/ApplicationController.js

@@ -1111,7 +1111,11 @@ define([
         },
 
         onThemeClick: function(menu, item) {
-            Common.UI.Themes.setTheme(item.value);
+            (item.value!==null) && Common.UI.Themes.setTheme(item.value);
+        },
+
+        onDarkModeClick: function(item) {
+            Common.UI.Themes.toggleContentTheme();
         },
 
         onThemeChange: function() {
@@ -1119,6 +1123,11 @@ define([
             _.each(this.view.mnuThemes.items, function(item){
                 item.setChecked(current===item.value, true);
             });
+            if (this.view.menuItemsDarkMode) {
+                this.view.menuItemsDarkMode.setDisabled(!Common.UI.Themes.isDarkTheme());
+                this.view.menuItemsDarkMode.setChecked(Common.UI.Themes.isContentThemeDark());
+            }
+
             if (this.appOptions.canBranding) {
                 var value = this.appOptions.customization;
                 if ( value && value.logo && (value.logo.image || value.logo.imageDark) && (value.logo.image !== value.logo.imageDark)) {
@@ -1128,6 +1137,10 @@ define([
             }
         },
 
+        onContentThemeChangedToDark: function (isdark) {
+            this.view.menuItemsDarkMode.setChecked(isdark, true);
+        },
+
         createDelayedElements: function() {
             var me = this,
                 menuItems = this.view.btnOptions.menu.items,
@@ -1197,8 +1210,18 @@ define([
                 menuItems[6].setVisible(false);
                 itemsCount--;
             } else {
+                this.view.menuItemsDarkMode = new Common.UI.MenuItem({
+                    caption: this.view.txtDarkMode,
+                    checkable: true,
+                    checked: Common.UI.Themes.isContentThemeDark(),
+                    disabled: !Common.UI.Themes.isDarkTheme()
+                });
+                this.view.mnuThemes.addItem(new Common.UI.MenuItem({caption     :  '--'}));
+                this.view.mnuThemes.addItem(this.view.menuItemsDarkMode);
                 this.view.mnuThemes.on('item:click', _.bind(this.onThemeClick, this));
+                this.view.menuItemsDarkMode.on('click', _.bind(this.onDarkModeClick, this));
                 Common.NotificationCenter.on('uitheme:changed', this.onThemeChange.bind(this));
+                Common.NotificationCenter.on('contenttheme:dark', this.onContentThemeChangedToDark.bind(this));
             }
 
             if ( !this.embedConfig.shareUrl || this.appOptions.canFillForms) {

apps/documenteditor/forms/app/view/ApplicationView.js

@@ -113,7 +113,8 @@ define([
         textCut: 'Cut',
         textCopy: 'Copy',
         textPaste: 'Paste',
-        textPrintSel: 'Print Selection'
+        textPrintSel: 'Print Selection',
+        txtDarkMode: 'Dark mode'
 
     }, DE.Views.ApplicationView || {}));
 });

apps/documenteditor/forms/locale/en.json

@@ -123,5 +123,6 @@
   "DE.Views.ApplicationView.txtFullScreen": "Full Screen",
   "DE.Views.ApplicationView.txtPrint": "Print",
   "DE.Views.ApplicationView.txtShare": "Share",
-  "DE.Views.ApplicationView.txtTheme": "Interface theme"
+  "DE.Views.ApplicationView.txtTheme": "Interface theme",
+  "DE.Views.ApplicationView.txtDarkMode": "Dark mode"
 }

apps/documenteditor/forms/locale/ru.json

@@ -123,5 +123,6 @@
   "DE.Views.ApplicationView.txtFullScreen": "Во весь экран",
   "DE.Views.ApplicationView.txtPrint": "Печать",
   "DE.Views.ApplicationView.txtShare": "Поделиться",
-  "DE.Views.ApplicationView.txtTheme": "Тема интерфейса"
+  "DE.Views.ApplicationView.txtTheme": "Тема интерфейса",
+  "DE.Views.ApplicationView.txtDarkMode": "Темный режим"
 }