1 files changed, 21 insertions, 4 deletions
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;