feat: dark mode

src/App.vue

@@ -1,6 +1,6 @@
 <template>
   <div id="app">
-    <v-app>
+    <v-app :dark="dark">
       <router-view name="header" keep-alive></router-view>
       <transition name="fade">
         <router-view keep-alive></router-view>
@@ -10,9 +10,65 @@
 </template>
 
 <script>
-  export default {
-    name: 'app',
-  };
-
+export default {
+  name: 'app',
+  computed: {
+    enabled() {
+      return this.$store.state.settings.dark;
+    },
+  },
+  watch: {
+    enabled() {
+      this.getDark();
+    },
+  },
+  data() {
+    return {
+      dark: false,
+    };
+  },
+  methods: {
+    getDark() {
+      const tmp = JSON.parse(localStorage.getItem('dark') || '{}');
+      this.dark = false;
+      if (tmp.enabled) {
+        if (tmp.auto) {
+          const from = (tmp.from || '22:00').split(':').map(Number);
+          const to = (tmp.to || '9:00').split(':').map(Number);
+          const date = new Date();
+          const fromDate = new Date(
+            date.getFullYear(),
+            date.getMonth(),
+            date.getDate(),
+            from[0],
+            from[1],
+            0,
+          );
+          const toDate = new Date(
+            date.getFullYear(),
+            date.getMonth(),
+            date.getDate(),
+            to[0],
+            to[1],
+            0,
+          );
+          if (fromDate > toDate && date > toDate && fromDate < date) {
+            this.dark = true;
+            return;
+          } else if (date > fromDate && date < toDate) {
+            this.dark = true;
+            return;
+          }
+          this.dark = false;
+          return;
+        }
+        this.dark = true;
+      }
+    },
+  },
+  mounted() {
+    this.getDark();
+  },
+};
 </script>
-<style lang="scss" rel='stylesheet/scss' src="./style.scss"></style>
+<style lang="scss" rel="stylesheet/scss" src="./style.scss"></style>

src/components/Config/main.js

@@ -20,6 +20,7 @@ export default {
           [f.name]: f.value,
         })).reduce((a, x) => Object.assign(a, x)),
       });
+      this.$emit('save');
     },
   },
   mounted() {},

src/components/Settings/index.vue

@@ -3,8 +3,34 @@
     <v-content>
       <v-container fluid>
         <v-card class="container">
-          <Config :settings="settings" id="global"/>
-          <p class="text-xs-right">Made with <v-icon small color="red">favorite</v-icon> by <a href="https://arouillard.fr">Alexis Rouillard</a></p>
+          <h4 class="headline">Dark mode</h4>
+          <v-layout row>
+            <v-flex class="dark-p">
+              <v-switch :label="`On`" v-model="dark"></v-switch>
+            </v-flex>
+            <v-flex class="dark-p">
+              <v-checkbox :label="`Auto`" :disabled="!dark" v-model="dark_auto"></v-checkbox>
+            </v-flex>
+            <v-flex>
+              <v-menu ref="from_menu" :disabled="!dark_auto" lazy :close-on-content-click="false" v-model="from_menu" transition="scale-transition" offset-y full-width
+                :nudge-right="40" max-width="290px" min-width="290px" :return-value.sync="from">
+                <v-text-field :disabled="!dark_auto" slot="activator" label="from" v-model="from" prepend-icon="access_time" readonly></v-text-field>
+                <v-time-picker format="24h" v-model="from" @change="$refs.from_menu.save(from)"></v-time-picker>
+              </v-menu>
+            </v-flex>
+            <v-flex>
+              <v-menu ref="to_menu" :disabled="!dark_auto" lazy :close-on-content-click="false" v-model="to_menu" transition="scale-transition" offset-y full-width
+                :nudge-right="40" max-width="290px" min-width="290px" :return-value.sync="to">
+                <v-text-field :disabled="!dark_auto" slot="activator" label="to" v-model="to" prepend-icon="access_time" readonly></v-text-field>
+                <v-time-picker format="24h" v-model="to" @change="$refs.to_menu.save(to)"></v-time-picker>
+              </v-menu>
+            </v-flex>
+          </v-layout>
+          <Config @save="save()" :settings="settings" id="global" />
+          <p class="text-xs-right">Made with
+            <v-icon small color="red">favorite</v-icon> by
+            <a href="https://arouillard.fr">Alexis Rouillard</a>
+          </p>
         </v-card>
       </v-container>
     </v-content>

src/components/Settings/main.js

@@ -9,10 +9,34 @@ export default {
   data() {
     return {
       settings: Settings,
+      dark: false,
+      dark_auto: false,
+      from: '22:00',
+      to: '9:00',
+      from_menu: false,
+      to_menu: false,
     };
   },
-  methods: {},
+  methods: {
+    save() {
+      localStorage.setItem('dark', JSON.stringify({
+        enabled: this.dark,
+        auto: this.dark_auto,
+        from: this.from,
+        to: this.to,
+      }));
+      this.$store.commit('SET_SETTINGS', {
+        key: 'dark',
+        settings: this.dark,
+      });
+    },
+  },
   mounted() {
+    const dark = JSON.parse(localStorage.getItem('dark') || '{}');
+    this.dark = dark.enabled;
+    this.dark_auto = dark.auto;
+    this.from = dark.from;
+    this.to = dark.to;
     this.settings = this.settings.map((f) => {
       if (this.$store.state.settings.global[f.name] !== undefined) {
         f.value = this.$store.state.settings.global[f.name];

src/components/Settings/style.scss

@@ -2,4 +2,7 @@
   .card {
     padding: 30px;
   }
+  .dark-p {
+    padding: 18px 0 0;
+  }
 }

src/helpers/settings.js

@@ -5,6 +5,7 @@ export default {
     global: Settings.map(f => ({
       [f.name]: f.value,
     })).reduce((a, x) => Object.assign(a, x)),
+    dark: false,
   },
   mutations: {
     SET_SETTINGS(state, {

src/main.js

@@ -20,6 +20,7 @@ import VSwitch from 'vuetify/es5/components/VSwitch';
 import VSpeedDial from 'vuetify/es5/components/VSpeedDial';
 import VProgressLinear from 'vuetify/es5/components/VProgressLinear';
 import VProgressCircular from 'vuetify/es5/components/VProgressCircular';
+import VTimePicker from 'vuetify/es5/components/VTimePicker';
 import transitions from 'vuetify/es5/components/transitions';
 import directives from 'vuetify/es5/directives';
 import axios from 'axios';
@@ -56,6 +57,7 @@ Vue.use(Vuetify, {
     VSpeedDial,
     VProgressLinear,
     VProgressCircular,
+    VTimePicker,
   },
   directives,
   transitions,