From eebffdbf079dd5b59a2f308370de66bdd2ae75f8 Mon Sep 17 00:00:00 2001
From: zeus <rootapostolos@swarmlab.io>
Date: Thu, 20 Jan 2022 14:17:15 +0200
Subject: [PATCH] changes on theme 1

---
 .gitignore                                    |   4 +
 src/App.vue                                   |  25 +-
 src/assets/css/_bootswatch.scss               | 360 ++++++++++++++++++
 src/assets/css/_darkvariables.scss            | 168 ++++++++
 src/assets/css/_lightvariables.scss           |   6 +
 src/assets/css/_variables-backup.scss         | 254 ++++++++++++
 src/assets/css/my.scss                        |   6 +
 .../manageservices/view-dashboard.vue         |  11 +-
 src/components/mynetwork/AdhocView.vue        |   1 +
 src/config/dark.scss                          |  11 +
 src/store/modules/create_pipelineLLO.js       |  13 +
 11 files changed, 855 insertions(+), 4 deletions(-)
 create mode 100644 src/assets/css/_bootswatch.scss
 create mode 100644 src/assets/css/_darkvariables.scss
 create mode 100644 src/assets/css/_lightvariables.scss
 create mode 100644 src/assets/css/_variables-backup.scss
 create mode 100644 src/assets/css/my.scss
 create mode 100644 src/config/dark.scss

diff --git a/.gitignore b/.gitignore
index 83549bb..ce5b35d 100644
--- a/.gitignore
+++ b/.gitignore
@@ -18,6 +18,10 @@ viwsession/
 testfilemanager/
 README-update
 
+!./src-local/community/config/
+!./src-local/community/custom/
+!./src-local/community/README
+./src-local/community/
 src-local/community/rootapostolos@swarmlab.io_mytest1_microservice-ipterm/
 src-local/community/rootapostolos@swarmlab.io_ansibletest_microservice-alpine313/
 src-local/community/cse242017102@uniwa.gr_test_microservice-nodejs/
diff --git a/src/App.vue b/src/App.vue
index 1c72037..f962f1e 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -143,6 +143,7 @@
 
         <ul class="nav navbar-nav flex-row justify-content-md-center justify-content-start flex-nowrap">
 			<!-- --------------- socket connection -->
+
               <b-nav-item 
                               @click="onAction('check')"
 							>Check Connection Status:</b-nav-item>
@@ -712,6 +713,7 @@ export default {
 		this.$root.$off('hybrid_server_status')
  },
 	created() {
+
   },
   methods: {
 			setWarning(){
@@ -864,8 +866,24 @@ let info = '<div class="text-left" style="height: 550px; overflow-y: scroll;"><b
             focusCancel: true,
             confirmButtonText: 'Ok!'
           })
-}
-
+},
+/*
+ async setswarmlabtheme(v){
+  console.log('1- '+v)
+  if(v == 'slate'){
+     var swarmlabtheme = await store.getters['pipelineLLO/getmytheme']
+     //document.documentElement.style.setProperty('--swarmlab-body-background', swarmlabtheme.body_background)
+     document.querySelector('body').setAttribute('style', `background:${swarmlabtheme.body_background}`)
+  } else if(v == 'light'){
+     var swarmlabtheme = await store.getters['pipelineLLO/getmytheme']
+     var swarmlabthemetmp1 = "#EEF1F4!important"
+     document.querySelector('body').setAttribute('style', `background:${swarmlabthemetmp1}`)
+     //var swarmlabthemetmp =  '"--swarmlab-body-background: '+ swarmlabtheme.body_background +'"'
+   //document.documentElement.setAttribute("style", "--swarmlab-body-background: #EEF1F4!important");
+     //console.log(document.documentElement.style)
+   }
+ },
+*/
 
   }, 
   computed: {
@@ -883,6 +901,7 @@ let info = '<div class="text-left" style="height: 550px; overflow-y: scroll;"><b
 </script>
 
 <style>
+
 .active {
   background-color: #e7e7e7 !important;
   color: #0c5460 !important;
@@ -892,7 +911,7 @@ let info = '<div class="text-left" style="height: 550px; overflow-y: scroll;"><b
 
 
   body {
-    background: #EEF1F4 !important;
+    background:  #EEF1F4 !important;
   }
 
   .nav-background {
diff --git a/src/assets/css/_bootswatch.scss b/src/assets/css/_bootswatch.scss
new file mode 100644
index 0000000..f9c3d31
--- /dev/null
+++ b/src/assets/css/_bootswatch.scss
@@ -0,0 +1,360 @@
+// Slate 5.1.3
+// Bootswatch
+
+
+// Mixins
+
+@mixin btn-shadow($color){
+  @include gradient-y-three-colors(tint-color($color, 12%), $color, 60%, shade-color($color, 8%));
+  filter: none;
+}
+
+@mixin btn-shadow-inverse($color){
+  @include gradient-y-three-colors(shade-color($color, 36%), shade-color($color, 30%), 40%, shade-color($color, 26%));
+  filter: none;
+}
+
+// Navbar
+
+.navbar {
+  border: 1px solid rgba(0, 0, 0, .6);
+  text-shadow: 1px 1px 1px rgba(0, 0, 0, .3);
+
+  .container {
+    padding: 0;
+  }
+
+  .navbar-toggler {
+    border-color: rgba(0, 0, 0, .6);
+  }
+
+  &-fixed-top {
+    border-width: 0 0 1px;
+  }
+
+  &-fixed-bottom {
+    border-width: 1px 0 0;
+  }
+
+  .nav-link {
+    padding: 1rem;
+    border-left: 1px solid rgba(255, 255, 255, .1);
+    border-right: 1px solid rgba(0, 0, 0, .2);
+
+    &:hover,
+    &:focus {
+      @include btn-shadow-inverse($gray-800);
+      border-left: 1px solid rgba(0, 0, 0, .2);
+    }
+  }
+
+  &-brand {
+    padding: .75rem 1rem subtract(24px, .75rem);
+    margin-right: 0;
+    border-right: 1px solid rgba(0, 0, 0, .2);
+  }
+
+  .nav-item.active .nav-link {
+    background-color: rgba(0, 0, 0, .3);
+    border-left: 1px solid rgba(0, 0, 0, .2);
+  }
+
+  &-nav .nav-item + .nav-item {
+    margin-left: 0;
+  }
+
+  &.bg-light {
+    text-shadow: 1px 1px 1px rgba(0, 0, 0, .1);
+
+    .nav-link {
+      &:hover,
+      &:focus {
+        @include btn-shadow-inverse($gray-600);
+        border-left: 1px solid rgba(0, 0, 0, .2);
+      }
+    }
+  }
+}
+
+@media (max-width: 576px) {
+  .navbar-expand-sm {
+    .navbar-brand,
+    .nav-link {
+      border: none !important;
+    }
+  }
+}
+
+@media (max-width: 768px) {
+  .navbar-expand-md {
+    .navbar-brand,
+    .nav-link {
+      border: none !important;
+    }
+  }
+}
+
+@media (max-width: 992px) {
+  .navbar-expand-lg {
+    .navbar-brand,
+    .nav-link {
+      border: none !important;
+    }
+  }
+}
+
+// Buttons
+
+.btn {
+  border-color: rgba(0, 0, 0, .6);
+  text-shadow: 1px 1px 1px rgba(0, 0, 0, .3);
+
+  &:not([disabled]):not(.disabled).active,
+  &.disabled {
+    border-color: rgba(0, 0, 0, .6);
+    box-shadow: none;
+  }
+
+  &:hover,
+  &:focus,
+  &:not([disabled]):not(.disabled):active,
+  &:not([disabled]):not(.disabled):active:hover,
+  &:not([disabled]):not(.disabled).active:hover {
+    border-color: rgba(0, 0, 0, .6);
+  }
+}
+
+.btn-primary {
+  @include btn-shadow($primary);
+
+  &:not([disabled]):not(.disabled):hover,
+  &:not([disabled]):not(.disabled):focus,
+  &:not([disabled]):not(.disabled):active:hover,
+  &:not([disabled]):not(.disabled).active:hover {
+    @include btn-shadow-inverse($primary);
+  }
+}
+
+.btn-secondary {
+  @include btn-shadow($secondary);
+
+  &:not([disabled]):not(.disabled):hover,
+  &:not([disabled]):not(.disabled):focus,
+  &:not([disabled]):not(.disabled):active,
+  &:not([disabled]):not(.disabled).active {
+    @include btn-shadow-inverse($secondary);
+  }
+}
+
+.btn-success {
+  @include btn-shadow($success);
+  color: $white;
+
+  &:not([disabled]):not(.disabled):hover,
+  &:not([disabled]):not(.disabled):focus,
+  &:not([disabled]):not(.disabled):active,
+  &:not([disabled]):not(.disabled).active {
+    @include btn-shadow-inverse($success);
+  }
+}
+
+.btn-info {
+  @include btn-shadow($info);
+  color: $white;
+
+  &:not([disabled]):not(.disabled):hover,
+  &:not([disabled]):not(.disabled):focus,
+  &:not([disabled]):not(.disabled):active,
+  &:not([disabled]):not(.disabled).active {
+    @include btn-shadow-inverse($info);
+  }
+}
+
+.btn-warning {
+  @include btn-shadow($warning);
+  color: $white;
+
+  &:not([disabled]):not(.disabled):hover,
+  &:not([disabled]):not(.disabled):focus,
+  &:not([disabled]):not(.disabled):active,
+  &:not([disabled]):not(.disabled).active {
+    @include btn-shadow-inverse($warning);
+  }
+}
+
+.btn-danger {
+  @include btn-shadow($danger);
+
+  &:not([disabled]):not(.disabled):hover,
+  &:not([disabled]):not(.disabled):focus,
+  &:not([disabled]):not(.disabled):active,
+  &:not([disabled]):not(.disabled).active {
+    @include btn-shadow-inverse($danger);
+  }
+}
+
+.btn-outline {
+  &-primary {
+    color: $white;
+  }
+}
+
+.btn-link,
+.btn-link:hover {
+  border-color: transparent;
+}
+
+.btn-group,
+.btn-group-vertical {
+  .btn.active {
+    border-color: rgba(0, 0, 0, .6);
+  }
+}
+
+// Typography
+
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
+  text-shadow: -1px -1px 0 rgba(0, 0, 0, .3);
+}
+
+// Forms
+
+legend {
+  color: $white;
+}
+
+.input-group-addon {
+  @include btn-shadow($secondary);
+  text-shadow: 1px 1px 1px rgba(0, 0, 0, .3);
+  color: $white;
+}
+
+// Navs
+
+.nav-tabs {
+  .nav-link {
+    @include btn-shadow-inverse($gray-800);
+    border: 1px solid rgba(0, 0, 0, .6);
+
+    &:not([disabled]):not(.disabled):hover,
+    &:not([disabled]):not(.disabled):focus,
+    &:not([disabled]):not(.disabled):active,
+    &:not([disabled]):not(.disabled).active {
+      @include btn-shadow($gray-800);
+    }
+
+    &.disabled {
+      border: 1px solid rgba(0, 0, 0, .6);
+    }
+  }
+
+  .nav-link,
+  .nav-link:hover {
+    color: $white;
+  }
+}
+
+.nav-pills {
+  .nav-link {
+    @include btn-shadow($gray-800);
+    border: 1px solid rgba(0, 0, 0, .6);
+    text-shadow: 1px 1px 1px rgba(0, 0, 0, .3);
+    color: $white;
+
+    &:hover {
+      @include btn-shadow-inverse($gray-800);
+      border: 1px solid rgba(0, 0, 0, .6);
+    }
+  }
+
+  .nav-link.active,
+  .nav-link:hover {
+    background-color: transparent;
+    @include btn-shadow-inverse($gray-800);
+    border: 1px solid rgba(0, 0, 0, .6);
+  }
+
+  .nav-link.disabled,
+  .nav-link.disabled:hover {
+    @include btn-shadow($gray-800);
+    color: $nav-link-disabled-color;
+  }
+}
+
+.pagination {
+  .page-link {
+    text-shadow: 1px 1px 1px rgba(0, 0, 0, .3);
+    @include btn-shadow($gray-800);
+
+    &:hover {
+      @include btn-shadow-inverse($gray-800);
+      text-decoration: none;
+    }
+  }
+
+  .page-item.active .page-link {
+    @include btn-shadow-inverse($gray-800);
+  }
+
+  .page-item.disabled .page-link {
+    @include btn-shadow($gray-800);
+  }
+}
+
+.breadcrumb {
+  border: 1px solid rgba(0, 0, 0, .6);
+  text-shadow: 1px 1px 1px rgba(0, 0, 0, .3);
+  background-color: transparent;
+  @include btn-shadow($gray-800);
+
+  a,
+  a:hover {
+    color: $white;
+  }
+}
+
+// Indicators
+
+.alert {
+  border: none;
+  color: $white;
+
+  a,
+  .alert-link {
+    color: $white;
+    text-decoration: underline;
+  }
+
+  @each $color, $value in $theme-colors {
+    &-#{$color} {
+      background-color: $value;
+    }
+  }
+
+  &-light {
+    &,
+    a:not(.btn),
+    .alert-link {
+      color: $body-bg;
+    }
+  }
+}
+
+.badge {
+  &.bg-light {
+    color: $dark;
+  }
+}
+
+// Containers
+
+.list-group {
+  &-item-action:hover {
+    background-color: shade-color($gray-900, 10%);
+  }
+}
diff --git a/src/assets/css/_darkvariables.scss b/src/assets/css/_darkvariables.scss
new file mode 100644
index 0000000..49cecd4
--- /dev/null
+++ b/src/assets/css/_darkvariables.scss
@@ -0,0 +1,168 @@
+// Slate 5.1.3
+// Bootswatch
+
+$theme: "slate" !default;
+
+//
+// Color system
+//
+
+$white:    #fff !default;
+$gray-100: #f8f9fa !default;
+$gray-200: #e9ecef !default;
+$gray-300: #dee2e6 !default;
+$gray-400: #ced4da !default;
+$gray-500: #999 !default;
+$gray-600: #7a8288 !default;
+$gray-700: #52575c !default;
+$gray-800: #3a3f44 !default;
+$gray-900: #272b30 !default;
+$black:    #000 !default;
+
+$blue:    #007bff !default;
+$indigo:  #6610f2 !default;
+$purple:  #6f42c1 !default;
+$pink:    #e83e8c !default;
+$red:     #ee5f5b !default;
+$orange:  #fd7e14 !default;
+$yellow:  #f89406 !default;
+$green:   #62c462 !default;
+$teal:    #20c997 !default;
+$cyan:    #5bc0de !default;
+
+$primary:       $gray-800 !default;
+$secondary:     $gray-600 !default;
+$success:       $green !default;
+$info:          $cyan !default;
+$warning:       $yellow !default;
+$danger:        $red !default;
+$light:         $gray-200 !default;
+$dark:          $gray-900 !default;
+
+$min-contrast-ratio:   1.95 !default;
+
+// Body
+
+$body-bg:                   $gray-900 !default;
+$body-color:                #aaa !default;
+
+// Links
+
+$link-color:                $white !default;
+
+// Fonts
+
+// Tables
+
+$table-color:                 $white !default;
+$table-accent-bg:             rgba($white, .05) !default;
+$table-hover-bg:              rgba($white, .075) !default;
+$table-border-color:          rgba($black, .6) !default;
+$table-dark-border-color:     $table-border-color !default;
+$table-dark-color:            $white !default;
+
+$table-bg-scale:              0 !default;
+
+// Buttons
+
+$input-btn-padding-y:         .75rem !default;
+$input-btn-padding-x:         1rem !default;
+
+// Forms
+
+$input-bg:                              $white !default;
+$input-disabled-bg:                     #ccc !default;
+
+$input-color:                       $gray-900 !default;
+
+$form-check-input-bg:                     $white !default;
+
+// Dropdowns
+
+$dropdown-bg:                       $gray-800 !default;
+$dropdown-border-color:             rgba($black, .6) !default;
+$dropdown-divider-bg:               rgba($black, .15) !default;
+$dropdown-link-color:               $body-color !default;
+$dropdown-link-hover-color:         $white !default;
+$dropdown-link-hover-bg:            $body-bg !default;
+$dropdown-link-active-color:        $dropdown-link-hover-color !default;
+$dropdown-link-active-bg:           $dropdown-link-hover-bg !default;
+
+// Navs
+
+$nav-tabs-border-color:             rgba($black, .6) !default;
+$nav-tabs-link-hover-border-color:  $nav-tabs-border-color !default;
+$nav-tabs-link-active-color:        $white !default;
+$nav-tabs-link-active-border-color: $nav-tabs-border-color !default;
+
+// Navbar
+
+$navbar-padding-y:                  0 !default;
+$navbar-dark-hover-color:           $white !default;
+$navbar-light-hover-color:          $gray-800 !default;
+$navbar-light-active-color:         $gray-800 !default;
+
+
+// Pagination
+
+$pagination-color:                  $white !default;
+$pagination-bg:                     transparent !default;
+$pagination-border-color:           rgba($black, .6) !default;
+$pagination-hover-color:            $white !default;
+$pagination-hover-bg:               transparent !default;
+$pagination-hover-border-color:     rgba($black, .6) !default;
+$pagination-active-bg:              transparent !default;
+$pagination-active-border-color:    rgba($black, .6) !default;
+$pagination-disabled-bg:            transparent !default;
+$pagination-disabled-border-color:  rgba($black, .6) !default;
+
+// Cards
+
+$card-border-color:                 rgba($black, .6) !default;
+$card-cap-bg:                       lighten($gray-800, 10%) !default;
+$card-bg:                           lighten($body-bg, 5%) !default;
+
+// Popovers
+
+$popover-bg:                        lighten($body-bg, 5%) !default;
+
+// Toasts
+
+$toast-background-color:            lighten($body-bg, 5%) !default;
+$toast-border-color:                rgba(0, 0, 0, .2) !default;
+$toast-header-color:                $body-color !default;
+$toast-header-background-color:     $toast-background-color !default;
+$toast-header-border-color:         $toast-border-color !default;
+
+// Modals
+
+$modal-content-bg:                  lighten($body-bg, 5%) !default;
+$modal-header-border-color:         rgba(0, 0, 0, .2) !default;
+
+// Progress bars
+
+$progress-bg:                       darken($gray-900, 5%) !default;
+$progress-bar-color:                $gray-600 !default;
+
+// List group
+
+$list-group-color:                  $white !default;
+$list-group-bg:                     lighten($body-bg, 5%) !default;
+$list-group-border-color:           rgba($black, .6) !default;
+$list-group-hover-bg:               lighten($body-bg, 10%) !default;
+$list-group-active-color:           $white !default;
+$list-group-active-bg:              $list-group-hover-bg !default;
+$list-group-active-border-color:    $list-group-border-color !default;
+$list-group-disabled-color:         $gray-700 !default;
+$list-group-action-color:           $white !default;
+
+// Breadcrumbs
+
+$breadcrumb-padding-y:              .375rem !default;
+$breadcrumb-padding-x:              .75rem !default;
+$breadcrumb-active-color:           $gray-500 !default;
+$breadcrumb-border-radius:          .25rem !default;
+
+// Code
+
+$pre-color:                         inherit !default;
diff --git a/src/assets/css/_lightvariables.scss b/src/assets/css/_lightvariables.scss
new file mode 100644
index 0000000..e171b1c
--- /dev/null
+++ b/src/assets/css/_lightvariables.scss
@@ -0,0 +1,6 @@
+
+
+body {
+	  background:  #EEF1F4!important;
+  }
+
diff --git a/src/assets/css/_variables-backup.scss b/src/assets/css/_variables-backup.scss
new file mode 100644
index 0000000..94a9c6d
--- /dev/null
+++ b/src/assets/css/_variables-backup.scss
@@ -0,0 +1,254 @@
+$font-color: #66615b !default;
+$fill-font-color: rgba(255, 255, 255, 0.7);
+
+$none: 0 !default;
+$border-thin: 1px !default;
+$border-thick: 2px !default;
+
+$white-color: #FFFFFF !default;
+$white-bg: #FFFFFF !default;
+
+$smoke-bg: #F5F5F5 !default;
+$pale-bg: #FFFCF5 !default;
+$medium-pale-bg: #F1EAE0 !default;
+
+$table-line-color: #CCC5B9 !default;
+$muted-color: #a49e93 !default;
+
+$black-bg: rgba(30, 30, 30, .97) !default;
+
+$black-color: #333333 !default;
+$black-hr: #444444 !default;
+
+$white-background-color: #FFFFFF !default;
+$black-background-color: #212120 !default;
+$darkblue-background-color: #35495E !default; // this is the dark blue color from Vue.js branding
+
+$light-gray: #E3E3E3 !default;
+$medium-gray: #DDDDDD !default;
+$dark-gray: #9A9A9A !default;
+
+$gray-input-bg: #fffcf5 !default;
+$danger-input-bg: #FFC0A4 !default;
+$success-input-bg: #ABF3CB !default;
+$other-medium-gray: #A49E93 !default;
+$transparent-bg: transparent !default;
+
+$default-color: #66615B !default;
+$default-bg: #66615B !default;
+$default-states-color: #403D39 !default;
+
+$primary-color: #7A9E9F !default;
+$primary-bg: #7A9E9F !default;
+$primary-states-color: #427C89 !default;
+
+$success-color: #41B883 !default;   // this is the green color from Vue.js branding
+$success-bg: #41B883 !default;
+$success-states-color: #229863 !default;
+
+$info-color: #68B3C8 !default;
+$info-bg: #68B3C8 !default;
+$info-states-color: #3091B2 !default;
+
+$warning-color: #F3BB45 !default;
+$warning-bg: #F3BB45 !default;
+$warning-states-color: #BB992F !default;
+
+$danger-color: #EB5E28 !default;
+$danger-bg: #EB5E28 !default;
+$danger-states-color: #B33C12 !default;
+
+$link-disabled-color: #666666 !default;
+
+/*      light colors - used for select dropdown         */
+
+$light-blue: rgba($primary-color, .2);
+$light-azure: rgba($info-color, .2);
+$light-green: rgba($success-color, .2);
+$light-orange: rgba($warning-color, .2);
+$light-red: rgba($danger-color, .2);
+
+//== Components
+//
+$padding-base-vertical: 7px !default;
+$padding-base-horizontal: 18px !default;
+
+$padding-round-vertical: 9px !default;
+$padding-round-horizontal: 18px !default;
+
+$padding-simple-vertical: 10px !default;
+$padding-simple-horizontal: 18px !default;
+
+$padding-large-vertical: 11px !default;
+$padding-large-horizontal: 30px !default;
+
+$padding-small-vertical: 4px !default;
+$padding-small-horizontal: 10px !default;
+
+$padding-xs-vertical: 2px !default;
+$padding-xs-horizontal: 5px !default;
+
+$padding-label-vertical: 2px !default;
+$padding-label-horizontal: 12px !default;
+
+// padding for links inside dropdown menu
+$padding-dropdown-vertical: 10px !default;
+$padding-dropdown-horizontal: 15px !default;
+
+$margin-large-vertical: 30px !default;
+$margin-base-vertical: 15px !default;
+
+// border radius for buttons
+$border-radius-btn-small: 26px !default;
+$border-radius-btn-base: 20px !default;
+$border-radius-btn-large: 50px !default;
+
+// Cristina: am schimbat aici si s-au modificat inputurile
+$margin-bottom: 0 0 10px 0 !default;
+$border-radius-small: 3px !default;
+$border-radius-base: 4px !default;
+$border-radius-large: 6px !default;
+$border-radius-extreme: 6px !default;
+
+$border-radius-large-top: $border-radius-large $border-radius-large 0 0 !default;
+$border-radius-large-bottom: 0 0 $border-radius-large $border-radius-large !default;
+
+$btn-round-radius: 30px !default;
+
+$height-base: 40px !default;
+
+$font-size-base: 14px !default;
+$font-size-xs: 12px !default;
+$font-size-small: 12px !default;
+$font-size-medium: 16px !default;
+$font-size-large: 18px !default;
+$font-size-large-navbar: 20px !default;
+
+$font-size-h1: 3.2em !default;
+$font-size-h2: 2.6em !default;
+$font-size-h3: 1.825em !default;
+$font-size-h4: 1.5em !default;
+$font-size-h5: 1.25em !default;
+$font-size-h6: 0.9em !default;
+$font-paragraph: 16px !default;
+$font-size-navbar: 16px !default;
+$font-size-small: 12px !default;
+
+$font-weight-light: 300 !default;
+$font-weight-normal: 400 !default;
+$font-weight-semi: 500 !default;
+$font-weight-bold: 600 !default;
+
+$line-height-small: 20px !default;
+$line-height-general: 1.4em !default;
+$line-height: 36px !default;
+$line-height-lg: 54px !default;
+
+$border-radius-top: 10px 10px 0 0 !default;
+$border-radius-bottom: 0 0 10px 10px !default;
+
+$dropdown-shadow: 0 2px rgba(17, 16, 15, 0.1), 0 2px 10px rgba(17, 16, 15, 0.1);
+
+$general-transition-time: 300ms !default;
+
+$slow-transition-time: 300ms !default;
+$dropdown-coordinates: 29px -50px !default;
+
+$fast-transition-time: 150ms !default;
+$select-coordinates: 50% -40px !default;
+
+$transition-linear: linear !default;
+$transition-bezier: cubic-bezier(0.34, 1.61, 0.7, 1) !default;
+$transition-ease: ease 0s;
+
+$navbar-padding-a: 10px 15px;
+$navbar-margin-a: 15px 0px;
+
+$padding-social-a: 10px 5px;
+
+$navbar-margin-a-btn: 15px 3px;
+$navbar-margin-a-btn-round: 16px 3px;
+
+$navbar-padding-brand: 20px 15px;
+$navbar-margin-brand: 5px 0px;
+
+$navbar-margin-brand-icons: 12px auto;
+
+$navbar-margin-btn: 15px 3px;
+
+$height-icon: 64px !default;
+$width-icon: 64px !default;
+$padding-icon: 12px !default;
+$border-radius-icon: 15px !default;
+
+$white-navbar: rgba(#FFFFFF, .96);
+$blue-navbar: rgba(#34ACDC, .98);
+$azure-navbar: rgba(#5BCAFF, .98);
+$green-navbar: rgba(#4CD964, .98);
+$orange-navbar: rgba(#FF9500, .98);
+$red-navbar: rgba(#FF4C40, .98);
+
+$bg-nude: #f4f3ef !default;
+$bg-primary: #8ECFD5 !default;
+$bg-info: #7CE4FE !default;
+$bg-success: #8EF3C5 !default;
+$bg-warning: #FFE28C !default;
+$bg-danger: #FF8F5E !default;
+
+$topbar-x: topbar-x !default;
+$topbar-back: topbar-back !default;
+$bottombar-x: bottombar-x !default;
+$bottombar-back: bottombar-back !default;
+
+$transition-linear: linear !default;
+$transition-bezier: cubic-bezier(0.34, 1.61, 0.7, 1) !default;
+$transition-ease: ease 0s;
+$transition-ease-in: ease-in !default;
+$transition-ease-out: ease-out !default;
+
+$general-transition-time: 300ms !default;
+
+$slow-transition-time: 370ms !default;
+$dropdown-coordinates: 29px -50px !default;
+
+$fast-transition-time: 150ms !default;
+
+$ultra-fast-transition-time: 100ms !default;
+
+$select-coordinates: 50% -40px !default;
+
+$padding-zero: 0px !default;
+
+$sidebar-width: calc(100% - 260px) !default;
+$medium-dark-gray: #AAAAAA !default;
+
+//variables used in cards
+$card-black-color: #252422 !default;
+$card-muted-color: #ccc5b9 !default;
+
+//variables used for sidebar
+$sidebar-background-dark-blue: #506367;
+
+$sidebar-background-blue: #b8d8d8 !default;
+$sidebar-font-blue: #506568 !default;
+$sidebar-subtitle-blue: #7a9e9f !default;
+
+$sidebar-background-green: #d5e5a3 !default;
+$sidebar-font-green: #60773d !default;
+$sidebar-subtitle-green: #92ac56 !default;
+
+$sidebar-background-yellow: #ffe28c !default;
+$sidebar-font-yellow: #b25825 !default;
+$sidebar-subtitle-yellow: #d88715 !default;
+
+$sidebar-background-brown: #d6c1ab !default;
+$sidebar-font-brown: #75442e !default;
+$sidebar-subtitle-brown: #a47e65 !default;
+
+$sidebar-background-purple: #baa9ba !default;
+$sidebar-font-purple: #3a283d !default;
+$sidebar-subtitle-purple: #5a283d !default;
+
+$sidebar-background-orange: #ff8f5e !default;
+$sidebar-font-orange: #772510 !default;
+$sidebar-subtitle-orange: #e95e37 !default;
diff --git a/src/assets/css/my.scss b/src/assets/css/my.scss
new file mode 100644
index 0000000..33374e7
--- /dev/null
+++ b/src/assets/css/my.scss
@@ -0,0 +1,6 @@
+
+@import "@/assets/css/_darkvariables.scss";
+
+body {
+  background:  lighten($body-bg, 5%) !default;
+}
diff --git a/src/components/manageservices/view-dashboard.vue b/src/components/manageservices/view-dashboard.vue
index 92abb6e..0163bbd 100644
--- a/src/components/manageservices/view-dashboard.vue
+++ b/src/components/manageservices/view-dashboard.vue
@@ -83,7 +83,16 @@ export default {
   },
   data() {
     return {
-			// width/height get this for refresh charts
+			// width/height get this for refresh charts   #232C3A --background-primary: #36393f;
+       /* 
+        --background-secondary: #2f3136;
+          
+          --background-secondary-alt: #292b2f;
+         #adbac7
+
+         #363D3F
+
+*/
 			stats_stats_imagescontainers:0,
 			stats_stats_container:0,
 			stats_stats_volume:0,
diff --git a/src/components/mynetwork/AdhocView.vue b/src/components/mynetwork/AdhocView.vue
index ed66bb6..61389d5 100644
--- a/src/components/mynetwork/AdhocView.vue
+++ b/src/components/mynetwork/AdhocView.vue
@@ -273,6 +273,7 @@ export default {
     this.fontsize = store.getters['pipelineLLO/getmyCmfontSize']
     document.documentElement.style.setProperty('--myCmfontSize', this.fontsize+'px')
     this.$refs.myCm.codemirror.refresh()
+     //console.log(document.documentElement.style)
  },
  viewplus(){
     this.fontsize = store.getters['pipelineLLO/getmyCmfontSize']
diff --git a/src/config/dark.scss b/src/config/dark.scss
new file mode 100644
index 0000000..12e3e84
--- /dev/null
+++ b/src/config/dark.scss
@@ -0,0 +1,11 @@
+
+// Define variable defaults
+$body-bg: #000;
+$body-color: #111;
+
+@import 'bootstrap/dist/css/bootstrap.css';
+@import 'bootstrap-vue/dist/bootstrap-vue.css';
+
+// Then import Bootstrap an BootstrapVue SCSS files (order is important)
+//@import 'node_modules/bootstrap/scss/bootstrap.scss';
+//@import 'node_modules/bootstrap-vue/src/index.scss'
diff --git a/src/store/modules/create_pipelineLLO.js b/src/store/modules/create_pipelineLLO.js
index 69d5cb3..18d705d 100644
--- a/src/store/modules/create_pipelineLLO.js
+++ b/src/store/modules/create_pipelineLLO.js
@@ -10,10 +10,14 @@ export default {
 		socketStatus:'close',
     status: {},
     statusswarmlab: {},
+    theme: {},
     myCmfontSize: 11,
     config: {}
   },
   getters: {
+		getmytheme (state, container) {
+			return state.theme
+		},
 		getmyCmfontSize (state, container) {
 			return state.myCmfontSize
 		},
@@ -37,6 +41,11 @@ export default {
 		}
   },
   mutations: {
+		set_mytheme (state, data) {
+			  console.log(data)
+			  console.log('data')
+				state.theme=data;
+		},
 		set_myCmfontSize (state, data) {
 				state.myCmfontSize=data;
 		},
@@ -63,6 +72,10 @@ export default {
 		}
   },
   actions: {
+		setmytheme({commit}, value) {
+				console.log("container "+value)
+			commit('set_mytheme', value.instance)
+		},
 		setmyCmfontSize({commit}, value) {
 				//console.log("container "+value)
 			commit('set_myCmfontSize', value.size)