feat(app): added theme automatization

Author: shoudaos

package.json

@@ -4,8 +4,12 @@
   "private": true,
   "scripts": {
     "serve": "vue-cli-service serve --port 3000",
+    "serve:dark": "VUE_APP_THEME='dark' yarn serve",
+    "serve:light": "VUE_APP_THEME='light' yarn serve",
     "serve:backend": "VUE_APP_BACKEND=true vue-cli-service serve --port 3000",
     "build": "VUE_APP_BACKEND=true vue-cli-service build",
+    "build:dark": "VUE_APP_THEME='dark' yarn build",
+    "build:light": "VUE_APP_THEME='light' yarn build",
     "lint": "vue-cli-service lint",
     "start": "node server.js"
   },

src/components/Helper/Helper.vue

@@ -10,10 +10,10 @@
                 </div>
                 <h6>Theme</h6>
             </header>
-            <a href="#" class="theme-preview active">
+            <a :href="theme === 'light' ? 'https://demo.flatlogic.com/light-blue-vue/dark' : '#'" class="theme-preview" :class="{active: theme !== 'light'}">
                 <img src="../../assets/dark-theme.png" alt="Dark Theme" class="img-thumbnail">
             </a>
-            <a href="https://demo.flatlogic.com/light-blue-vue/white" class="theme-preview">
+            <a :href="theme !== 'light' ? 'https://demo.flatlogic.com/light-blue-vue/light' : '#'" class="theme-preview" :class="{active: theme === 'light'}">
                 <img src="../../assets/white-theme.png" alt="White Theme" class="img-thumbnail">
             </a>
             <div class="widget-body mt-3">
@@ -68,10 +68,13 @@
 </template>
 
 <script>
+  import config from '../../config';
+
 export default {
     name: 'Helper',
     data() {
         return {
+            theme: config.theme,
             opened: false,
         }
     },

src/config.js

@@ -1,8 +1,33 @@
 const hostApi = process.env.NODE_ENV === "development" ? "http://localhost" : "https://flatlogic-node-backend.herokuapp.com";
 const portApi = process.env.NODE_ENV === "development" ? 8080 : "";
 const baseURLApi = `${hostApi}${portApi ? `:${portApi}` : ``}`;
+const chartColors = process.env.VUE_APP_THEME === 'light' ? {
+  blue: '#196EFF',
+  green: '#2ada7a',
+  orange: '#ffc107',
+  red: '#ff0115',
+  purple: '#a700ae',
+  dark: '#3c484f',
+  teal: '#7f49fa',
+  pink: '#e671b8',
+  gray: '#d6dee5',
+  textColor: '#444'
+} : {
+  blue: '#2e74e3',
+  green: '#25b932',
+  orange: '#f0af03',
+  red: '#db4a00',
+  purple: '#a700ae',
+  dark: '#3c484f',
+  teal: '#14d3d3',
+  pink: '#e671b8',
+  gray: '#d6dee5',
+  textColor: '#fff'
+};
 
 export default {
+  theme: process.env.VUE_APP_THEME,
+  chartColors,
   hostApi,
   portApi,
   baseURLApi,