updated Theme Colors sidebar in Helper

Author: Yeliazar

src/components/Helper/Helper.vue

@@ -25,7 +25,7 @@
 
                     <h5 id="v-step-5">Navbar Color</h5>
                     <colorpicker
-                        :colors="appConfig.themeColors"
+                        :colors="appConfig.navbarColors"
                         :activeColor="navbarColorName"
                         @change="updateLayoutComponentColor({component: layoutComponents.NAVBAR, color: $event})"
                     ></colorpicker>
@@ -48,7 +48,7 @@
 
                     <h5 id="v-step-7">Sidebar Color</h5>
                     <colorpicker
-                        :colors="appConfig.themeColors"
+                        :colors="appConfig.sidebarColors"
                         :activeColor="sidebarColorName"
                         @change="updateLayoutComponentColor({component: layoutComponents.SIDEBAR, color: $event})"
                     ></colorpicker>
@@ -68,7 +68,7 @@
                         Documentation
                     </a>
                 </div>
-                <div class="d-flex justify-content-between mt-lg-1">
+                <div class="d-flex justify-content-between mt-1">
                     <a role="button"
                     target="_blank"
                     href="https://flatlogic.com/forum"
@@ -84,7 +84,7 @@
                         Github
                     </a>
                 </div>
-                <div class="mt-lg d-flex flex-column align-items-center theme-sharing">
+                <div class="mt-1 d-flex flex-column align-items-center theme-sharing">
                     <span class="fs-sm">
                         Thank you for sharing!
                     </span>

src/config.js

@@ -16,21 +16,21 @@ export default {
   },
   app: {
     sidebarTransitionTime: 300, //ms
-    sidebarColors: {
-      first: '#3D3D3D',
-      second: '#4B505F',
-      third: '#483CB6',
-      fourth: '#EFF2F5',
-      fifth: '#20AE8C'
-    },
-    navbarColors: {
-      first: '#ffffff',
-      second: '#E2E7EC',
-      third: '#C9D1FB',
-      fourth: '#C1C3CF',
-      fifth: '#0C2236',
-      sixth: '#6FB0F9'
-    },
+    sidebarColors: [
+      ['first', '#3D3D3D'],
+      ['second', '#4B505F'],
+      ['third', '#483CB6'],
+      ['fourth', '#EFF2F5'],
+      ['fifth', '#20AE8C']
+    ],
+    navbarColors: [
+      ['test', '#ffffff'],
+      ['test2', '#E2E7EC'],
+      ['test3', '#C9D1FB'],
+      ['test4', '#C1C3CF'],
+      ['test5', '#0C2236'],
+      ['test6', '#6FB0F9']
+    ],
     colors: {
       dark: "#002B49",
       light: "#FFFFFF",

src/store/layout.js

@@ -46,8 +46,8 @@ export default {
   state: {
     sidebarClose: false,
     sidebarStatic: false,
-    sidebarColorName: config.app.themeColors[0][0],
-    navbarColorName: config.app.themeColors[1][0],
+    sidebarColorName: config.app.sidebarColors[0][0],
+    navbarColorName: config.app.navbarColors[1][0],
     navbarColorScheme: NavbarColorSchemes.LIGHT,
     navbarType: NavbarTypes.STATIC,
     sidebarType: SidebarTypes.SOLID,

src/styles/_theme-variables.scss

@@ -1,13 +1,13 @@
 .root {
   &.sing-dashboard {
-    --logo-color: #5CB0FF;
+    --logo-color: #6C757D;
     --body-bg: #f9fbfd;
     --light-color: #F6F6E9;
 
-    --sidebar-bg-color: #002B49;
-    --sidebar-color: #fff;
-    --sidebar-action-bg: #042338;
-    --sidebar-item-active: #fff; //var(--light-color)
+    --sidebar-bg-color: #ffffff;
+    --sidebar-color: #6c757d;
+    --sidebar-action-bg: #f9fafe;
+    --sidebar-item-active: #6C757D; //var(--light-color)
     --sidebar-item-active-bg: #5CB0FF;
     --sidebar-badge-bg: #1A86D0;
 
@@ -37,46 +37,55 @@
     }
 
     &.sidebar-first {
-      --sidebar-bg-color: #004472;
-      --sidebar-action-bg: #00395f;
-      --sidebar-color: #fff;
+      --sidebar-icon-bg: #5CB0FF;
+      --sidebar-bg-color: #3D3D3D;
+      --logo-color: #C1C3CF;
+      --sidebar-item-active: #F6F6E9;
+      --sidebar-action-bg: #2D2D2D;
+      --sidebar-color: #F6F6E9;
+      --sidebar-nav-title-color: #F6F6E9;
     }
 
     &.sidebar-second {
-      --logo-color: #0D2B47;
-      --sidebar-color: #14191D;
-      --sidebar-bg-color: #e9ebef;
-      --sidebar-action-bg: #dbdee4;
-      --sidebar-item-active-bg: #0D2B47;
-      --sidebar-item-active: #14191D;
+      --logo-color: #C1C3CF;
+      --sidebar-color: #fff;
+      --sidebar-bg-color: #4B505F;
+      --sidebar-action-bg: #373C4D;
+      --sidebar-item-active-bg: #dedede;
+      --sidebar-item-active: #F6F6E9;
     }
 
     &.sidebar-third {
-      --logo-color: #0D2B47;
-     --sidebar-bg-color: #d1e7f5;
-      --sidebar-action-bg: #bedcf2;
+      --sidebar-icon-bg: #fff;
+      --logo-color: #0C2236;
+      --sidebar-item-active: #F6F6E9;
+      --important-notification-color: #fd5f00;
+      --sidebar-bg-color: #483CB6;
+      --sidebar-color: #F6F6E9 !important;
+      --sidebar-action-bg: #332A87;
     }
 
     &.sidebar-fourth {
-      --logo-color: #0D2B47;
-      --sidebar-bg-color: #ccdde9;
-      --sidebar-action-bg: #bacedc;
-      --sidebar-item-active-bg: #0D2B47;
+      --logo-color: #0C2236;
+      --sidebar-bg-color: #EFF2F5;
+      --sidebar-action-bg: #E2E7EC;
+      --sidebar-item-active-bg: #6FB0F9;
     }
 
     &.sidebar-fifth {
-      --logo-color: #0D2B47;
-      --sidebar-bg-color: #d6dfe6;
-      --sidebar-action-bg: #bdc9d4;
+      --logo-color: $white;
+      --sidebar-bg-color: #20AE8C;
+      --sidebar-action-bg: #119475;
       --sidebar-item-active-bg: #0D2B47;
+      --sidebar-color: #F6F6E9 !important;
     }
 
-    &.sidebar-sixth {
-      --sidebar-bg-color: #13191d;
-      --sidebar-color: #f6f6e9;
-      --sidebar-action-bg: #080c0f;
-      --sidebar-item-active-bg: #5CB0FF;
-    }
+    //&.sidebar-sixth {
+    //  --sidebar-bg-color: #13191d;
+    //  --sidebar-color: #f6f6e9;
+    //  --sidebar-action-bg: #080c0f;
+    //  --sidebar-item-active-bg: #5CB0FF;
+    //}
 
     &.sidebar-seventh {
       --sidebar-bg-color: #20ae8c;