feat(config, helpers, core, app): auto theme dark light ✨

src/config/defaults/development.js

@@ -21,7 +21,7 @@ module.exports = {
   },
   vuetify: {
     theme: {
-      dark: true, // dark theme
+      dark: 'auto', // dark theme true / false / auto (based on prefers-color-scheme)
       flat: true, // flat by default
       footer: false, // display footer
       snackbar: { // kind of notifications on requests
@@ -37,7 +37,7 @@ module.exports = {
       },
       themes: {
         dark: {
-          primary: '#FFFFFF',
+          primary: '#34495e',
           secondary: '#3498db',
           background: '#1F1F1F',
           surface: '#282A2E',
@@ -49,10 +49,10 @@ module.exports = {
           onError: '#000000',
         },
         light: {
-          primary: '#000000',
+          primary: '#bdc3c7',
           secondary: '#e67e22',
-          background: '#F9F9F9',
-          surface: '#FFFFFF',
+          background: '#f3f3f6',
+          surface: '#ffffff',
           error: '#B00020',
           onPrimary: '#FFFFFF',
           onSecondary: '#000000',

src/lib/helpers/theme.js

@@ -0,0 +1,20 @@
+/**
+ * @desc Function to return actual theme
+ * @param {String} option in config
+ * @return {String} theme
+ */
+exports.defineTheme = (theme) => {
+  console.log(theme);
+  if (theme === 'auto') return window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light';
+  return theme ? 'dark' : 'light';
+};
+
+/**
+ * @desc Function to return actual theme
+ * @param {String} option in config
+ * @return {Boolean} dark value
+ */
+exports.isDark = (theme) => {
+  if (theme === 'auto') return !!(window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches);
+  return !!theme;
+};

src/modules/_app/app.vue

@@ -33,6 +33,7 @@ import waosHeader from '@/modules/_core/components/core.header.component.vue';
 import waosNav from '@/modules/_core/components/core.nav.component.vue';
 import waosFooter from '@/modules/_core/components/core.footer.component.vue';
 import router from '@/modules/_app/app.router';
+import theme from '@/lib/helpers/theme';
 
 /**
  * Export default
@@ -80,8 +81,11 @@ export default {
         throw err;
       }),
     );
+    // set base theme
+    this.$vuetify.theme.dark = theme.isDark(this.config.vuetify.theme.dark);
   },
 };
+
 </script>
 
 

src/modules/_core/components/core.footer.component.vue

@@ -1,5 +1,5 @@
 <template>
-    <v-footer :style="{background: this.config.vuetify.theme.themes[theme].surface}" app>
+    <v-footer :style="{background: this.config.vuetify.theme.themes[theme].surface, color: config.vuetify.theme.themes[theme].onPrimary}" app>
       <div class="flex-grow-1"></div>
       <div>&copy; 2019 <a href="https://weareopensource.me">We Are Open Source</a></div>
     </v-footer>

src/modules/_core/components/core.header.component.vue

@@ -1,19 +1,22 @@
 <template>
   <v-app-bar
     :clipped-left="config.vuetify.drawer.clipped"
-    :style="{background: config.vuetify.theme.themes[theme].surface}"
+    :style="{background: config.vuetify.theme.themes[theme].primary, color: config.vuetify.theme.themes[theme].onPrimary}"
     :flat="config.vuetify.theme.flat"
     app
   >
     <v-app-bar-nav-icon
+      :style="{color: config.vuetify.theme.themes[theme].onPrimary}"
       v-if="config.vuetify.drawer.type !== 'permanent' && config.vuetify.drawer.type !== 'mini' && (!config.vuetify.theme.navigation.displayIfLogged || isLoggedIn)"
       @click.stop="drawer = !drawer"
     ></v-app-bar-nav-icon>
     <v-app-bar-nav-icon
+      :style="{color: config.vuetify.theme.themes[theme].onPrimary}"
       v-if="config.vuetify.drawer.type === 'mini' && (!config.vuetify.theme.navigation.displayIfLogged || isLoggedIn) && !this.$vuetify.breakpoint.mdAndDown"
       @click.stop="mini = !mini;"
     ></v-app-bar-nav-icon>
     <v-app-bar-nav-icon
+      :style="{color: config.vuetify.theme.themes[theme].onPrimary}"
       v-if="config.vuetify.drawer.type === 'mini' && (!config.vuetify.theme.navigation.displayIfLogged || isLoggedIn) && this.$vuetify.breakpoint.mdAndDown"
       @click.stop="drawer = !drawer; mini = false;"
     ></v-app-bar-nav-icon>
@@ -22,12 +25,12 @@
     </v-toolbar-title>
     <div class="flex-grow-1"></div>
     <v-btn v-if="!isLoggedIn" icon>
-      <router-link to="/signin">
-        <v-icon>fa-user</v-icon>
+      <router-link to="/signin" >
+        <v-icon :style="{color: config.vuetify.theme.themes[theme].onPrimary}">fa-user</v-icon>
       </router-link>
     </v-btn>
     <v-btn v-else @click="signout" icon>
-      <v-icon>fa-arrow-right</v-icon>
+      <v-icon :style="{color: config.vuetify.theme.themes[theme].onPrimary}">fa-arrow-right</v-icon>
     </v-btn>
   </v-app-bar>
 </template>

src/modules/_core/components/core.nav.component.vue

@@ -6,7 +6,7 @@
       :mini-variant="mini"
       :permanent="config.vuetify.drawer.type === 'permanent'"
       :temporary="config.vuetify.drawer.type === 'temporary'"
-      :style="{background: config.vuetify.theme.themes[theme].surface}"
+      :style="{background: config.vuetify.theme.themes[theme].primary}"
       :src="config.vuetify.theme.navigation.background"
       app
     >
@@ -20,15 +20,15 @@
           <v-list-item-action
           :style="(config.vuetify.theme.navigation.selectBorder && testRoute(item.path, $route.path)) ? 'margin-left: -4px;' : 'margin-left: -4px;'"
           >
-            <v-icon>fa-{{ item.meta.icon }}</v-icon>
+            <v-icon :style="{color: config.vuetify.theme.themes[theme].onPrimary}">fa-{{ item.meta.icon }}</v-icon>
           </v-list-item-action>
           <v-list-item-content>
-            <v-list-item-title>{{ item.name }} {{ item.name }}</v-list-item-title>
+            <v-list-item-title :style="{color: config.vuetify.theme.themes[theme].onPrimary}">{{ item.name }} {{ item.name }}</v-list-item-title>
           </v-list-item-content>
         </v-list-item>
       </v-list>
       <template v-slot:append v-if="!config.vuetify.theme.footer">
-        <div class="pa-2 caption">
+        <div class="pa-2 caption" :style="{color: config.vuetify.theme.themes[theme].onPrimary}">
           <center>&copy; <a href="https://weareopensource.me">WAOS</a></center>
         </div>
       </template>

src/modules/_core/stores/core.store.js

@@ -4,6 +4,7 @@
 // import _ from 'lodash';
 import Vue from 'vue';
 import _ from 'lodash';
+import theme from '@/lib/helpers/theme';
 import config from '@/config';
 
 /**
@@ -53,7 +54,7 @@ const mutations = {
 const state = {
   drawer: config.vuetify.drawer.model,
   mini: config.vuetify.drawer.mini,
-  theme: config.vuetify.theme.dark ? 'dark' : 'light',
+  theme: theme.isDark(config.vuetify.theme.dark) ? 'dark' : 'light',
   nav: [],
 };