From dc9eff36e909872352d5f4b9dc3bbd60480ab945 Mon Sep 17 00:00:00 2001
From: Julia Radzhabova <julia.radzhabova@onlyoffice.com>
Date: Fri, 19 Nov 2021 17:36:02 +0300
Subject: [PATCH] [DE forms] Add dark mode

---
 .../app/controller/ApplicationController.js   | 25 ++++++++++++++++++-
 .../forms/app/view/ApplicationView.js         |  3 ++-
 apps/documenteditor/forms/locale/en.json      |  3 ++-
 apps/documenteditor/forms/locale/ru.json      |  3 ++-
 4 files changed, 30 insertions(+), 4 deletions(-)

diff --git a/apps/documenteditor/forms/app/controller/ApplicationController.js b/apps/documenteditor/forms/app/controller/ApplicationController.js
index 873a3aacb..aaba75fe6 100644
--- a/apps/documenteditor/forms/app/controller/ApplicationController.js
+++ b/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) {
diff --git a/apps/documenteditor/forms/app/view/ApplicationView.js b/apps/documenteditor/forms/app/view/ApplicationView.js
index 1486a94d8..1e5f79a3e 100644
--- a/apps/documenteditor/forms/app/view/ApplicationView.js
+++ b/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 || {}));
 });
\ No newline at end of file
diff --git a/apps/documenteditor/forms/locale/en.json b/apps/documenteditor/forms/locale/en.json
index 6ffd5bfa9..a43eb222d 100644
--- a/apps/documenteditor/forms/locale/en.json
+++ b/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"
 }
\ No newline at end of file
diff --git a/apps/documenteditor/forms/locale/ru.json b/apps/documenteditor/forms/locale/ru.json
index 5d0540ac4..7102aa3e1 100644
--- a/apps/documenteditor/forms/locale/ru.json
+++ b/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": "Темный режим"
 }
\ No newline at end of file