diff --git a/apps/common/mobile/lib/controller/Themes.jsx b/apps/common/mobile/lib/controller/Themes.jsx index abc65cd7a3..704eae3843 100644 --- a/apps/common/mobile/lib/controller/Themes.jsx +++ b/apps/common/mobile/lib/controller/Themes.jsx @@ -1,81 +1,33 @@ -import React from 'react'; +import React, { createContext, useCallback, useEffect } from 'react'; import { LocalStorage } from "../../utils/LocalStorage.mjs"; import { inject, observer } from "mobx-react"; +import { useTranslation } from 'react-i18next'; -class ThemesController extends React.Component { - constructor(props) { - super(props); - this.themes_map = { - dark : { - id: 'theme-dark', - type: 'dark' - }, - light: { - id: 'theme-light', - type: 'light' - }, - system: { - id: 'theme-system', - type: 'system' - } - } +export const ThemesContext = createContext(); +export const ThemesProvider = props => { + const { t } = useTranslation(); + const storeThemes = props.storeThemes; + const themes = storeThemes.themes; + const nameColors = storeThemes.nameColors; + const translationThemes = getTranslationThemes(); - this.name_colors = [ - "canvas-background", - "canvas-content-background", - "canvas-page-border", + useEffect(() => { + initTheme(); + }, []); - "canvas-ruler-background", - "canvas-ruler-border", - "canvas-ruler-margins-background", - "canvas-ruler-mark", - "canvas-ruler-handle-border", - "canvas-ruler-handle-border-disabled", - - "canvas-high-contrast", - "canvas-high-contrast-disabled", - - "canvas-cell-border", - "canvas-cell-title-border", - "canvas-cell-title-border-hover", - "canvas-cell-title-border-selected", - "canvas-cell-title-hover", - "canvas-cell-title-selected", - - "canvas-dark-cell-title", - "canvas-dark-cell-title-hover", - "canvas-dark-cell-title-selected", - "canvas-dark-cell-title-border", - "canvas-dark-cell-title-border-hover", - "canvas-dark-cell-title-border-selected", - "canvas-dark-content-background", - "canvas-dark-page-border", - - "canvas-scroll-thumb", - "canvas-scroll-thumb-hover", - "canvas-scroll-thumb-pressed", - "canvas-scroll-thumb-border", - "canvas-scroll-thumb-border-hover", - "canvas-scroll-thumb-border-pressed", - "canvas-scroll-arrow", - "canvas-scroll-arrow-hover", - "canvas-scroll-arrow-pressed", - "canvas-scroll-thumb-target", - "canvas-scroll-thumb-target-hover", - "canvas-scroll-thumb-target-pressed", - ]; - - this.setClientTheme = this.setClientTheme.bind(this); - this.checkConfigTheme = this.checkConfigTheme.bind(this); - this.checkSystemDarkTheme = this.checkSystemDarkTheme.bind(this); + function getTranslationThemes() { + return Object.keys(themes).reduce((acc, theme) => { + acc[theme] = (t(`Common.Themes.${theme}`)); + return acc; + }, {}); } - init() { - const appOptions = this.props.storeAppOptions; + const initTheme = () => { + // localStorage.clear(); const editorConfig = window.native?.editorConfig; const obj = LocalStorage.getItem("ui-theme"); - let theme = this.themes_map.light; + let theme = themes.light; if(editorConfig) { const themeConfig = editorConfig.theme; @@ -84,81 +36,77 @@ class ThemesController extends React.Component { if(isSelectTheme) { if(!!obj) { - theme = this.setClientTheme(theme, obj); + theme = setClientTheme(theme, obj); } else { - theme = this.checkConfigTheme(theme, typeTheme); + theme = checkConfigTheme(theme, typeTheme); } } else { - theme = this.checkConfigTheme(theme, typeTheme); + theme = checkConfigTheme(theme, typeTheme); } - appOptions.setConfigSelectTheme(isSelectTheme); + storeThemes.setConfigSelectTheme(isSelectTheme); } else { if (!!obj) { - theme = this.setClientTheme(theme, obj); + theme = setClientTheme(theme, obj); } else { - theme = this.checkSystemDarkTheme(theme); + theme = checkSystemDarkTheme(theme); } } - this.changeColorTheme(theme); + changeColorTheme(theme); $$(window).on('storage', e => { - if ( e.key == LocalStorage.prefix + 'ui-theme' ) { - if ( !!e.newValue ) { - this.changeColorTheme(JSON.parse(e.newValue), true); + if (e.key == LocalStorage.prefix + 'ui-theme') { + if (!!e.newValue) { + changeColorTheme(JSON.parse(e.newValue)); } } }); } - setClientTheme(theme, obj) { + const setClientTheme = (theme, obj) => { const type = JSON.parse(obj).type; - const appOptions = this.props.storeAppOptions; if(type !== 'system') { - theme = this.themes_map[JSON.parse(obj).type]; + theme = themes[JSON.parse(obj).type]; LocalStorage.setItem("ui-theme", JSON.stringify(theme)); - appOptions.setColorTheme(theme); + storeThemes.setColorTheme(theme); } else { - theme = this.checkSystemDarkTheme(theme); + theme = checkSystemDarkTheme(theme); } return theme; } - checkConfigTheme(theme, typeTheme) { - const appOptions = this.props.storeAppOptions; - + const checkConfigTheme = (theme, typeTheme) => { if(typeTheme && typeTheme !== 'system') { - theme = this.themes_map[typeTheme]; + theme = themes[typeTheme]; LocalStorage.setItem("ui-theme", JSON.stringify(theme)); - appOptions.setColorTheme(theme); + storeThemes.setColorTheme(theme); } else { - theme = this.checkSystemDarkTheme(theme); + theme = checkSystemDarkTheme(theme); } return theme; } - checkSystemDarkTheme(theme) { - const appOptions = this.props.storeAppOptions; - + const checkSystemDarkTheme = (theme) => { if(window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches) { - theme = this.themes_map['dark']; + theme = themes['dark']; - LocalStorage.setItem("ui-theme", JSON.stringify(this.themes_map["system"])); - appOptions.setColorTheme(this.themes_map["system"]); + LocalStorage.setItem("ui-theme", JSON.stringify(themes["system"])); + storeThemes.setColorTheme(themes["system"]); } return theme; } - get_current_theme_colors(colors) { + const getCurrentThemeColors = colors => { let out_object = {}; const style = getComputedStyle(document.body); + colors.forEach((item, index) => { out_object[item] = style.getPropertyValue('--' + item).trim() }) @@ -166,13 +114,28 @@ class ThemesController extends React.Component { return out_object; } - changeColorTheme(theme) { + const changeColorTheme = theme => { + // let theme = themes.light; + + // if(type !== "system") { + // theme = themes[type]; + + // LocalStorage.setItem("ui-theme", JSON.stringify(theme)); + // storeThemes.setColorTheme(theme); + // } else { + // const isSystemDarkTheme = this.checkSystemDarkTheme(); + // if(isSystemDarkTheme) theme = themes.dark; + + // LocalStorage.setItem("ui-theme", JSON.stringify(themes["system"])); + // storeThemes.setColorTheme(themes["system"]); + // } + const $body = $$('body'); $body.attr('class') && $body.attr('class', $body.attr('class').replace(/\s?theme-type-(?:dark|light)/, '')); $body.addClass(`theme-type-${theme.type}`); - const on_engine_created = api => { - let obj = this.get_current_theme_colors(this.name_colors); + const onEngineCreated = api => { + let obj = getCurrentThemeColors(nameColors); obj.type = theme.type; obj.name = theme.id; @@ -180,18 +143,16 @@ class ThemesController extends React.Component { }; const api = Common.EditorApi ? Common.EditorApi.get() : undefined; - if(!api) Common.Notifications.on('engineCreated', on_engine_created); - else on_engine_created(api); + if(!api) Common.Notifications.on('engineCreated', onEngineCreated); + else onEngineCreated(api); } - componentDidMount() { - this.init(); - } - - render() { - return null; - } + return ( + + {props.children} + + ) } -const themes = inject('storeAppOptions')(observer(ThemesController)); +const themes = inject('storeThemes')(observer(ThemesProvider)); export {themes as Themes} \ No newline at end of file diff --git a/apps/common/mobile/lib/store/themes.js b/apps/common/mobile/lib/store/themes.js new file mode 100644 index 0000000000..d8b883a1d0 --- /dev/null +++ b/apps/common/mobile/lib/store/themes.js @@ -0,0 +1,82 @@ +import {action, observable, makeObservable} from 'mobx'; + +export class storeThemes { + constructor() { + makeObservable(this, { + isConfigSelectTheme: observable, + setConfigSelectTheme: action, + colorTheme: observable, + setColorTheme: action + }); + } + + isConfigSelectTheme = true; + setConfigSelectTheme(value) { + this.isConfigSelectTheme = value; + } + + colorTheme; + setColorTheme(theme) { + this.colorTheme = theme; + } + + themes = { + dark: { + id: 'theme-dark', + type: 'dark' + }, + light: { + id: 'theme-light', + type: 'light' + }, + system: { + id: 'theme-system', + type: 'system' + } + } + + nameColors = [ + "canvas-background", + "canvas-content-background", + "canvas-page-border", + + "canvas-ruler-background", + "canvas-ruler-border", + "canvas-ruler-margins-background", + "canvas-ruler-mark", + "canvas-ruler-handle-border", + "canvas-ruler-handle-border-disabled", + + "canvas-high-contrast", + "canvas-high-contrast-disabled", + + "canvas-cell-border", + "canvas-cell-title-border", + "canvas-cell-title-border-hover", + "canvas-cell-title-border-selected", + "canvas-cell-title-hover", + "canvas-cell-title-selected", + + "canvas-dark-cell-title", + "canvas-dark-cell-title-hover", + "canvas-dark-cell-title-selected", + "canvas-dark-cell-title-border", + "canvas-dark-cell-title-border-hover", + "canvas-dark-cell-title-border-selected", + "canvas-dark-content-background", + "canvas-dark-page-border", + + "canvas-scroll-thumb", + "canvas-scroll-thumb-hover", + "canvas-scroll-thumb-pressed", + "canvas-scroll-thumb-border", + "canvas-scroll-thumb-border-hover", + "canvas-scroll-thumb-border-pressed", + "canvas-scroll-arrow", + "canvas-scroll-arrow-hover", + "canvas-scroll-arrow-pressed", + "canvas-scroll-thumb-target", + "canvas-scroll-thumb-target-hover", + "canvas-scroll-thumb-target-pressed", + ]; +} \ No newline at end of file diff --git a/apps/documenteditor/mobile/locale/en.json b/apps/documenteditor/mobile/locale/en.json index d4cb0bba34..feaf4f40e5 100644 --- a/apps/documenteditor/mobile/locale/en.json +++ b/apps/documenteditor/mobile/locale/en.json @@ -174,6 +174,12 @@ "textCustomColors": "Custom Colors", "textStandartColors": "Standard Colors", "textThemeColors": "Theme Colors" + }, + "Themes": { + "textTheme": "Theme", + "system": "Same as system", + "dark": "Dark", + "light": "Light" } }, "ContextMenu": { diff --git a/apps/documenteditor/mobile/src/controller/Main.jsx b/apps/documenteditor/mobile/src/controller/Main.jsx index e142f4608f..711e44a42b 100644 --- a/apps/documenteditor/mobile/src/controller/Main.jsx +++ b/apps/documenteditor/mobile/src/controller/Main.jsx @@ -19,7 +19,6 @@ import PluginsController from '../../../../common/mobile/lib/controller/Plugins. import EncodingController from "./Encoding"; import DropdownListController from "./DropdownList"; import { Device } from '../../../../common/mobile/utils/device'; -import { Themes } from '../../../../common/mobile/lib/controller/Themes'; @inject( "users", @@ -35,7 +34,7 @@ import { Themes } from '../../../../common/mobile/lib/controller/Themes'; "storeLinkSettings", "storeToolbarSettings", "storeNavigation" - ) +) class MainController extends Component { constructor(props) { super(props); @@ -1262,9 +1261,8 @@ class MainController extends Component { - - ) + ) } componentDidMount() { diff --git a/apps/documenteditor/mobile/src/controller/settings/ApplicationSettings.jsx b/apps/documenteditor/mobile/src/controller/settings/ApplicationSettings.jsx index 9497094203..5ad1b106a5 100644 --- a/apps/documenteditor/mobile/src/controller/settings/ApplicationSettings.jsx +++ b/apps/documenteditor/mobile/src/controller/settings/ApplicationSettings.jsx @@ -2,60 +2,17 @@ import React, { Component } from "react"; import { ApplicationSettings } from "../../view/settings/ApplicationSettings"; import { LocalStorage } from '../../../../../common/mobile/utils/LocalStorage.mjs'; import {observer, inject} from "mobx-react"; -// import { Themes } from '../../../../../common/mobile/lib/controller/Themes'; +import { ThemesContext } from "../../../../../common/mobile/lib/controller/Themes"; class ApplicationSettingsController extends Component { constructor(props) { super(props); - this.nameColors = [ - "canvas-background", - "canvas-content-background", - "canvas-page-border", - - "canvas-ruler-background", - "canvas-ruler-border", - "canvas-ruler-margins-background", - "canvas-ruler-mark", - "canvas-ruler-handle-border", - "canvas-ruler-handle-border-disabled", - - "canvas-high-contrast", - "canvas-high-contrast-disabled", - - "canvas-cell-border", - "canvas-cell-title-border", - "canvas-cell-title-border-hover", - "canvas-cell-title-border-selected", - "canvas-cell-title-hover", - "canvas-cell-title-selected", - - "canvas-dark-cell-title", - "canvas-dark-cell-title-hover", - "canvas-dark-cell-title-selected", - "canvas-dark-cell-title-border", - "canvas-dark-cell-title-border-hover", - "canvas-dark-cell-title-border-selected", - "canvas-dark-content-background", - "canvas-dark-page-border", - - "canvas-scroll-thumb", - "canvas-scroll-thumb-hover", - "canvas-scroll-thumb-pressed", - "canvas-scroll-thumb-border", - "canvas-scroll-thumb-border-hover", - "canvas-scroll-thumb-border-pressed", - "canvas-scroll-arrow", - "canvas-scroll-arrow-hover", - "canvas-scroll-arrow-pressed", - "canvas-scroll-thumb-target", - "canvas-scroll-thumb-target-hover", - "canvas-scroll-thumb-target-pressed", - ]; this.switchDisplayComments = this.switchDisplayComments.bind(this); this.props.storeApplicationSettings.changeUnitMeasurement(Common.Utils.Metric.getCurrentMetric()); - this.changeColorTheme = this.changeColorTheme.bind(this); } + static contextType = ThemesContext; + setUnitMeasurement(value) { value = (value !== null) ? parseInt(value) : Common.Utils.Metric.getDefaultMetric(); Common.Utils.Metric.setCurrentMetric(value); @@ -112,59 +69,6 @@ class ApplicationSettingsController extends Component { LocalStorage.setItem('mode-direction', value); } - checkSystemDarkTheme() { - if(window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches) { - return true; - } - - return false; - } - - get_current_theme_colors(colors) { - let out_object = {}; - const style = getComputedStyle(document.body); - colors.forEach((item, index) => { - out_object[item] = style.getPropertyValue('--' + item).trim() - }) - - return out_object; - } - - changeColorTheme(type) { - const appOptions = this.props.storeAppOptions; - const themesMap = appOptions.themesMap; - let theme = themesMap.light; - - if(type !== "system") { - theme = themesMap[type]; - - LocalStorage.setItem("ui-theme", JSON.stringify(theme)); - appOptions.setColorTheme(theme); - } else { - const isSystemDarkTheme = this.checkSystemDarkTheme(); - if(isSystemDarkTheme) theme = themesMap.dark; - - LocalStorage.setItem("ui-theme", JSON.stringify(themesMap["system"])); - appOptions.setColorTheme(themesMap["system"]); - } - - const $body = $$('body'); - $body.attr('class') && $body.attr('class', $body.attr('class').replace(/\s?theme-type-(?:dark|light)/, '')); - $body.addClass(`theme-type-${theme.type}`); - - const on_engine_created = api => { - let obj = this.get_current_theme_colors(this.nameColors); - obj.type = theme.type; - obj.name = theme.id; - - api.asc_setSkin(obj); - }; - - const api = Common.EditorApi ? Common.EditorApi.get() : undefined; - if(!api) Common.Notifications.on('engineCreated', on_engine_created); - else on_engine_created(api); - } - render() { return ( ) } diff --git a/apps/documenteditor/mobile/src/page/main.jsx b/apps/documenteditor/mobile/src/page/main.jsx index ea6a28c1e9..061a998dcf 100644 --- a/apps/documenteditor/mobile/src/page/main.jsx +++ b/apps/documenteditor/mobile/src/page/main.jsx @@ -1,7 +1,6 @@ - import React, { Component } from 'react'; import { CSSTransition } from 'react-transition-group'; -import { f7, Icon, FabButtons, FabButton, Page, View, Navbar, Subnavbar } from 'framework7-react'; +import { f7, Icon, Page, View, Navbar, Subnavbar } from 'framework7-react'; import { observer, inject } from "mobx-react"; import { withTranslation } from 'react-i18next'; import EditOptions from '../view/edit/Edit'; @@ -16,6 +15,7 @@ import NavigationController from '../controller/settings/Navigation'; import { AddLinkController } from '../controller/add/AddLink'; import EditHyperlink from '../controller/edit/EditHyperlink'; import Snackbar from '../components/Snackbar/Snackbar'; +import { Themes } from '../../../../common/mobile/lib/controller/Themes'; class MainPage extends Component { constructor(props) { @@ -156,106 +156,108 @@ class MainPage extends Component { } return ( - - {/* Top Navbar */} - - {!isHideLogo && -
{ - window.open(`${__PUBLISHER_URL__}`, "_blank"); - }}>
} - - - - - + + + {/* Top Navbar */} + + {!isHideLogo && +
{ + window.open(`${__PUBLISHER_URL__}`, "_blank"); + }}>
} + + + + + - {/* Page content */} + {/* Page content */} - - + + - {isShowPlaceholder ? -
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
: null - } + {isShowPlaceholder ? +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
: null + } - {/* { - Device.phone ? null : - } */} - this.handleOptionsViewClosed('snackbar')} - message={isMobileView ? t("Toolbar.textSwitchedMobileView") : t("Toolbar.textSwitchedStandardView")} - /> - - { - !this.state.editOptionsVisible ? null : - - } - { - !this.state.addOptionsVisible ? null : - - } - { - !this.state.addLinkSettingsVisible ? null : - - } - { - !this.state.editLinkSettingsVisible ? null : - - } - { - !this.state.settingsVisible ? null : - - } - { - !this.state.collaborationVisible ? null : - - } - { - !this.state.navigationVisible ? null : - - } - {isFabShow && - -
this.turnOffViewerMode()}> - -
- - } - {appOptions.isDocReady && } - + {/* { + Device.phone ? null : + } */} + this.handleOptionsViewClosed('snackbar')} + message={isMobileView ? t("Toolbar.textSwitchedMobileView") : t("Toolbar.textSwitchedStandardView")} + /> + + { + !this.state.editOptionsVisible ? null : + + } + { + !this.state.addOptionsVisible ? null : + + } + { + !this.state.addLinkSettingsVisible ? null : + + } + { + !this.state.editLinkSettingsVisible ? null : + + } + { + !this.state.settingsVisible ? null : + + } + { + !this.state.collaborationVisible ? null : + + } + { + !this.state.navigationVisible ? null : + + } + {isFabShow && + +
this.turnOffViewerMode()}> + +
+ + } + {appOptions.isDocReady && } + + ) } } diff --git a/apps/documenteditor/mobile/src/store/appOptions.js b/apps/documenteditor/mobile/src/store/appOptions.js index 207c5f6a38..97e7fda368 100644 --- a/apps/documenteditor/mobile/src/store/appOptions.js +++ b/apps/documenteditor/mobile/src/store/appOptions.js @@ -39,42 +39,11 @@ export class storeAppOptions { isFileEncrypted: observable, setEncryptionFile: action, - - colorTheme: observable, - setColorTheme: action, - - isConfigSelectTheme: observable, - setConfigSelectTheme: action }); } - - themesMap = { - dark: { - id: 'theme-dark', - type: 'dark' - }, - light: { - id: 'theme-light', - type: 'light' - }, - system: { - id: 'theme-system', - type: 'system' - } - }; isEdit = false; - isConfigSelectTheme = true; - setConfigSelectTheme(value) { - this.isConfigSelectTheme = value; - } - - colorTheme; - setColorTheme(theme) { - this.colorTheme = theme; - } - isFileEncrypted = false; setEncryptionFile(value) { this.isFileEncrypted = value; @@ -95,7 +64,6 @@ export class storeAppOptions { this.isMobileView = !this.isMobileView; } - isViewer = true; changeViewerMode(value) { this.isViewer = value; diff --git a/apps/documenteditor/mobile/src/store/mainStore.js b/apps/documenteditor/mobile/src/store/mainStore.js index d8afbbdb0e..097ab512d9 100644 --- a/apps/documenteditor/mobile/src/store/mainStore.js +++ b/apps/documenteditor/mobile/src/store/mainStore.js @@ -17,6 +17,7 @@ import {storeReview} from '../../../../common/mobile/lib/store/review'; import {storeComments} from "../../../../common/mobile/lib/store/comments"; import {storeToolbarSettings} from "./toolbar"; import { storeNavigation } from './navigation'; +import { storeThemes } from '../../../../common/mobile/lib/store/themes'; export const stores = { storeAppOptions: new storeAppOptions(), @@ -36,6 +37,7 @@ export const stores = { storeReview: new storeReview(), storeComments: new storeComments(), storeToolbarSettings: new storeToolbarSettings(), - storeNavigation: new storeNavigation() + storeNavigation: new storeNavigation(), + storeThemes: new storeThemes() }; diff --git a/apps/documenteditor/mobile/src/view/settings/ApplicationSettings.jsx b/apps/documenteditor/mobile/src/view/settings/ApplicationSettings.jsx index 8a15cc331e..2494f242f1 100644 --- a/apps/documenteditor/mobile/src/view/settings/ApplicationSettings.jsx +++ b/apps/documenteditor/mobile/src/view/settings/ApplicationSettings.jsx @@ -2,11 +2,11 @@ import React, {Fragment, useState} from "react"; import { observer, inject } from "mobx-react"; import { Page, Navbar, List, ListItem, BlockTitle, Toggle, f7 } from "framework7-react"; import { useTranslation } from "react-i18next"; -// import { Themes } from '../../../../../common/mobile/lib/controller/Themes'; const PageApplicationSettings = props => { const { t } = useTranslation(); const _t = t("Settings", { returnObjects: true }); + const storeThemes = props.storeThemes; const displayMode = props.storeReview.displayMode; const store = props.storeApplicationSettings; const unitMeasurement = store.unitMeasurement; @@ -15,7 +15,6 @@ const PageApplicationSettings = props => { const isHiddenTableBorders = store.isHiddenTableBorders; const isComments = store.isComments; const isResolvedComments = store.isResolvedComments; - // const [isThemeDark, setIsThemeDark] = useState(Themes.isCurrentDark); const changeMeasureSettings = value => { store.changeUnitMeasurement(value); @@ -24,18 +23,19 @@ const PageApplicationSettings = props => { // set mode const appOptions = props.storeAppOptions; - const colorTheme = appOptions.colorTheme; + const colorTheme = storeThemes.colorTheme; + const translationThemes = props.translationThemes; const typeTheme = colorTheme.type; - const isConfigSelectTheme = appOptions.isConfigSelectTheme; + const isConfigSelectTheme = storeThemes.isConfigSelectTheme; const isViewer = appOptions.isViewer; const _isEdit = appOptions.isEdit; const _isShowMacros = (!appOptions.isDisconnected && appOptions.customization) ? appOptions.customization.macros !== false : true; - const themes = { - 'dark': t('Settings.textDark'), - 'light': t('Settings.textLight'), - 'system': t('Settings.textSameAsSystem') - } + // const themes = { + // 'dark': t('Settings.textDark'), + // 'light': t('Settings.textLight'), + // 'system': t('Settings.textSameAsSystem') + // } return ( @@ -102,7 +102,10 @@ const PageApplicationSettings = props => { {!!isConfigSelectTheme && - + } {_isShowMacros && @@ -119,17 +122,23 @@ const PageApplicationSettings = props => { const PageThemeSettings = props => { const { t } = useTranslation(); const _t = t("Settings", { returnObjects: true }); - const appOptions = props.storeAppOptions; - const colorTheme = appOptions.colorTheme; + const storeThemes = props.storeThemes; + const colorTheme = storeThemes.colorTheme; const typeTheme = colorTheme.type; + const translationThemes = props.translationThemes; return ( - props.changeColorTheme('system')} name="system" title={t('Settings.textSameAsSystem')}> + {Object.keys(translationThemes).map((theme, index) => { + return ( + props.changeColorTheme(theme)} name={theme} title={translationThemes[theme]}> + ) + })} + {/* props.changeColorTheme('system')} name="system" title={t('Settings.textSameAsSystem')}> props.changeColorTheme('light')} name="light" title={t('Settings.textLight')}> - props.changeColorTheme('dark')} name="dark" title={t('Settings.textDark')}> + props.changeColorTheme('dark')} name="dark" title={t('Settings.textDark')}> */} ) @@ -193,9 +202,9 @@ const PageMacrosSettings = props => { ); }; -const ApplicationSettings = inject("storeApplicationSettings", "storeAppOptions", "storeReview")(observer(PageApplicationSettings)); +const ApplicationSettings = inject("storeApplicationSettings", "storeAppOptions", "storeReview", "storeThemes")(observer(PageApplicationSettings)); const MacrosSettings = inject("storeApplicationSettings")(observer(PageMacrosSettings)); const Direction = inject("storeApplicationSettings")(observer(PageDirection)); -const ThemeSettings = inject("storeAppOptions")(observer(PageThemeSettings)); +const ThemeSettings = inject("storeAppOptions", "storeThemes")(observer(PageThemeSettings)); export {ApplicationSettings, MacrosSettings, Direction, ThemeSettings}; \ No newline at end of file