add enable auto dark mode option

src/Mobile.vue

@@ -19,7 +19,8 @@ export default {
                 routes: routes,
                 view: {
                     animate : self.$settings.isEnableAnimate()
-                }
+                },
+                autoDarkTheme: self.$settings.isEnableAutoDarkMode()
             }
         }
     }

src/lib/settings.js

@@ -5,7 +5,8 @@ const serverSettingsCookieKey = 'ACP_SETTINGS';
 
 const defaultSettings = {
     lang: 'en',
-    animate: true
+    animate: true,
+    autoDarkMode: false
 };
 
 function getOriginalSettings() {
@@ -62,5 +63,7 @@ export default {
     setLanguage: value => setOption('lang', value),
     isEnableAnimate: () => getOriginalOption('animate'),
     setEnableAnimate: value => setOption('animate', value),
+    isEnableAutoDarkMode: () => getOriginalOption('autoDarkMode'),
+    setEnableAutoDarkMode: value => setOption('autoDarkMode', value),
     isUserRegistrationEnabled: () => getServerSetting('r') === '1'
 };

src/locales/en.js

@@ -112,6 +112,7 @@ export default {
     'User Profile': 'User Profile',
     'Language': 'Language',
     'Enable Animate': 'Enable Animate',
+    'Enable Auto Dark Mode': 'Enable Auto Dark Mode',
     'You have been successfully registered': 'You have been successfully registered',
     'Unable to sign up': 'Unable to sign up',
     'User registration is disabled': 'User registration is disabled',

src/locales/zh_Hans.js

@@ -112,6 +112,7 @@ export default {
     'User Profile': '用户信息',
     'Language': '语言',
     'Enable Animate': '启用动画',
+    'Enable Auto Dark Mode': '启用自动深色模式',
     'You have been successfully registered': '注册成功',
     'Unable to sign up': '无法注册',
     'User registration is disabled': '用户注册已禁用',

src/views/mobile/Settings.vue

@@ -23,6 +23,10 @@
                 <span>{{ $t('Enable Animate') }}</span>
                 <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>
@@ -62,6 +66,17 @@ 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: {