From 7dc628cfcc74a2b7140507635395bf296c037ffa Mon Sep 17 00:00:00 2001
From: MaysWind <i@mayswind.net>
Date: Sun, 1 Nov 2020 20:36:55 +0800
Subject: [PATCH] add enable auto dark mode option

---
 src/Mobile.vue                |  3 ++-
 src/lib/settings.js           |  5 ++++-
 src/locales/en.js             |  1 +
 src/locales/zh_Hans.js        |  1 +
 src/views/mobile/Settings.vue | 15 +++++++++++++++
 5 files changed, 23 insertions(+), 2 deletions(-)

diff --git a/src/Mobile.vue b/src/Mobile.vue
index 5aefc8ca..82510287 100644
--- a/src/Mobile.vue
+++ b/src/Mobile.vue
@@ -19,7 +19,8 @@ export default {
                 routes: routes,
                 view: {
                     animate : self.$settings.isEnableAnimate()
-                }
+                },
+                autoDarkTheme: self.$settings.isEnableAutoDarkMode()
             }
         }
     }
diff --git a/src/lib/settings.js b/src/lib/settings.js
index 4ad19e5e..6a576c99 100644
--- a/src/lib/settings.js
+++ b/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'
 };
diff --git a/src/locales/en.js b/src/locales/en.js
index 618fb2f4..0d19bd9d 100644
--- a/src/locales/en.js
+++ b/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',
diff --git a/src/locales/zh_Hans.js b/src/locales/zh_Hans.js
index b7636279..98fec517 100644
--- a/src/locales/zh_Hans.js
+++ b/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': '用户注册已禁用',
diff --git a/src/views/mobile/Settings.vue b/src/views/mobile/Settings.vue
index 3a540a04..3ad512e2 100644
--- a/src/views/mobile/Settings.vue
+++ b/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: {