From fbd70b7b7b96e415304ead682b4caa83bf1a62b4 Mon Sep 17 00:00:00 2001
From: Maxim Kadushkin <maxim.kadushkin@onlyoffice.com>
Date: Mon, 1 Nov 2021 23:31:32 +0300
Subject: [PATCH] [mobile] added dark theme switch to DE

---
 .../controller/settings/ApplicationSettings.jsx  | 16 ++++++++++++++++
 .../src/view/settings/ApplicationSettings.jsx    |  8 +++++++-
 2 files changed, 23 insertions(+), 1 deletion(-)

diff --git a/apps/documenteditor/mobile/src/controller/settings/ApplicationSettings.jsx b/apps/documenteditor/mobile/src/controller/settings/ApplicationSettings.jsx
index 2dd0d8bf0..3ee334488 100644
--- a/apps/documenteditor/mobile/src/controller/settings/ApplicationSettings.jsx
+++ b/apps/documenteditor/mobile/src/controller/settings/ApplicationSettings.jsx
@@ -24,6 +24,20 @@ class ApplicationSettingsController extends Component {
         Common.EditorApi.get().asc_setSpellCheck(value);
     }
 
+    switchDarkTheme(value) {
+        const theme = value ? {id:'theme-dark', type:'dark'} : {id:'theme-light', type:'light'};
+        LocalStorage.setItem("ui-theme", JSON.stringify(theme));
+
+        const $body = $$('body');
+        $body.attr('class',  $body.attr('class').replace(/\s?theme-type-(?:dark|light)/, ''));
+        $body.addClass(`theme-type-${theme.type}`);
+    }
+
+    isThemeDark() {
+        const obj = LocalStorage.getItem("ui-theme");
+        return !!obj ? JSON.parse(obj).type === 'dark' : false;
+    }
+
     switchNoCharacters(value) {
         LocalStorage.setBool("de-mobile-no-characters", value);
         Common.EditorApi.get().put_ShowParaMarks(value);
@@ -67,11 +81,13 @@ class ApplicationSettingsController extends Component {
             <ApplicationSettings 
                 setUnitMeasurement={this.setUnitMeasurement}
                 switchSpellCheck={this.switchSpellCheck}
+                switchDarkTheme={this.switchDarkTheme}
                 switchNoCharacters={this.switchNoCharacters}
                 switchShowTableEmptyLine={this.switchShowTableEmptyLine}
                 switchDisplayComments={this.switchDisplayComments}
                 switchDisplayResolved={this.switchDisplayResolved}  
                 setMacrosSettings={this.setMacrosSettings}               
+                isThemeDark={this.isThemeDark}
             />
         )
     }
diff --git a/apps/documenteditor/mobile/src/view/settings/ApplicationSettings.jsx b/apps/documenteditor/mobile/src/view/settings/ApplicationSettings.jsx
index 23af47efd..7d696d813 100644
--- a/apps/documenteditor/mobile/src/view/settings/ApplicationSettings.jsx
+++ b/apps/documenteditor/mobile/src/view/settings/ApplicationSettings.jsx
@@ -1,4 +1,4 @@
-import React, {Fragment} from "react";
+import React, {Fragment, useState} from "react";
 import { observer, inject } from "mobx-react";
 import { Page, Navbar, List, ListItem, BlockTitle, Toggle } from "framework7-react";
 import { useTranslation } from "react-i18next";
@@ -14,6 +14,7 @@ const PageApplicationSettings = props => {
     const isHiddenTableBorders = store.isHiddenTableBorders;
     const isComments = store.isComments;
     const isResolvedComments = store.isResolvedComments;
+    const [isThemeDark, setIsThemeDark] = useState(props.isThemeDark);
 
     const changeMeasureSettings = value => {
         store.changeUnitMeasurement(value);
@@ -48,6 +49,11 @@ const PageApplicationSettings = props => {
                                     }}
                             />
                         </ListItem>
+                        <ListItem title={'Dark theme'}>
+                            <Toggle checked={isThemeDark}
+                                onToggleChange={toggle => {props.switchDarkTheme(!toggle), setIsThemeDark(!toggle)}}>
+                            </Toggle>
+                        </ListItem>
                     </List>
                     <List>
                         <ListItem title={_t.textNoCharacters} disabled={displayMode !== 'markup'}>{/*ToDo: if (DisplayMode == "final" || DisplayMode == "original") {disabled} */}