Edit and add styles v.4

apps/common/mobile/resources/less/common-ios.less

@@ -39,6 +39,7 @@
     --f7-list-chevron-icon-color: @text-tertiary;
 
     --f7-toggle-inactive-color: @background-menu-divider;
+    --f7-toggle-border-color: @background-menu-divider;
     --f7-actions-button-border-color: @background-menu-divider;
     --f7-popover-bg-color: @background-primary;
     --f7-dialog-bg-color-rgb: @background-secondary;
@@ -46,6 +47,9 @@
     --f7-dialog-text-color: @text-normal;
     --f7-dialog-border-divider-color: @background-menu-divider;
 
+    --f7-subnavbar-border-color: @background-menu-divider;
+    --f7-list-border-color: @background-menu-divider;
+
     // Main Toolbar
     #editor-navbar.navbar .right a + a,
     #editor-navbar.navbar .left a + a {
@@ -623,6 +627,12 @@
             padding-left: 0;
         }
     }
+
+    // Toggle Icon 
+
+    .toggle-icon {
+        background: transparent;
+    }
 }
 
 

apps/common/mobile/resources/less/common-material.less

@@ -85,8 +85,11 @@
         --f7-list-item-border-color: @background-menu-divider;
         --f7-list-chevron-icon-color: @text-tertiary;
         --f7-toggle-inactive-color: @background-menu-divider;
+        --f7-toggle-border-color: @background-menu-divider;
         --f7-actions-button-text-color: @text-normal;
         --f7-input-text-color: @text-normal;
+        --f7-subnavbar-border-color: @background-menu-divider;
+        --f7-list-border-color: @background-menu-divider;
     }
 
     .add-popup {
@@ -247,6 +250,9 @@
     }
     // List
     .list {
+        li {
+            color: @text-normal;
+        }
         .item-inner {
             color: @text-normal;
         }

apps/presentationeditor/mobile/src/page/app.jsx

@@ -31,7 +31,7 @@ export default class extends React.Component {
 
     render() {
         return (
-            <App { ...f7params } className={'app-layout'} >
+            <App { ...f7params } className={'app-layout'}>
                 {/* Your main view, should have "view-main" class */}
                 <View main className="safe-areas" url="/" />
                 <MainController />

apps/spreadsheeteditor/mobile/src/controller/settings/ApplicationSettings.jsx

@@ -87,6 +87,20 @@ class ApplicationSettingsController extends Component {
         if (regCode!==null) api.asc_setLocale(+regCode);
     }
 
+    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',  $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;
+    }
+
     render() {
         return (
             <ApplicationSettings 
@@ -99,6 +113,8 @@ class ApplicationSettingsController extends Component {
                 onChangeMacrosSettings={this.onChangeMacrosSettings}  
                 onFormulaLangChange={this.onFormulaLangChange}     
                 onRegSettings={this.onRegSettings}
+                isThemeDark={this.isThemeDark}    
+                switchDarkTheme={this.switchDarkTheme}      
             />
         )
     }

apps/spreadsheeteditor/mobile/src/less/app-material.less

@@ -6,9 +6,9 @@
 
 
 .device-android {
-    --f7-navbar-bg-color: @themeColor;
+    --f7-navbar-bg-color: @brandColor;
-    --f7-navbar-link-color: @navBarIconColor;
+    --f7-navbar-link-color: @text-link;
-    --f7-navbar-text-color: @navBarIconColor;
+    --f7-navbar-text-color: @text-normal;
     --f7-list-button-border-color: @listButtonBorderColor;
 
     // Main Toolbar
@@ -33,7 +33,7 @@
             border: 2px solid var(--f7-checkbox-inactive-color);
         }
         label.item-checkbox input[type='checkbox']:checked ~ .icon-checkbox {
-            border-color: @themeColor;
+            border-color: @brandColor;
             background-color: transparent;
         }
         label.item-content i.icon.icon-checkbox:after {
@@ -45,7 +45,7 @@
             top: 50%;
             margin-left: -5px;
             margin-top: -5px;
-            background-color: @themeColor;
+            background-color: @brandColor;
             border-radius: 100%;
         }
     }

apps/spreadsheeteditor/mobile/src/less/app.less

@@ -1,12 +1,26 @@
-
-@themeColor: #40865c;
-
 @import '../../../../common/mobile/resources/less/variables.less';
 @import '../../../../../vendor/framework7-react/node_modules/framework7/less/mixins.less';
-
 @import '../../../../common/mobile/resources/less/_mixins.less';
 @import '../../../../common/mobile/resources/less/colors-table.less';
 @import '../../../../common/mobile/resources/less/colors-table-dark.less';
+
+// @themeColor: #40865c;
+@brandColor: var(--brand-cell);
+
+.device-ios {
+    --toolbar-background: var(--background-primary, #fff);
+    --toolbar-icons: var(--brand-cell, #40865C);
+}
+.device-android {
+    --toolbar-background: var(--brand-cell, #40865C);
+
+    .theme-type-dark {
+        --toolbar-icons: var(--brand-cell, #40865C);
+    }
+}
+
+@toolbar-background: var(--toolbar-background);
+
 @import '../../../../common/mobile/resources/less/collaboration.less';
 @import '../../../../common/mobile/resources/less/common.less';
 @import '../../../../common/mobile/resources/less/common-ios.less';

apps/spreadsheeteditor/mobile/src/less/celleditor.less

@@ -28,7 +28,8 @@
     &:after {
         content: '';
         position: absolute;
-        background-color: @border-regular-control;
+        // background-color: @border-regular-control;
+        background-color: @background-menu-divider;
         display: block;
         z-index: 15;
         top: auto;
@@ -43,11 +44,12 @@
 
     #box-cell-name {
         display: inline-flex;
-        background-color: var(--f7-navbar-bg-color);
+        // background-color: var(--f7-navbar-bg-color);
+        // background-color: @fill-white;
 
-        .md & {
+        // .md & {
-            background-color: @gray-light;
+        //     background-color: @gray-light;
-        }
+        // }
     }
 
     #idx-cell-name {
@@ -80,9 +82,10 @@
     #idx-cell-content {
         padding: 3px 3px;
         line-height: 1.428571429;
-        color: #000;
+        // color: #000;
+        color: @text-normal;
         vertical-align: middle;
-        background-color: @contentBackColor;
+        // background-color: @contentBackColor;
         min-height: @cellEditorHeight;
         height: 100%;
         width: 100%;
@@ -97,7 +100,8 @@
             width: 8px;
             height: 8px;
             background-color: transparent;
-            border: solid 1px black;
+            // border: solid 1px black;
+            border: solid 1px @brandColor;
             border-bottom: none;
             border-right: none;
 
@@ -117,8 +121,12 @@
         }
     }
 
+    .ce-group {
+        background-color: @background-secondary;
+    }
+
     .group--content {
         position: relative;
-        .hairline(left, @statusBarBorderColor);
+        .hairline(left, @background-menu-divider);
     }
 }

apps/spreadsheeteditor/mobile/src/less/statusbar.less

@@ -2,10 +2,10 @@
 @fontColor: #000;
 
 .statusbar {
-    .hairline(top, @border-regular-control);
+    .hairline(top, @background-menu-divider);
     height: @statusbar-height;
     min-height: @statusbar-height;
-    background-color: @background-normal;
+    background-color: @background-tertiary;
     display: flex;
 
     .tab {
@@ -21,7 +21,7 @@
         height: 100%;
         position: relative;
 
-        .hairline(right, @border-regular-control);
+        .hairline(right, @background-menu-divider);
     }
 
     .statusbar--box-tabs {
@@ -65,9 +65,10 @@
         width: 22px;
         height: 22px;
         &.icon-plus {
-            @source: '<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 22 22"><g><path d="M22,12H12v10h-1V12H1v-1h10V1h1v10h10V12z"/></g></svg>';
+            // @source: '<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 22 22"><g><path d="M22,12H12v10h-1V12H1v-1h10V1h1v10h10V12z"/></g></svg>';
-            .encoded-svg-mask(@source, @fontColor);
+            // .encoded-svg-mask(@source, @fontColor);
-            background-image: none;
+            // background-image: none;
+            .encoded-svg-mask('<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 22 22"><g><path d="M22,12H12v10h-1V12H1v-1h10V1h1v10h10V12z"/></g></svg>')
         }
     }
 }

apps/spreadsheeteditor/mobile/src/page/app.jsx

@@ -35,7 +35,7 @@ export default class extends React.Component {
 
     render() {
         return (
-            <App { ...f7params } >
+            <App { ...f7params } className={'app-layout'}>
                 {/* Your main view, should have "view-main" class */}
                 <View main className="safe-areas" url="/" />
                 <MainController />

apps/spreadsheeteditor/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, Icon } from "framework7-react";
 import { useTranslation } from "react-i18next";
@@ -20,6 +20,7 @@ const PageApplicationSettings = props => {
     const isRefStyle = storeApplicationSettings.isRefStyle;
     const isComments = storeApplicationSettings.isComments;
     const isResolvedComments = storeApplicationSettings.isResolvedComments;
+    const [isThemeDark, setIsThemeDark] = useState(props.isThemeDark);
 
     const changeMeasureSettings = value => {
         storeApplicationSettings.changeUnitMeasurement(value);
@@ -92,6 +93,11 @@ const PageApplicationSettings = props => {
                                 }}
                         />
                     </ListItem>
+                    <ListItem title={'Dark theme'}>
+                        <Toggle checked={isThemeDark}
+                            onToggleChange={toggle => {props.switchDarkTheme(!toggle), setIsThemeDark(!toggle)}}>
+                        </Toggle>
+                    </ListItem>
                 </List>
             {/* } */}
             {/* {_isShowMacros && */}