Dark Theme styles added and fixed

Signed-off-by: Nicolas Farruggia <nfarruggia@vmware.com>

web/src/app/app.component.scss

@@ -5,6 +5,15 @@
 $navigation-width: 13rem;
 
 .main-container {
+    // Navigation's color variables for Light Theme.
+    :host-context(body) {
+      --navigation-border-color: rgb(215, 215, 215);
+    }
+    
+    // Navigation's color variables for Dark Theme.
+    :host-context(body.dark) {
+      --navigation-border-color: #0e161b;
+    }
   .header {
     .branding {
       min-width: $navigation-width;
@@ -35,7 +44,7 @@ $navigation-width: 13rem;
 
   .content-container {
     .navigation {
-      border-right: 1px solid rgb(215, 215, 215);
+      border-right: 1px solid var(--navigation-border-color);
       overflow-y: auto;
       min-width: 2rem;
       width: $navigation-width;

web/src/app/components/input-filter/input-filter.component.scss

@@ -5,6 +5,22 @@
 @import 'src/styles.scss';
 
 .input-filter {
+  // Dropdown's color variables for Light Theme.
+  :host-context(body) {
+    --tags-bg-color: white;
+    --tags-border-color: #ccc;
+    --tags-font-color: black;
+    --filterTag-link-color: #0079b8;
+  }
+  
+  // Dropdown's color variables for Dark Theme.
+  :host-context(body.dark) {
+    --tags-bg-color: #23353d;
+    --tags-border-color: black;
+    --tags-font-color: #adbbc4;
+    --filterTag-link-color: #49afd9;
+  }
+
   &-control {
     position: relative;
 
@@ -31,15 +47,15 @@
   }
 
   &-tags {
-    background: #fff;
-    border: 1px solid #ccc;
+    background: var(--tags-bg-color);
+    border: 1px solid var(--tags-border-color);
     border-bottom-left-radius: 0.125rem;
     border-bottom-right-radius: 0.125rem;
-    box-shadow: 0 1px 0.125rem rgba(115, 115, 115, 0.25);
+    box-shadow: 0 1px 0.125rem rgba(0, 0, 0, 0.5);
     padding: 8px 8px 4px 8px;
 
     .input-filter-empty {
-      color: #485969;
+      color: var(--tags-font-color);
       font-size: 12px;
     }
 
@@ -49,7 +65,7 @@
       flex-wrap: wrap;
 
       .input-filter-tag {
-        @include pill($label-color);
+        @include pill(var(--label-color));
         text-align: center;
         margin: 0 4px 4px 0;
         padding: 0 8px;
@@ -74,7 +90,7 @@
       text-align: center;
       padding-right: 4px;
       font-size: 12px;
-      color: #0079b8;
+      color: var(--filterTag-link-color);
       cursor: pointer;
 
       &:hover {

web/src/app/modules/overview/components/expression-selector/expression-selector.component.scss

@@ -5,5 +5,5 @@
 @import 'src/styles.scss';
 
 .selector--expression {
-  @include pill($selector-color);
+  @include pill(var(--selector-color));
 }

web/src/app/modules/overview/components/filters/filters.component.scss

@@ -11,7 +11,7 @@
 
   .filter {
     position: relative;
-    @include pill($label-color);
+    @include pill(var(--label-color));
   }
 
   .filter-remove {

web/src/app/modules/overview/components/label-selector/label-selector.component.scss

@@ -5,5 +5,5 @@
 @import 'src/styles.scss';
 
 .selector--label {
-  @include pill($selector-color);
+  @include pill(var(--selector-color));
 }

web/src/app/modules/overview/components/labels/labels.component.scss

@@ -12,7 +12,7 @@
 
   .view-label {
     position: relative;
-    @include pill($label-color);
+    @include pill(var(--label-color));
   }
 }
 

web/src/sass/_variables.scss

@@ -2,5 +2,14 @@
  * SPDX-License-Identifier: Apache-2.0
  */
 
-$label-color: #0065ab;
-$selector-color: #00968b;
+// Color variables for Light Theme.
+:host-context(body) {
+  --label-color: #0065ab;
+  --selector-color: #00968b;
+}
+
+// Color variables for Dark Theme.
+:host-context(body.dark) {
+  --label-color: #49afd9;
+  --selector-color: #00968b;
+}