add some color scheme

app/src/scss/_variables.scss

@@ -30,25 +30,71 @@
 $font-size-base: .9rem;
 $font-weight-bold: 500;
 
-$blue:   #2f7ed2;
+:root {
+  --background-color: #ffffff;
+  --background-color-secondary: #fafbfc;
+  --border-color: #c5d9e8;
+  --font-color: #2c405a;
+  --font-color-secondary: #3f536e;
+
+  --black: #2c405a;
+  --blue: #0079c4;
+  --green: #81c926;
+  --grey: #8eacc5;
+  --orange: #fd7b1f;
+  --purple: #ab7ef6;
+  --red: #e0102b;
+  --turquoise: #26c1c9;
+  --white: #ffffff;
+  --yellow: #faca00;
+  
+  --active: #0079c4;
+  --description: #8eacc5;
+  --error: #e0102b;
+  --normal: #c5d9e8;
+  --info: #0079c4;
+  --success: #81c926;
+  --warning: #ffc107;
+
+  --logo-src: "./assets/logo_dark.png";
+}
+
+[data-theme="true"] {
+  /* Variables for dark mode */
+  --background-color: #222c3c;
+  --background-color-secondary: #273142;
+  --border-color: #313d4f;
+  --font-color: #ffffff;
+  --font-color-secondary: #a9c7df;
+
+  --black: #25374f;
+  --blue: #0093ee;
+  --green: #96bf47;
+  --grey: #a9c7df;
+  --orange: #ffb610;
+  --purple: #ab7ef6;
+  --red: #e0102b;
+  --turquoise: #26c1c9;
+  --white: #ffffff;
+  --yellow: #ffc02a;
+  
+  --active: #0093ee;
+  --description: #8eacc5;
+  --error: #e0102b;
+  --normal: #313d4f;
+  --info: #0093ee;
+  --success: #96bf47;
+  --warning: #ffc02a;
+
+  --logo-src: "./assets/logo_light.png";
+}
+
 $purple: #9932cc;
-$yellow: #ffd452;
 
 $theme-colors: (
-  'best': $purple
+  'best': $purple,
 );
 
-:root {
-  --background-color: #fff;
-  --background-color-secondary: #fff;
-}
-
-[data-theme="darkMode"] {
-  /* Variables for dark mode */
-  --background-color: black;
-  --background-color-secondary: white;   
-}
-
 // Replace font-weight 300 with 200
 $font-weight-light: 200;
 $display1-weight: 200;
@@ -80,11 +126,12 @@ $list-group-item-padding-x: 1rem;
 @import '~bootstrap-vue/src/variables';
 
 
-$body-color: $gray-800;
+$body-color: var(--font-color);
 
-$hr-border-color: $gray-200;
+$hr-border-color: var(--border-color);
 
-$list-group-action-color: $gray-800;
+$list-group-action-color: var(--font-color);
+$list-group-action-color-secondary: var(--font-color-secondary);
 
 $background-color-primary: var(--background-color);
 

app/src/scss/main.scss

@@ -40,10 +40,12 @@ body {
   display: flex;
   align-items: center;
   background-color: $background-color-primary;
+  color: $list-group-action-color;
 }
 
 .list-group-item:hover {
   background-color: $background-color-secondary;
+  color: var(--font-color-secondary);
 }
 
 .form-control {
@@ -200,14 +202,15 @@ h3.card-title {
 }
 
 code {
-  background: ghostwhite;
+  background: var(--background-color-secondary);
 }
 
 .log {
   margin-bottom: 0;
   padding: 1rem;
-  background-color: $light;
+  background-color: var(--background-color-secondary);
   overflow: auto;
+  color: var(--font-color)
 }
 
 .unselectable {
@@ -217,3 +220,41 @@ code {
   -ms-user-select: none;
   user-select: none;
 }
+
+/*
+.badge-success, .alert-success {
+  background-color: var(--success);
+  border-color: var(--border-color);
+}
+
+.badge-info, .alert-info {
+  background-color: var(--info);
+  border-color: var(--border-color);
+}
+
+.badge-warning, .alert-warning  {
+  background-color: var(--warning);
+  border-color: var(--border-color);
+}
+
+.badge-danger, .alert-danger {
+  background-color: var(--error);
+  border-color: var(--border-color);
+}
+
+.list-group-item-success {
+  color: var(--success);
+}
+
+.list-group-item-info {
+  color: var(--info);
+}
+
+.list-group-item-warning {
+  color: var(--warning);
+}
+
+.list-group-item-danger {
+  color: var(--error);
+}
+*/

app/src/store/settings.js

@@ -52,7 +52,7 @@ export default {
     'SET_THEME' (state, boolean) {
       localStorage.setItem('theme', boolean)
       state.theme = boolean
-      document.documentElement.setAttribute('data-theme', boolean ? 'darkMode' : '')
+      document.documentElement.setAttribute('data-theme', boolean)
     }
   },