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 {
)
}
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 => {
}}
/>
+
+ {props.switchDarkTheme(!toggle), setIsThemeDark(!toggle)}}>
+
+
{/*ToDo: if (DisplayMode == "final" || DisplayMode == "original") {disabled} */}