fix theme

6 files changed, 45 insertions, 11 deletions

diff --git a/src/assets/images/_sila/notifications/message-dark.svg b/src/assets/images/_sila/notifications/message-dark.svg
new file mode 100644
index 00000000..8fe7c094
--- /dev/null
+++ b/src/assets/images/_sila/notifications/message-dark.svg
@@ -0,0 +1,3 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M0.941177 1.57887C0.941177 1.28822 1.15187 1.05258 1.41176 1.05258H14.5882C14.8481 1.05258 15.0588 1.28822 15.0588 1.57887V10.3278C15.0588 10.6184 14.8481 10.854 14.5882 10.854H3.5107L0.941177 13.5619V1.57887ZM1.41176 1.11744e-05C0.632065 1.11744e-05 0 0.706899 0 1.57887V16L3.88426 11.9066H14.5882C15.3679 11.9066 16 11.1997 16 10.3278V1.57887C16 0.706899 15.3679 1.11744e-05 14.5882 1.11744e-05H1.41176ZM4.5 3.05041C4.22386 3.05041 4 3.31393 4 3.63902C4 3.96412 4.22386 4.22764 4.5 4.22764H11.5C11.7761 4.22764 12 3.96412 12 3.63902C12 3.31393 11.7761 3.05041 11.5 3.05041H4.5ZM4 5.9935C4 5.6684 4.22386 5.40488 4.5 5.40488H11.5C11.7761 5.40488 12 5.6684 12 5.9935C12 6.31859 11.7761 6.58211 11.5 6.58211H4.5C4.22386 6.58211 4 6.31859 4 5.9935ZM4.5 7.75935C4.22386 7.75935 4 8.02287 4 8.34797C4 8.67307 4.22386 8.93659 4.5 8.93659H11.5C11.7761 8.93659 12 8.67307 12 8.34797C12 8.02287 11.7761 7.75935 11.5 7.75935H4.5Z" fill="#247BC1"/>
+</svg>
diff --git a/src/assets/styles/bmc/_sila/_buttons.scss b/src/assets/styles/bmc/_sila/_buttons.scss
index 2ca971f8..a13a1457 100644
--- a/src/assets/styles/bmc/_sila/_buttons.scss
+++ b/src/assets/styles/bmc/_sila/_buttons.scss
@@ -57,7 +57,7 @@
   border: none;
   box-shadow: 1px 2px 4px -1px rgb(79 37 37 / 10%) inset;
   @include themify($themes) {
-    background-color: themed("gray-5");
+    background-color: themed("btn-secondary");
     &:hover {
       background-color: themed("gray-5-hover");
       color: $red;
diff --git a/src/assets/styles/bmc/_sila/_dropdown.scss b/src/assets/styles/bmc/_sila/_dropdown.scss
index 261d91f1..983d8bdd 100644
--- a/src/assets/styles/bmc/_sila/_dropdown.scss
+++ b/src/assets/styles/bmc/_sila/_dropdown.scss
@@ -4,7 +4,8 @@
   padding: $spacer / 2;
   border-radius: $border-radius;
   @include themify($themes) {
-    background-color: themed("surface-primary");
+    background-color: themed("dropdown-bg");
+    border: 1px solid themed("dropdown-border");
   }
 }
 
@@ -17,7 +18,7 @@
     color: themed("text-primary");
   }
   &:hover {
-    background-color: $red-hover;
+      background-color: $red-dropdown-hover;
   }
   &:active {
     background-color: $red-active;
@@ -48,7 +49,9 @@
     &:focus {
       outline: none;
       background-color: transparent;
-      box-shadow: inset 0 0 0 2px theme-color("primary");
+      @include themify($themes) {
+        box-shadow: inset 0 0 0 2px theme-color("primary");
+      }
     }
   }
 }
diff --git a/src/assets/styles/bmc/_sila/_forms.scss b/src/assets/styles/bmc/_sila/_forms.scss
index 3c22ba30..d722e230 100644
--- a/src/assets/styles/bmc/_sila/_forms.scss
+++ b/src/assets/styles/bmc/_sila/_forms.scss
@@ -183,7 +183,9 @@ div:not(.search-global) > .form-group {
   width: 100%;
   .custom-select,
   .form-control {
-    color: #0c1c29e6;
+     @include themify($themes) {
+      color: themed("text-secondary");
+    }
     border-radius: $border-radius;
     border: none;
     background-color: $gray-5;
diff --git a/src/components/_sila/AppHeader/AppHeader.vue b/src/components/_sila/AppHeader/AppHeader.vue
index d26f3b7c..076cce9f 100644
--- a/src/components/_sila/AppHeader/AppHeader.vue
+++ b/src/components/_sila/AppHeader/AppHeader.vue
@@ -172,9 +172,15 @@
                     :to="logsPage(log.id)"
                   >
                     <img
+                      v-if="theme === 'light-theme'"
                       class="status-icon"
                       src="@/assets/images/_sila/notifications/message.svg"
                     />
+                    <img
+                      v-else
+                      class="status-icon"
+                      src="@/assets/images/_sila/notifications/message-dark.svg"
+                    />
                     <div class="notification-item">
                       <span>{{ log.name | truncate(28, '...') }}</span>
                       <span class="notification-desc">{{
@@ -260,6 +266,7 @@ export default {
       isNavigationOpen: false,
       isFirstStatusLoad: true,
       altLogo: process.env.VUE_APP_COMPANY_NAME || 'Built on OpenBMC',
+      theme: 'light-theme',
     };
   },
   computed: {
@@ -364,6 +371,8 @@ export default {
     this.$root.$on('bv::dropdown::show', () => {
       this.$root.$bvToast.hide();
     });
+    this.theme = localStorage.getItem('user-theme');
+    this.$root.$on('change-theme', this.setLocalTheme);
   },
   methods: {
     logsPage(id) {
@@ -389,6 +398,9 @@ export default {
       event.preventDefault();
       this.$root.$emit('skip-navigation');
     },
+    setLocalTheme() {
+      this.theme = localStorage.getItem('user-theme');
+    },
   },
 };
 </script>
@@ -555,7 +567,9 @@ export default {
     font-size: 12px;
     line-height: 16px;
     text-transform: uppercase;
-    color: #0c1c29;
+    @include themify($themes) {
+      color: themed('text-primary');
+    }
     padding: 15px 15px 0 15px;
   }
   #dropdown-group-1,
@@ -571,7 +585,9 @@ export default {
     font-weight: 600;
     font-size: 12px;
     line-height: 16px;
-    color: #0c1c29;
+    @include themify($themes) {
+      color: themed('text-primary');
+    }
     white-space: normal;
   }
 
@@ -580,9 +596,10 @@ export default {
     font-weight: 300;
     font-size: 12px;
     line-height: 16px;
-    color: rgba(12, 28, 41, 0.6);
+    @include themify($themes) {
+      color: themed('text-primary');
+    }
   }
-
   .dropdown-item {
     display: flex;
     padding: 0.25rem;
diff --git a/src/env/assets/styles/_sila.scss b/src/env/assets/styles/_sila.scss
index d39837a3..fbddef64 100644
--- a/src/env/assets/styles/_sila.scss
+++ b/src/env/assets/styles/_sila.scss
@@ -73,7 +73,7 @@ $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-dropdown-hover: #fc2a2a6e;
 $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% */
@@ -105,6 +105,7 @@ $text-quaternary: rgba(12, 28, 41, 0.3);
 
 $select-bg-size:  18px;
 $select-bg : url("~@/assets/images/_sila/chevron-down.svg");
+$btn-secondary: rgb(26 62 91 / 15%);
 
 // Dark theme
 $red-5-dark: rgba(225, 23, 23, 0.1); /* Faint Brand Primary/5% */
@@ -136,7 +137,9 @@ $text-quaternary-dark: rgba(255, 255, 255, 0.3);
 
 $select-bg-dark: url("~@/assets/images/_sila/chevron-down-dark.svg");
 $select-bg-size-dark: 15px 7px;
-
+$btn-secondary-dark: rgb(26 62 91 / 90%);
+$dropdown-bacground-dark: #2e4c66;
+$dropdown-border-dark: #253448; 
 $themes: (
   light: (
     surface-primary: $surface-primary,
@@ -166,6 +169,9 @@ $themes: (
     custom-switch-back: $white,
     select-bg: $select-bg,
     select-bg-size: $select-bg-size,
+    dropdown-bg: $surface-primary,
+    dropdown-border: $surface-primary,
+    btn-secondary: $btn-secondary,
   ),
   dark: (
     surface-primary: $surface-primary-dark,
@@ -195,6 +201,9 @@ $themes: (
     custom-switch-back: $text-primary-dark,
     select-bg: $select-bg-dark,
     select-bg-size: $select-bg-size-dark,
+    dropdown-bg: $dropdown-bacground-dark,
+    dropdown-border: $dark,
+    btn-secondary: $btn-secondary-dark,
   ),
 );