support turning on dark theme manually

src/MobileApp.vue

@@ -12,6 +12,13 @@ import routes from './router/mobile.js';
 export default {
     data() {
         const self = this;
+        let darkMode = 'auto';
+
+        if (self.$settings.getTheme() === 'light') {
+            darkMode = false;
+        } else if (self.$settings.getTheme() === 'dark') {
+            darkMode = true;
+        }
 
         return {
             isProduction: self.$settings.isProduction(),
@@ -23,7 +30,7 @@ export default {
                     primary: '#c67e48'
                 },
                 routes: routes,
-                darkMode: self.$settings.isEnableAutoDarkMode() ? 'auto' : false,
+                darkMode: darkMode,
                 touch: {
                     disableContextMenu: true,
                     tapHold: true

src/lib/settings.js

@@ -7,6 +7,7 @@ const settingsLocalStorageKey = 'ebk_app_settings';
 const serverSettingsCookieKey = 'ebk_server_settings';
 
 const defaultSettings = {
+    theme: 'auto',
     timeZone: '',
     debug: false,
     applicationLock: false,
@@ -26,8 +27,7 @@ const defaultSettings = {
         defaultTransactionCategoryFilter: {},
         defaultSortingType: statisticsConstants.defaultSortingType
     },
-    animate: true,
-    autoDarkMode: true
+    animate: true
 };
 
 function getOriginalSettings() {
@@ -124,6 +124,8 @@ function clearSettings() {
 
 export default {
     isProduction: () => process.env.NODE_ENV === 'production',
+    getTheme: () => getOption('theme'),
+    setTheme: value => setOption('theme', value),
     getTimezone: () => getOption('timeZone'),
     setTimezone: value => setOption('timeZone', value),
     isEnableDebug: () => getOption('debug'),
@@ -160,8 +162,6 @@ export default {
     setStatisticsSortingType: value => setSubOption('statistics', 'defaultSortingType', value),
     isEnableAnimate: () => getOption('animate'),
     setEnableAnimate: value => setOption('animate', value),
-    isEnableAutoDarkMode: () => getOption('autoDarkMode'),
-    setEnableAutoDarkMode: value => setOption('autoDarkMode', value),
     isUserRegistrationEnabled: () => getServerSetting('r') === '1',
     isDataExportingEnabled: () => getServerSetting('e') === '1',
     getMapProvider: () => getServerSetting('m'),

src/locales/en.js

@@ -934,6 +934,9 @@ export default {
     'Filter Transaction Categories': 'Filter Transaction Categories',
     'User Profile': 'User Profile',
     'Language': 'Language',
+    'Theme': 'Theme',
+    'Light': 'Light',
+    'Dark': 'Dark',
     'Timezone': 'Timezone',
     'System Default': 'System Default',
     'Language Default': 'Language Default',
@@ -948,7 +951,6 @@ export default {
     'Show Account Balance': 'Show Account Balance',
     'Show Total Amount In Transaction List Page': 'Show Total Amount In Transaction List Page',
     'Enable Animate': 'Enable Animate',
-    'Enable Auto Dark Mode': 'Enable Auto Dark Mode',
     'Use preset transaction categories': 'Use preset transaction categories',
     'Preset Categories': 'Preset Categories',
     'You have been successfully registered': 'You have been successfully registered',

src/locales/zh_Hans.js

@@ -934,6 +934,9 @@ export default {
     'Filter Transaction Categories': '过滤交易类型',
     'User Profile': '用户信息',
     'Language': '语言',
+    'Theme': '主题',
+    'Light': '浅色',
+    'Dark': '深色',
     'Timezone': '时区',
     'System Default': '系统默认',
     'Language Default': '语言默认',
@@ -948,7 +951,6 @@ export default {
     'Show Account Balance': '显示账户余额',
     'Show Total Amount In Transaction List Page': '交易列表页显示总金额',
     'Enable Animate': '启用动画',
-    'Enable Auto Dark Mode': '启用自动深色模式',
     'Use preset transaction categories': '使用预设交易分类',
     'Preset Categories': '预设分类',
     'You have been successfully registered': '注册成功',

src/views/mobile/SettingsPage.vue

@@ -15,6 +15,16 @@
 
         <f7-block-title>{{ $t('Application') }}</f7-block-title>
         <f7-list strong inset dividers>
+            <f7-list-item
+                :title="$t('Theme')"
+                smart-select :smart-select-params="{ openIn: 'popup', popupPush: true, closeOnSelect: true, scrollToSelectedItem: true, searchbar: true, searchbarPlaceholder: $t('Theme'), searchbarDisableText: $t('Cancel'), appendSearchbarNotFound: $t('No results'), popupCloseLinkText: $t('Done') }">
+                <select v-model="theme">
+                    <option value="auto">{{ $t('System Default') }}</option>
+                    <option value="light">{{ $t('Light') }}</option>
+                    <option value="dark">{{ $t('Dark') }}</option>
+                </select>
+            </f7-list-item>
+
             <f7-list-item
                 :title="$t('Timezone')"
                 smart-select :smart-select-params="{ openIn: 'popup', popupPush: true, closeOnSelect: true, scrollToSelectedItem: true, searchbar: true, searchbarPlaceholder: $t('Timezone'), searchbarDisableText: $t('Cancel'), appendSearchbarNotFound: $t('No results'), popupCloseLinkText: $t('Done') }">
@@ -77,11 +87,6 @@
                 <f7-toggle :checked="isEnableAnimate" @toggle:change="isEnableAnimate = $event"></f7-toggle>
             </f7-list-item>
 
-            <f7-list-item>
-                <span>{{ $t('Enable Auto Dark Mode') }}</span>
-                <f7-toggle :checked="isEnableAutoDarkMode" @toggle:change="isEnableAutoDarkMode = $event"></f7-toggle>
-            </f7-list-item>
-
             <f7-list-item :title="$t('About')" link="/about" :after="version"></f7-list-item>
         </f7-list>
     </f7-page>
@@ -107,6 +112,17 @@ export default {
         allTimezones() {
             return this.$locale.getAllTimezones(true);
         },
+        theme: {
+            get: function () {
+                return this.$settings.getTheme();
+            },
+            set: function (value) {
+                if (value !== this.$settings.getTheme()) {
+                    this.$settings.setTheme(value);
+                    location.reload();
+                }
+            }
+        },
         currentTimezone: {
             get: function () {
                 return this.$locale.getTimezone();
@@ -188,17 +204,6 @@ export default {
                     location.reload();
                 }
             }
-        },
-        isEnableAutoDarkMode: {
-            get: function () {
-                return this.$settings.isEnableAutoDarkMode();
-            },
-            set: function (value) {
-                if (value !== this.$settings.isEnableAutoDarkMode()) {
-                    this.$settings.setEnableAutoDarkMode(value);
-                    location.reload();
-                }
-            }
         }
     },
     methods: {