Auto darkmode

.gitignore

@@ -1,7 +1,7 @@
 .DS_Store
 # json config
-backend/src/sub-store.json
-backend/src/root.json
+sub-store.json
+root.json
 
 # Logs
 logs

web/src/App.vue

@@ -5,32 +5,16 @@
       <router-view></router-view>
     </v-main>
     <BottomNav></BottomNav>
-    <v-snackbar
-        :value="successMessage"
-        app
-        bottom
-        color="success"
-        elevation="20"
-    >
+    <v-snackbar :value="successMessage" app bottom color="success" elevation="20">
       {{ successMessage }}
     </v-snackbar>
 
-    <v-snackbar
-        :value="errorMessage"
-        app
-        bottom
-        color="error"
-        elevation="20"
-    >
+    <v-snackbar :value="errorMessage" app bottom color="error" elevation="20">
       {{ errorMessage }}
     </v-snackbar>
 
     <v-overlay :value="isLoading">
-      <v-progress-circular
-          indeterminate
-          size="64"
-          color="primary"
-      ></v-progress-circular>
+      <v-progress-circular indeterminate size="64" color="primary"></v-progress-circular>
     </v-overlay>
   </v-app>
 </template>
@@ -39,7 +23,7 @@
 
 import TopToolbar from "@/components/TopToolbar";
 import BottomNav from "@/components/BottomNav";
-import {showError} from "@/utils";
+import { showError } from "@/utils";
 
 
 async function initStore(store) {
@@ -68,13 +52,18 @@ export default {
 
   created() {
     initStore(this.$store);
-    this.$store.watch(
-        (state => state.settings.theme.darkMode),
-        (value => {
-          this.$vuetify.theme.dark = value;
-          window.localStorage.setItem("darkMode", value);
-        })
-    )
+
+    const vuetify = this.$vuetify;
+
+    if (window.matchMedia) {
+      if (window.matchMedia('(prefers-color-scheme: dark)').matches) {
+        vuetify.theme.dark = true;
+      }
+      window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', (e) => {
+        console.log(`changed to ${e.matches ? "dark" : "light"} mode`)
+        vuetify.theme.dark = e.matches ? true : false;
+      });
+    }
   },
 
   computed: {

web/src/components/ProxyList.vue

@@ -110,14 +110,11 @@ export default {
   methods: {
     async fetch() {
       try {
-        this.$store.commit("SET_LOADING", true);
         await axios.get(this.raw ? `${this.url}?raw=true` : this.url).then(resp => {
           let {data} = resp;
           // eslint-disable-next-line no-debugger
           this.proxies = data;
-        }).catch(err => {
-          this.$store.commit("SET_ERROR_MESSAGE", err);
-        });
+        })
 
         await axios.get(this.raw ? `${this.url}?target=URI&raw=true` : `${this.url}?target=URI`).then(resp => {
           const {data} = resp;
@@ -130,8 +127,8 @@ export default {
             this.uris.splice(idx, 0, null);
           }
         })
-      } finally {
-        this.$store.commit("SET_LOADING", false);
+      } catch (err) {
+        this.$store.commit("SET_ERROR_MESSAGE", err);
       }
     },
 

web/src/store/index.js

@@ -18,11 +18,7 @@ const store = new Vuex.Store({
         collections: {},
         artifacts: {},
         env: {},
-        settings: {
-            theme: {
-                darkMode: window.localStorage.getItem("darkMode") || false
-            }
-        }
+        settings: {}
     },
 
     mutations: {
@@ -48,10 +44,6 @@ const store = new Vuex.Store({
 
         SET_ERROR_MESSAGE(state, msg) {
             state.errorMessage = msg;
-        },
-
-        SET_DARK_MODE(state, on) {
-            state.settings.theme.darkMode = on;
         }
     },
 

web/src/views/Cloud.vue

@@ -352,7 +352,7 @@ export default {
     },
 
     getIconClass(url) {
-      return url.indexOf('#invert') !== -1 && !this.$store.state.settings.theme.darkMode ? 'invert' : ''
+      return url.indexOf('#invert') !== -1 && !this.$vuetify.theme.dark ? 'invert' : ''
     },
 
     openGist() {

web/src/views/SubEditor.vue

@@ -473,7 +473,7 @@ export default {
   },
   methods: {
     getIconClass(url) {
-      return url.indexOf('#invert') !== -1 && !this.$store.state.settings.theme.darkMode ? 'invert' : ''
+      return url.indexOf('#invert') !== -1 && !this.$vuetify.theme.dark ? 'invert' : ''
     },
     save() {
       if (this.isCollection) {

web/src/views/Subscription.vue

@@ -291,7 +291,7 @@ export default {
       }
     },
     getIconClass(url) {
-      return url.indexOf('#invert') !== -1 && !this.$store.state.settings.theme.darkMode ? 'invert' : ''
+      return url.indexOf('#invert') !== -1 && !this.$vuetify.theme.dark ? 'invert' : ''
     }
   }
 }

web/src/views/User.vue

@@ -67,20 +67,6 @@
               </v-row>
             </v-col>
           </v-list-item>
-          <v-divider></v-divider>
-          <v-subheader>外观</v-subheader>
-          <v-list-item>
-            <v-list-item-content>
-              夜间模式 (实验性支持)
-            </v-list-item-content>
-            <v-list-item-action>
-              <v-switch
-                  v-model="settings.theme.darkMode"
-                  hide-details
-                  label=""
-              />
-            </v-list-item-action>
-          </v-list-item>
         </v-list>
       </v-card-text>
       <v-divider></v-divider>
@@ -89,22 +75,6 @@
         <v-btn color="primary" small text @click="save()">保存</v-btn>
       </v-card-actions>
     </v-card>
-
-    <!--    <v-card>-->
-    <!--      <v-card-title>-->
-    <!--        <v-icon left>-->
-    <!--          mdi-star-->
-    <!--        </v-icon>-->
-    <!--        关于-->
-    <!--      </v-card-title>-->
-    <!--      <v-card-text>-->
-    <!--        <v-list>-->
-    <!--          <v-list-item>-->
-    <!--            <v-list-item-title>GitHub</v-list-item-title>-->
-    <!--          </v-list-item>-->
-    <!--        </v-list>-->
-    <!--      </v-card-text>-->
-    <!--    </v-card>-->
   </v-container>
 </template>