SILABMC-263: Dark Theme

19 files changed, 545 insertions, 170 deletions

diff --git a/src/assets/styles/bmc/_sila/_alert.scss b/src/assets/styles/bmc/_sila/_alert.scss
index d85e9127..c986eed6 100644
--- a/src/assets/styles/bmc/_sila/_alert.scss
+++ b/src/assets/styles/bmc/_sila/_alert.scss
@@ -2,8 +2,10 @@
   display: flex;
   padding: $spacer;
   border-width: 0 0 0 3px;
-  color: gray("800");
   margin-bottom: $spacer;
+  @include themify($themes) {
+    color: themed("text-primary");
+  }
 
   &.small {
     padding: $spacer / 2;
@@ -46,25 +48,33 @@
 
   &.alert-info {
     border-left-color: theme-color("info");
-    background-color: theme-color-light("info");
     fill: theme-color("info");
+    @include themify($themes) {
+      background-color: themed("blue-10");
+    }
   }
 
   &.alert-success {
     border-left-color: theme-color("success");
-    background-color: theme-color-light("success");
     fill: theme-color("success");
+    @include themify($themes) {
+      background-color: themed("green-10");
+    }
   }
 
   &.alert-danger {
-    border-left-color: theme-color("danger");
-    background-color: theme-color-light("danger");
-    fill: theme-color("danger");
+    @include themify($themes) {
+      border-left-color: themed("red-40");
+      background-color: themed("red-5");
+      fill: themed("red-40");
+    }
   }
 
   &.alert-warning {
     border-left-color: theme-color("warning");
-    background-color: theme-color-light("warning");
     fill: theme-color("warning");
+    @include themify($themes) {
+      background-color: themed("yellow-10");
+    }
   }
 }
diff --git a/src/assets/styles/bmc/_sila/_badge.scss b/src/assets/styles/bmc/_sila/_badge.scss
index 7d59e9a6..62ff0e09 100644
--- a/src/assets/styles/bmc/_sila/_badge.scss
+++ b/src/assets/styles/bmc/_sila/_badge.scss
@@ -16,6 +16,8 @@
 }
 
 .badge-primary {
-  background-color: theme-color-light("info");
   color: theme-color("info");
+  @include themify($themes) {
+    background-color: themed("blue-10");
+  }
 }
diff --git a/src/assets/styles/bmc/_sila/_base.scss b/src/assets/styles/bmc/_sila/_base.scss
index fc8365d8..dc1e1508 100644
--- a/src/assets/styles/bmc/_sila/_base.scss
+++ b/src/assets/styles/bmc/_sila/_base.scss
@@ -4,7 +4,9 @@
 /* W3C standard: Firefox only */
 * {
   scrollbar-width: thin;
-  scrollbar-color: rgba(12, 32, 64, 0.7) transparent;
+  @include themify($themes) {
+    scrollbar-color: themed("gray-20") transparent;
+  }
 }
 
 /* For Chrome/Edge/Safari */
@@ -25,9 +27,11 @@
 }
 
 *::-webkit-scrollbar-thumb {
-  background-color: rgba(12, 32, 64, 0.7);
   border-radius: 2px;
   border: 2px solid transparent;
+  @include themify($themes) {
+    background-color: themed("gray-20");
+  }
 }
 
 //
@@ -81,19 +85,21 @@ label {
 }
 
 .nav-link--current {
-  background-color: $red-light-background !important;
+  background-color: $red-5 !important;
   color: $red !important;
   &:hover,
   &:focus {
-    background-color: $red-light-background !important;
+    background-color: $red-5 !important;
     color: $red !important;
   }
 }
 
 .btn-link:active,
 .nav-link:active {
-  background-color: $red-light-background !important;
   color: $red !important;
+  @include themify($themes) {
+    background-color: themed("red-5") !important;
+  }
 }
 
 .app-header .navbar-text,
diff --git a/src/assets/styles/bmc/_sila/_buttons.scss b/src/assets/styles/bmc/_sila/_buttons.scss
index 49d8e642..2ca971f8 100644
--- a/src/assets/styles/bmc/_sila/_buttons.scss
+++ b/src/assets/styles/bmc/_sila/_buttons.scss
@@ -6,6 +6,9 @@
   display: inline-flex;
   align-items: center;
   justify-content: space-around;
+  @include themify($themes) {
+    color: themed("text-primary");
+  }
   svg {
     margin-right: $spacer / 4;
   }
@@ -14,8 +17,9 @@
     fill: currentColor;
     box-shadow: none !important;
     &:not(.btn-link) {
-      border-color: gray("400");
-      background-color: gray("400");
+      @include themify($themes) {
+        background-color: themed("red-disabled");
+      }
     }
   }
 }
@@ -25,6 +29,7 @@
   border-radius: $border-radius;
   border: none;
   box-shadow: 1px 2px 2px -1px #4f252566 inset;
+  color: $white !important;
   &:hover {
     background-color: $red-hover;
   }
@@ -36,7 +41,7 @@
   }
   &:focus {
     border: none;
-    box-shadow: 0px 0px 0px 4px $red-shadow;
+    box-shadow: 0px 0px 0px 4px $red-50;
     background-color: $red;
   }
   &:active {
@@ -47,30 +52,32 @@
 }
 
 .btn-secondary {
-  background-color: $gray-5;
   color: $red;
   border-radius: $border-radius;
   border: none;
   box-shadow: 1px 2px 4px -1px rgb(79 37 37 / 10%) inset;
-  &:hover {
-    background-color: $gray-5-hover;
-    color: $red;
-  }
-  &:focus {
-    border: none;
-    box-shadow: 0px 0px 0px 4px $red-shadow;
-    color: $red;
-    background-color: $gray-5-hover;
-  }
-  &:not(:disabled):not(.disabled):active:focus,
-  &:focus-visible {
-    border: none;
-    box-shadow: none;
-    color: $red;
-    background-color: $gray-5-hover;
-  }
-  &:active {
-    background-color: $gray-5-hover;
+  @include themify($themes) {
+    background-color: themed("gray-5");
+    &:hover {
+      background-color: themed("gray-5-hover");
+      color: $red;
+    }
+    &:focus {
+      border: none;
+      box-shadow: 0px 0px 0px 4px $red-50;
+      color: $red;
+      background-color: themed("gray-5-hover");
+    }
+    &:not(:disabled):not(.disabled):active:focus,
+    &:focus-visible {
+      border: none;
+      box-shadow: none;
+      color: $red;
+      background-color: themed("gray-5-hover");
+    }
+    &:active {
+      background-color: themed("gray-5-hover");
+    }
   }
 }
 
@@ -132,16 +139,20 @@
 
 // Global style for all button link
 .btn-link {
-  color: $text-primary;
   text-decoration: none !important;
   border-radius: $border-radius;
   margin-right: 5px;
-  &:hover {
-    background-color: gray("200");
-    color: theme-color("primary");
-  }
-  &:active {
-    background-color: gray("300");
+  @include themify($themes) {
+    color: themed("text-primary");
+
+    &:hover {
+      background-color: themed("gray-10");
+      color: theme-color("primary");
+    }
+
+    &:active {
+      background-color: themed("gray-20") !important;
+    }
   }
   &:disabled {
     box-shadow: $btn-focus-box-shadow;
@@ -189,7 +200,9 @@
     box-shadow: none;
   }
   &:hover {
-    color: $text-primary;
+    @include themify($themes) {
+      color: themed("text-primary");
+    }
   }
   .icon-expand {
     margin-left: auto;
diff --git a/src/assets/styles/bmc/_sila/_card.scss b/src/assets/styles/bmc/_sila/_card.scss
index d7ac04d2..f8ae2638 100644
--- a/src/assets/styles/bmc/_sila/_card.scss
+++ b/src/assets/styles/bmc/_sila/_card.scss
@@ -1,21 +1,34 @@
 .card {
   border-radius: $border-radius;
+  @include themify($themes) {
+    color: themed("text-primary");
+    background-color: themed("back-light") !important;
+    border-color: themed("back-light") !important;
+    .tabs {
+      background-color: themed("surface-primary") !important;
+    }
+  }
   .bg-success {
-    background-color: theme-color-light('success')!important;
+    background-color: theme-color-light("success") !important;
   }
 }
 
 .card-header {
+  @include themify($themes) {
+    background-color: themed("back-light") !important;
+  }
   .card-header-tabs {
     border: none !important;
 
     .nav-link {
       border: none !important;
-      color: $text-secondary;
       font-weight: 500 !important;
       background: none !important;
+      @include themify($themes) {
+        color: themed("text-secondary");
+      }
       &:hover {
-        color: $red-hover
+        color: $red-hover;
       }
     }
 
@@ -32,6 +45,6 @@
 
 .card-buttons > a {
   font-weight: 500;
-  font-size: .825rem;
+  font-size: 0.825rem;
   vertical-align: baseline;
 }
diff --git a/src/assets/styles/bmc/_sila/_dropdown.scss b/src/assets/styles/bmc/_sila/_dropdown.scss
index 02e4e855..261d91f1 100644
--- a/src/assets/styles/bmc/_sila/_dropdown.scss
+++ b/src/assets/styles/bmc/_sila/_dropdown.scss
@@ -3,6 +3,9 @@
   z-index: $zindex-dropdown + 1;
   padding: $spacer / 2;
   border-radius: $border-radius;
+  @include themify($themes) {
+    background-color: themed("surface-primary");
+  }
 }
 
 .dropdown-item {
@@ -10,9 +13,11 @@
   margin: $spacer / 4;
   width: auto;
   border-radius: $border-radius;
+  @include themify($themes) {
+    color: themed("text-primary");
+  }
   &:hover {
     background-color: $red-hover;
-    color: $white;
   }
   &:active {
     background-color: $red-active;
diff --git a/src/assets/styles/bmc/_sila/_forms.scss b/src/assets/styles/bmc/_sila/_forms.scss
index f993804f..4bc8f626 100644
--- a/src/assets/styles/bmc/_sila/_forms.scss
+++ b/src/assets/styles/bmc/_sila/_forms.scss
@@ -4,14 +4,34 @@
   line-height: $form-line-height;
   margin-top: -$spacer / 4;
   margin-bottom: $spacer / 2;
-  color: gray("700") !important;
+  @include themify($themes) {
+    color: themed("text-tretiatry") !important;
+  }
 }
 
 // Legend label
 .col-form-label {
-  color: gray("800");
   font-size: $form-label-font-size;
   line-height: $form-line-height;
+  @include themify($themes) {
+    color: themed("text-secondary");
+  }
+}
+
+input:-webkit-autofill,
+input:-webkit-autofill:focus {
+  @include themify($themes) {
+    -webkit-box-shadow: 0 0 0 50px themed("gray-passwordfield") inset; /*your box-shadow*/
+    -webkit-text-fill-color: themed("text-secondary");
+  }
+}
+
+input:-webkit-autofill:focus {
+  @include themify($themes) {
+    -webkit-box-shadow: 0 0 0 50px themed("gray-passwordfield") inset; /*your box-shadow*/
+    -webkit-text-fill-color: themed("text-secondary");
+    border: 1px solid theme-color("danger") !important;
+  }
 }
 
 div:not(.search-global) > .form-group {
@@ -33,7 +53,7 @@ div:not(.search-global) > .form-group {
     right: 10px;
     top: 0;
     margin-right: 0;
-    @include media-breakpoint-down(sm) { 
+    @include media-breakpoint-down(sm) {
       top: -25px;
     }
   }
@@ -50,16 +70,12 @@ div:not(.search-global) > .form-group {
     }
   }
   .custom-select {
-    background-color: $gray-5;
     border: none;
   }
   .custom-select:disabled,
   .form-control:disabled {
     position: initial;
   }
-  .form-control:disabled:hover {
-    background-color: #cccccc;
-  }
   .input-group-text {
     border: none;
     background-color: $gray-5;
@@ -84,33 +100,49 @@ div:not(.search-global) > .form-group {
   }
   label {
     position: relative;
-    color: $text-tretiatry;
     margin-left: 10px;
     margin-bottom: $spacer / 4;
+    @include themify($themes) {
+      color: themed("text-tretiatry");
+    }
     span {
       display: block;
     }
   }
 }
 .b-form-datepicker label {
-    margin-left: 0px !important;
+  margin-left: 0px !important;
 }
 
 .custom-select,
 .form-control,
 .input-group-text {
   border-radius: $border-radius;
-  background-color: $white;
+  @include themify($themes) {
+    color: themed("text-secondary");
+    background-color: themed("gray-5") !important;
+    option {
+      height: 18px;
+      color: themed("text-secondary");
+      background-color: themed("gray-20");
+    }
+    option[disabled="disabled"] {
+      color: themed("text-primary");
+      background-color: themed("gray-20");
+    }
+  }
 }
 
 .custom-select,
 .form-control {
-  &:disabled {
-    background-color: gray("400");
-    color: gray("600");
-  }
-  &::placeholder {
-    color: gray("600");
+  @include themify($themes) {
+    &:disabled {
+      color: themed("text-quaternary") !important;
+      background-color: themed("gray-20") !important;
+    }
+    &::placeholder {
+      color: themed("text-quaternary");
+    }
   }
   &.is-invalid,
   &:invalid {
@@ -128,16 +160,19 @@ div:not(.search-global) > .form-group {
 }
 
 .form-control {
-  color: $text-secondary;
   border-radius: $border-radius;
   border: none;
-  background-color: $gray-5;
-  font-size: 0.875rem;
-  &:focus {
-    color: $text-secondary;
-  }
-  &:hover {
-    background-color: $gray-5-hover;
+  @include themify($themes) {
+    color: themed("text-secondary");
+    background-color: themed("gray-5");
+    font-size: 0.875rem;
+
+    &:focus {
+      color: themed("text-secondary");
+    }
+    ul > li > div > input {
+      color: themed("text-secondary") !important;
+    }
   }
 }
 
@@ -200,9 +235,11 @@ div:not(.search-global) > .form-group {
   .custom-control-label::before,
   .custom-control-label::after {
     border-radius: $border-radius / 2;
-    background-color: #fff;
-    border: 2px solid $on-surface-secondary;
     box-shadow: none;
+    @include themify($themes) {
+      border: 2px solid themed("on-surface-secondary");
+      background-color: themed("surface-primary");
+    }
   }
 }
 
@@ -211,20 +248,29 @@ div:not(.search-global) > .form-group {
     background-image: none;
   }
   .custom-control-input:checked ~ .custom-control-label::before {
-    box-shadow: 0px 0px 0px 3px $white inset;
+    @include themify($themes) {
+      box-shadow: 0px 0px 0px 3px themed("surface-primary") inset;
+    }
+  }
+  .custom-control-label::before {
+    @include themify($themes) {
+      background-color: themed("surface-primary");
+    }
   }
 }
 
 .custom-switch {
   width: 28px;
   height: 16px;
-  .custom-control-input ~ .custom-control-label::after {
-    border: 1px solid $gray-20;
-    background: $white;
-  }
-  .custom-control-input ~ .custom-control-label::before {
-    border: 1px solid $gray-20;
-    background: rgba(4, 10, 15, 0.3);
+  @include themify($themes) {
+    .custom-control-input ~ .custom-control-label::after {
+      border: 1px solid themed("gray-30");
+      background: themed("custom-switch-back");
+    }
+    .custom-control-input ~ .custom-control-label::before {
+      border: 1px solid themed("gray-30");
+      background: themed("gray-30");
+    }
   }
 }
 
diff --git a/src/assets/styles/bmc/_sila/_modal.scss b/src/assets/styles/bmc/_sila/_modal.scss
index e67cb777..53895aa4 100644
--- a/src/assets/styles/bmc/_sila/_modal.scss
+++ b/src/assets/styles/bmc/_sila/_modal.scss
@@ -4,6 +4,10 @@
 
 .modal-content {
   border-radius: $border-radius;
+  @include themify($themes) {
+    color: themed("text-secondary");
+    background-color: themed("surface-primary");
+  }
 }
 
 .modal-header {
@@ -35,6 +39,12 @@
   justify-content: flex-start;
 }
 
+.modal-footer {
+  @include themify($themes) {
+    border-top: 1px solid themed("gray-10");
+  }
+}
+
 .file-input_container > .custom-file {
   height: 100%;
 }
diff --git a/src/assets/styles/bmc/_sila/_pagination.scss b/src/assets/styles/bmc/_sila/_pagination.scss
index 8183057e..2b36f79b 100644
--- a/src/assets/styles/bmc/_sila/_pagination.scss
+++ b/src/assets/styles/bmc/_sila/_pagination.scss
@@ -20,10 +20,25 @@
   @include media-breakpoint-up(sm) {
     justify-content: flex-end;
   }
+  .page-item button {
+    @include themify($themes) {
+      color: themed("text-primary");
+      background-color: themed("gray-30");
+      border-color: themed("gray-30");
+    }
+  }
   .page-item.active button {
-    color: theme-color("dark");
-    background-color: color("white");
-    border-color: $border-color;
-    box-shadow: inset 0px -3px theme-color("primary");
+    @include themify($themes) {
+      color: themed("text-primary");
+      background-color: themed("surface-primary");
+      border-color: themed("gray-30");
+    }
+  }
+  .page-item.disabled span {
+    @include themify($themes) {
+      color: themed("text-primary");
+      background-color: themed("surface-secondary");
+      border-color: themed("gray-30");
+    }
   }
 }
diff --git a/src/assets/styles/bmc/_sila/_section-divider.scss b/src/assets/styles/bmc/_sila/_section-divider.scss
index 9ccdcf49..d09c390b 100644
--- a/src/assets/styles/bmc/_sila/_section-divider.scss
+++ b/src/assets/styles/bmc/_sila/_section-divider.scss
@@ -1,5 +1,5 @@
 .section-divider {
-  border-bottom: 1px solid gray('400');
+  border-bottom: 1px solid gray("400");
 }
 
 .collapse-divider {
@@ -13,7 +13,7 @@
     @include media-breakpoint-down(md) {
       margin-left: 1rem;
       margin-right: 1rem;
-  }
+    }
   }
   .btn-collapse {
     padding-left: 2rem;
@@ -37,11 +37,11 @@
   width: auto;
   margin: 0rem -1.95rem 0rem -1.95rem;
   padding-left: 2rem;
-      @include media-breakpoint-down(md) {
-        padding-left: 1rem;
-        padding-right: 1rem;
-        margin-left: -0.95rem;
-    }
+  @include media-breakpoint-down(md) {
+    padding-left: 1rem;
+    padding-right: 1rem;
+    margin-left: -0.95rem;
+  }
   border-bottom: 1px solid $gray-10;
   gap: 8px;
 }
@@ -51,15 +51,15 @@
   margin: 0rem -1.95rem;
   padding-left: 1rem;
   padding-bottom: 1rem;
-      @include media-breakpoint-down(md) {
-        padding-left: 0rem;
-        margin: 0rem -0.95rem;
-    }
+  @include media-breakpoint-down(md) {
+    padding-left: 0rem;
+    margin: 0rem -0.95rem;
+  }
   .form-group {
     margin-bottom: 0 !important;
     .col-form-label {
       padding-left: 0.7rem;
       white-space: nowrap;
     }
- }
+  }
 }
diff --git a/src/assets/styles/bmc/_sila/_tables.scss b/src/assets/styles/bmc/_sila/_tables.scss
index ac35f605..04265261 100644
--- a/src/assets/styles/bmc/_sila/_tables.scss
+++ b/src/assets/styles/bmc/_sila/_tables.scss
@@ -1,11 +1,14 @@
 .table {
   position: relative;
   z-index: $zindex-dropdown;
-  border: 1px solid $gray-30;
   border-radius: $border-radius;
   border-collapse: separate;
   border-spacing: 0px;
 
+  @include themify($themes) {
+    color: themed("text-primary");
+    border: 1px solid themed("gray-30");
+  }
   &.b-table > thead > tr {
     & > [aria-sort="ascending"] {
       background-image: url("~@/assets/images/_sila/sort-ascending.svg");
@@ -48,6 +51,9 @@
   td {
     vertical-align: middle;
     font-size: 0.875rem;
+    @include themify($themes) {
+      border-top: 1px solid themed("gray-30") !important;
+    }
     // Table action buttons
     .btn-link {
       width: 40px;
@@ -61,10 +67,12 @@
 
   // thead-light added for specificity
   .thead-light th {
-    background-color: $gray-light;
     vertical-align: middle;
     text-transform: uppercase;
-    color: $text-primary;
+    @include themify($themes) {
+      color: themed("text-primary");
+      background-color: themed("gray-10");
+    }
     &:focus {
       outline: none;
     }
@@ -92,8 +100,10 @@
   }
 
   .b-table-details {
-    border-top: 1px solid rgba(26, 62, 91, 0.3);
     background-color: inherit;
+    @include themify($themes) {
+      border-top: 1px solid themed("gray-30");
+    }
     td {
       padding-left: $table-cell-padding;
       padding-right: $table-cell-padding;
@@ -132,7 +142,9 @@
       box-shadow: inset 0 0 0 2px theme-color("primary") !important;
     }
     &:hover {
-      background-color: $gray-5-hover;
+      @include themify($themes) {
+        background-color: themed("gray-5-hover");
+      }
     }
   }
   .custom-radio,
@@ -146,7 +158,10 @@
 }
 
 .table-hover tbody tr:hover {
-  background-color: $gray-5;
+  @include themify($themes) {
+    color: themed("text-primary");
+    background-color: themed("gray-5");
+  }
 }
 
 .b-table-sticky-header td {
@@ -163,8 +178,10 @@
     overflow: auto;
     width: calc(100vw - 347px);
     .table {
-      border-right: 1px solid $gray-30;
       border-radius: $border-radius;
+      @include themify($themes) {
+        border-right: 1px solid themed("gray-30");
+      }
     }
     .table-accessory,
     .table-full {
@@ -176,8 +193,10 @@
     @include media-breakpoint-up(md) {
       overflow: auto;
       .table {
-        border-right: 1px solid $gray-30;
         border-radius: $border-radius;
+        @include themify($themes) {
+          border-right: 1px solid themed("gray-30");
+        }
       }
       .table-accessory,
       .table-full {
@@ -189,8 +208,8 @@
 }
 // style for table contained in <b-card> components
 #page-network {
-  [class*='table-responsive-'] {
-      @include media-breakpoint-up(lg) {
+  [class*="table-responsive-"] {
+    @include media-breakpoint-up(lg) {
       width: calc(100vw - 390px);
     }
   }
@@ -199,8 +218,9 @@
 // Table stacked style for small screen only
 @include media-breakpoint-down(xs) {
   .b-table-stacked-sm {
-    border: 1px solid $gray-10;
-
+    @include themify($themes) {
+      border: 1px solid themed("gray-10");
+    }
     tr {
       &:not(:first-child) > td[aria-colindex="1"] {
         padding-top: 0.625rem;
@@ -262,7 +282,9 @@
 .table-accessory {
   border: none;
   thead th {
-    border-bottom: 1px solid $gray-30;
+    @include themify($themes) {
+      border-bottom: 1px solid themed("gray-30");
+    }
     background-color: transparent !important;
     padding: 5px 0;
   }
@@ -274,7 +296,9 @@
   td {
     white-space: nowrap;
     font-size: 0.745rem;
-    color: $text-tretiatry;
+    @include themify($themes) {
+      color: themed("text-tretiatry");
+    }
   }
   .thead-light th > div {
     font-size: 0.755rem !important;
diff --git a/src/assets/styles/bmc/_sila/_toasts.scss b/src/assets/styles/bmc/_sila/_toasts.scss
index 482765ce..ab7e36c2 100644
--- a/src/assets/styles/bmc/_sila/_toasts.scss
+++ b/src/assets/styles/bmc/_sila/_toasts.scss
@@ -1,10 +1,10 @@
 .b-toaster {
-  top: 75px!important; // make sure toasts do not hide top header
+  top: 75px !important; // make sure toasts do not hide top header
 }
 
 // Toast component and status icon style
 .toast {
-  padding: $spacer/2 $spacer/2 $spacer/2 $spacer+2;
+  padding: $spacer/2 $spacer/2 $spacer/2 $spacer + 2;
   border-width: 0 0 0 3px;
   box-shadow: $box-shadow;
   .close {
@@ -16,10 +16,12 @@
 .toast-header {
   display: flex;
   align-items: flex-start;
-  background-color: inherit!important; //override specificity
+  background-color: transparent !important; //override specificity
   border: none;
-  color: theme-color("dark")!important; //override specificity
   padding-bottom: 0;
+  @include themify($themes) {
+    color: themed("text-primary") !important; //override specificity
+  }
 }
 
 .toast-icon {
@@ -31,31 +33,35 @@
   }
 
   + .close {
-    line-height: .9;
+    line-height: 0.9;
   }
 }
 
 .toast-body {
-  color: theme-color("dark");
+  @include themify($themes) {
+    color: themed("text-primary") !important;
+  }
   padding-top: 0;
 }
 
 .b-toast-success .toast {
-  border-left-color: theme-color("success")!important;
-  background-color: theme-color-light("success")!important;
+  border-left-color: theme-color("success") !important;
+  background-color: theme-color-light("success") !important;
 }
 
 .b-toast-info .toast {
-  border-left-color: theme-color("info")!important;
-  background-color: theme-color-light("info")!important;
+  border-left-color: theme-color("info") !important;
+  background-color: theme-color-light("info") !important;
 }
 
 .b-toast-danger .toast {
-  border-left-color: theme-color("danger")!important;
-  background-color: theme-color-light("danger")!important;
+  @include themify($themes) {
+    border-left-color: themed("red-40") !important;
+    background-color: themed("red-5") !important;
+  }
 }
 
 .b-toast-warning .toast {
-  border-left-color: theme-color("warning")!important;
-  background-color: theme-color-light("warning")!important;
+  border-left-color: theme-color("warning") !important;
+  background-color: theme-color-light("warning") !important;
 }
diff --git a/src/components/_sila/AppHeader/AppHeader.vue b/src/components/_sila/AppHeader/AppHeader.vue
index 1821c2b4..d26f3b7c 100644
--- a/src/components/_sila/AppHeader/AppHeader.vue
+++ b/src/components/_sila/AppHeader/AppHeader.vue
@@ -190,6 +190,9 @@
               </b-dropdown>
             </li>
             <li class="nav-item header-nav">
+              <theme-button />
+            </li>
+            <li class="nav-item header-nav">
               <b-dropdown
                 id="app-header-user"
                 variant="link"
@@ -231,6 +234,7 @@ import IconNotification from '@carbon/icons-vue/es/notification/20';
 import StatusIcon from '@/components/Global/StatusIcon';
 import LoadingBar from '@/components/Global/LoadingBar';
 import LoadingBarMixin from '@/components/_sila/Mixins/LoadingBarMixin';
+import ThemeButton from '@/components/_sila/Global/ThemeButton';
 
 export default {
   name: 'AppHeader',
@@ -242,6 +246,7 @@ export default {
     StatusIcon,
     LoadingBar,
     IconNotification,
+    ThemeButton,
   },
   mixins: [BVToastMixin, LoadingBarMixin],
   props: {
diff --git a/src/components/_sila/AppNavigation/AppNavigation.vue b/src/components/_sila/AppNavigation/AppNavigation.vue
index a6fef6bb..2e79fc03 100644
--- a/src/components/_sila/AppNavigation/AppNavigation.vue
+++ b/src/components/_sila/AppNavigation/AppNavigation.vue
@@ -112,8 +112,9 @@ svg {
   list-style: none;
   padding-left: 0;
   margin-left: 0;
-  background-color: $gray-5;
-
+  @include themify($themes) {
+    background-color: themed('nav-list');
+  }
   .nav-item {
     outline: none;
     & > a {
@@ -158,18 +159,17 @@ svg {
   font-weight: $headings-font-weight;
   padding-left: $spacer; // defining consistent padding for links and buttons
   padding-right: $spacer;
-  color: theme-color('secondary');
-
-  &:hover {
-    background-color: theme-color-level(dark, -10.5);
-    color: theme-color('dark');
-  }
-
-  &:focus {
-    background-color: theme-color-level(light, 0);
-    box-shadow: inset 0 0 0 2px theme-color('primary');
-    color: theme-color('dark');
-    outline: 0;
+  @include themify($themes) {
+    color: themed('text-secondary');
+    &:hover {
+      background-color: themed('nav-hover');
+      color: themed('text-secondary');
+    }
+    &:focus {
+      background-color: themed('nav-focus');
+      color: themed('text-secondary');
+      outline: 0;
+    }
   }
 
   &:active {
@@ -217,11 +217,16 @@ svg {
   left: 0;
   z-index: $zindex-fixed;
   overflow-y: auto;
-  background-color: $white;
   transform: translateX(-$navigation-width);
   transition: transform $exit-easing--productive $duration--moderate-02;
   border-right: 1px solid theme-color-level('light', 2.85);
 
+  @include themify($themes) {
+    color: themed('text-primary');
+    background-color: themed('surface-primary');
+    border-right: 1px solid themed('gray-30');
+  }
+
   @include media-breakpoint-down(md) {
     z-index: $zindex-fixed + 2;
   }
diff --git a/src/components/_sila/Global/Chart.vue b/src/components/_sila/Global/Chart.vue
index 2d335636..61331487 100644
--- a/src/components/_sila/Global/Chart.vue
+++ b/src/components/_sila/Global/Chart.vue
@@ -48,6 +48,11 @@ export default {
       default: true,
     },
   },
+  data() {
+    return {
+      key: 0,
+    };
+  },
   computed: {
     readyData() {
       let filteredData = this.data.map((metric) => {
@@ -74,7 +79,6 @@ export default {
 
       return transform;
     },
-
     step() {
       return this.timeScale === 'hour' ? 10 : 60;
     },
@@ -129,6 +133,7 @@ export default {
     },
 
     chartOptions() {
+      this.key;
       return {
         chart: {
           type: 'spline',
@@ -136,6 +141,7 @@ export default {
           height: '360px',
           zoomType: 'xy',
           animation: true,
+          backgroundColor: this.changeColor('background'),
           resetZoomButton: {
             position: {
               x: 0,
@@ -149,7 +155,11 @@ export default {
           title: null,
           labels: {
             step: this.step,
+            style: {
+              color: this.changeColor('text'),
+            },
           },
+          gridLineColor: this.changeColor('line'),
           minorGridLineColor: '#1A3E5B1A',
         },
         yAxis: {
@@ -159,9 +169,15 @@ export default {
           title: null,
           minRange: this.minRange,
           minTickInterval: this.minTickInterval,
+          gridLineColor: this.changeColor('line'),
           minorGridLineColor: '#1A3E5B1A',
           plotLines: this.plotLines,
           plotBands: this.plotBands,
+          labels: {
+            style: {
+              color: this.changeColor('text'),
+            },
+          },
         },
         series: this.metricData.map((item) => ({
           ...item,
@@ -351,7 +367,11 @@ export default {
       return minTickInterval;
     },
   },
-
+  mounted() {
+    this.$root.$on('change-theme', () => {
+      this.key += 1;
+    });
+  },
   async created() {
     this.setOptions();
   },
@@ -364,6 +384,24 @@ export default {
         },
       });
     },
+    changeColor(type) {
+      const theme = localStorage.getItem('user-theme');
+      switch (type) {
+        case 'background':
+          return theme === 'light-theme' ? '#ffffff' : '#12191F';
+        /* Surface/Primary */
+        case 'text':
+          return theme === 'light-theme'
+            ? 'rgba(12, 28, 41, 0.6)'
+            : ' rgba(255, 255, 255, 0.6)';
+        /* Text/Tretiatry */
+        case 'line':
+          return theme === 'light-theme'
+            ? 'rgba(12, 28, 41, 0.6)'
+            : 'rgba(255, 255, 255, 0.6)';
+        /* Text/Tretiatry */
+      }
+    },
     setCategories(count, desc) {
       const arr = [...new Array(count)].map((i, k) => `${k} ${desc}`);
       return arr;
diff --git a/src/components/_sila/Global/ThemeButton.vue b/src/components/_sila/Global/ThemeButton.vue
new file mode 100644
index 00000000..e88c948d
--- /dev/null
+++ b/src/components/_sila/Global/ThemeButton.vue
@@ -0,0 +1,58 @@
+<template>
+  <b-nav-item @click="toggleTheme">
+    <icon-sun v-if="userTheme !== 'dark-theme'" />
+    <icon-moon v-if="userTheme === 'dark-theme'" />
+  </b-nav-item>
+</template>
+
+<script>
+import IconSun from '@carbon/icons-vue/es/sun/20';
+import IconMoon from '@carbon/icons-vue/es/moon/20';
+
+export default {
+  name: 'ThemeButton',
+  components: {
+    IconSun,
+    IconMoon,
+  },
+  data() {
+    return {
+      userTheme: 'light-theme',
+    };
+  },
+  mounted() {
+    const initUserTheme = this.getTheme();
+    this.setTheme(initUserTheme);
+  },
+  methods: {
+    toggleTheme() {
+      const activeTheme = localStorage.getItem('user-theme');
+      if (activeTheme === 'light-theme') {
+        this.setTheme('dark-theme');
+      } else {
+        this.setTheme('light-theme');
+      }
+    },
+
+    getTheme() {
+      return localStorage.getItem('user-theme');
+    },
+
+    setTheme(theme) {
+      localStorage.setItem('user-theme', theme);
+      this.userTheme = theme;
+      document.documentElement.className = theme;
+    },
+  },
+};
+</script>
+
+<style lang="scss">
+.dark-theme {
+  body,
+  .app-content {
+    background-color: $surface-primary-dark !important;
+    color: $text-primary-dark;
+  }
+}
+</style>
diff --git a/src/env/assets/styles/_sila.scss b/src/env/assets/styles/_sila.scss
index 477a4ce4..6af537c2 100644
--- a/src/env/assets/styles/_sila.scss
+++ b/src/env/assets/styles/_sila.scss
@@ -60,37 +60,153 @@ $success: $green;
 $warning: $yellow;
 
 $dark-hover: #3c506a;
+$login-page-description-color: rgba(12, 28, 41, 0.6);
+
+$border-radius: 8px;
+$loading-color: #c11d1d;
+$navbar-color: $dark;
+$header-height: 56px;
+$navigation-width: 280px;
 
-$red-hover: #fc2a2a;
-$red-active: #df2323;
-$red-disabled: #e17171;
-$red-click: #c71414;
-$red-shadow: #e1171780;
-$red-light-background: #e117170d;
-
-$gray-2: rgb(251, 251, 252);
-$gray-5: rgba(26, 62, 91, 0.05);
-$gray-5-hover: rgba(20, 39, 53, 0.1);
-$gray-10: rgba(26, 62, 91, 0.1);
-$gray-20: rgba(26, 62, 92, 0.2);
-$gray-30: rgba(26, 62, 91, 0.3);
-$gray-light: rgb(232 235 238);
-$red-40: rgba(225, 23, 23, 0.4);
+// Light theme
+$red-hover: #fc2a2a; /* Red Brand Primary Hover */
+$red-active: #df2323; /* Red Brand Primary Active */
+$red-disabled: rgb(225, 113, 113); /* Red Brand Primary Disabled */
+$red-click: #c71414; /* Red Brand Primary Click */
 
+$red-5: rgba(225, 23, 23, 0.05); /* Faint Brand Primary/5% */
+$red-40: rgba(225, 23, 23, 0.4); /* Faint Brand Primary/40% */
+$red-50: rgba(225, 23, 23, 0.5); /* Faint Brand Primary/50% */
+
+$gray-2: rgb(251, 251, 252); /* Faint Secondary Primary/2% */
+$gray-5-hover: rgba(20, 39, 53, 0.1); /* Faint Secondary Primary Hover/5% */
+$gray-5: rgba(26, 62, 91, 0.05); /* Faint Secondary Primary/5% */
+$gray-10: rgba(26, 62, 91, 0.1); /* Faint Secondary Primary/10% */
+$gray-20: rgba(26, 62, 91, 0.2); /* Faint Secondary Primary/20% */
+$gray-30: rgba(26, 62, 91, 0.3); /* Faint Secondary Primary/30% */
+$gray-light: rgb(232, 235, 238);
+$gray-passwordfield: rgb(243 245 247);
+
+$blue-10: rgb(235 240 253);
+$green-10: rgb(236 248 235);
+$yellow-10: rgb(254 249 233);
+
+$surface-primary: #ffffff;
 $surface-secondary: #f3f4f5;
-$on-surface-secondary: #040a0f99;
-$on-surface-tretiatry: #040a0f4d;
 
-$text-primary: rgb(12, 28, 41);
+$on-surface-primary: #040a0f;
+$on-surface-secondary: rgba(4, 10, 15, 0.6);
+$on-surface-tretiatry: rgba(4, 10, 15, 0.3);
+
+$text-primary: rgba(12, 28, 41, 0.9);
 $text-secondary: rgba(12, 28, 41, 0.8);
 $text-tretiatry: rgba(12, 28, 41, 0.6);
 $text-quaternary: rgba(12, 28, 41, 0.3);
 
-$login-page-description-color: rgba(12, 28, 41, 0.6);
+// Dark theme
+$red-5-dark: rgba(225, 23, 23, 0.1); /* Faint Brand Primary/5% */
+$red-40-dark: rgba(225, 23, 23, 0.5); /* Faint Brand Primary/40% */
+$red-50-dark: rgba(225, 23, 23, 0.6); /* Faint Brand Primary/50% */
 
-$border-radius: 8px;
+$gray-5-hover-dark: rgba(26, 62, 91, 0.7);
+$gray-5-dark: rgba(26, 62, 91, 0.2); /* Faint Secondary Primary/5% */
+$gray-10-dark: rgba(26, 62, 91, 0.3); /* Faint Secondary Primary/10% */
+$gray-20-dark: rgba(26, 62, 91, 0.4); /* Faint Secondary Primary/20% */
+$gray-30-dark: rgba(26, 62, 91, 0.5); /* Faint Secondary Primary/30% */
+$gray-passwordfield-dark: rgb(19 32 43);
 
-$loading-color: #c11d1d;
-$navbar-color: $dark;
-$header-height: 56px;
-$navigation-width: 280px;
+$blue-10-dark: rgba(45, 96, 229, 0.1);
+$green-10-dark: rgba(52, 178, 51, 0.1);
+$yellow-10-dark: rgba(245, 189, 31, 0.1);
+
+$surface-primary-dark: #12191f;
+$surface-secondary-dark: #0c1c29;
+
+$on-surface-primary-dark: #f5f5f5;
+$on-surface-secondary-dark: rgba(245, 245, 245, 0.6);
+$on-surface-tretiatry-dark: rgba(245, 245, 245, 0.3);
+
+$text-primary-dark: #e6e6e6;
+$text-secondary-dark: rgba(255, 255, 255, 0.9);
+$text-tretiatry-dark: rgba(255, 255, 255, 0.6);
+$text-quaternary-dark: rgba(255, 255, 255, 0.3);
+
+$themes: (
+  light: (
+    surface-primary: $surface-primary,
+    surface-secondary: $surface-secondary,
+    on-surface-primary: $on-surface-primary,
+    on-surface-secondary: $on-surface-secondary,
+    on-surface-tretiatry-dark: $on-surface-tretiatry,
+    text-primary: $text-primary,
+    text-secondary: $text-secondary,
+    text-tretiatry: $text-tretiatry,
+    text-quaternary: $text-quaternary,
+    back-light: $gray-100,
+    nav-hover: #dde0e5,
+    nav-focus: #f4f4f4,
+    gray-5-hover: $gray-5-hover,
+    gray-5: $gray-5,
+    gray-10: $gray-10,
+    gray-20: $gray-20,
+    gray-30: $gray-30,
+    gray-passwordfield: $gray-passwordfield,
+    red-5: $red-5,
+    red-40: $red-40,
+    red-50: $red-50,
+    blue-10: $blue-10,
+    green-10: $green-10,
+    yellow-10: $yellow-10,
+    custom-switch-back: $white,
+  ),
+  dark: (
+    surface-primary: $surface-primary-dark,
+    surface-secondary: $surface-secondary-dark,
+    on-surface-primary: $on-surface-primary-dark,
+    on-surface-secondary: $on-surface-secondary-dark,
+    on-surface-tretiatry-dark: $on-surface-tretiatry-dark,
+    text-primary: $text-primary-dark,
+    text-secondary: $text-secondary-dark,
+    text-tretiatry: $text-tretiatry-dark,
+    text-quaternary: $text-quaternary-dark,
+    back-light: $gray-30-dark,
+    nav-hover: $gray-30-dark,
+    nav-focus: $gray-30-dark,
+    gray-5-hover: $gray-5-hover-dark,
+    gray-5: $gray-5-dark,
+    gray-10: $gray-10-dark,
+    gray-20: $gray-20-dark,
+    gray-30: $gray-30-dark,
+    gray-passwordfield: $gray-passwordfield-dark,
+    red-5: $red-5-dark,
+    red-40: $red-40-dark,
+    red-50: $red-50-dark,
+    blue-10: $blue-10-dark,
+    green-10: $green-10-dark,
+    yellow-10: $yellow-10-dark,
+    custom-switch-back: $text-primary-dark,
+  ),
+);
+
+@mixin themify($themes) {
+  @each $theme, $map in $themes {
+    .#{$theme}-theme & {
+      $theme-map: () !global;
+      @each $key, $submap in $map {
+        $value: map-get(map-get($themes, $theme), "#{$key}");
+        $theme-map: map-merge(
+          $theme-map,
+          (
+            $key: $value,
+          )
+        ) !global;
+      }
+      @content;
+      $theme-map: null !global;
+    }
+  }
+}
+
+@function themed($key) {
+  @return map-get($theme-map, $key);
+}
diff --git a/src/layouts/_sila/AppLayout.vue b/src/layouts/_sila/AppLayout.vue
index 65e1d5ec..e494dda5 100644
--- a/src/layouts/_sila/AppLayout.vue
+++ b/src/layouts/_sila/AppLayout.vue
@@ -44,7 +44,8 @@ export default {
     },
   },
   mounted() {
-    this.$root.$on('refresh-application', () => this.refresh());
+    this.$root.$on('refresh-application', this.refresh);
+    this.$root.$on('change-theme', this.refresh);
   },
   methods: {
     refresh() {
diff --git a/src/views/_sila/SecurityAndAccess/Policies/Policies.vue b/src/views/_sila/SecurityAndAccess/Policies/Policies.vue
index a9c273b0..cbc0362a 100644
--- a/src/views/_sila/SecurityAndAccess/Policies/Policies.vue
+++ b/src/views/_sila/SecurityAndAccess/Policies/Policies.vue
@@ -264,6 +264,8 @@ export default {
 
 <style lang="scss" scoped>
 .setting-section {
-  border-bottom: 1px solid gray('300');
+  @include themify($themes) {
+    border-bottom: 1px solid themed('gray-20');
+  }
 }
 </style>