1 files changed, 20 insertions, 15 deletions
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;
   }