diff --git a/assets/components/MobileMenu.vue b/assets/components/MobileMenu.vue
index 53d8a71b..2bc6807f 100644
--- a/assets/components/MobileMenu.vue
+++ b/assets/components/MobileMenu.vue
@@ -89,8 +89,7 @@ aside {
   .logo {
     width: 82px;
     height: 36px;
-    fill: #ffdd57;
-    filter: drop-shadow(0 0px 0px rgba(0, 0, 0, 0.8));
+    fill: var(--logo-color);
   }
 }
 </style>
diff --git a/assets/components/SideMenu.vue b/assets/components/SideMenu.vue
index ca1cb467..5ad769d7 100644
--- a/assets/components/SideMenu.vue
+++ b/assets/components/SideMenu.vue
@@ -93,8 +93,7 @@ li.exited a {
 .logo {
   width: 122px;
   height: 54px;
-  fill: #ffdd57;
-  filter: drop-shadow(0 0px 0px rgba(0, 0, 0, 0.8));
+  fill: var(--logo-color);
 }
 
 .will-append-container.icon {
diff --git a/assets/styles.scss b/assets/styles.scss
index befbe9a0..c896de45 100644
--- a/assets/styles.scss
+++ b/assets/styles.scss
@@ -31,6 +31,7 @@ html {
 
   --border-color: #{$grey-darker};
   --border-hover-color: var(--secondary-color);
+  --logo-color: var(--secondary-color);
 
   --primary-color: #{$turquoise};
   --secondary-color: #{$yellow};
@@ -52,6 +53,7 @@ html {
 
   --border-color: #{$grey-lighter};
   --border-hover-color: var(--secondary-color);
+  --logo-color: var(--body-color);
 
   --primary-color: #{$turquoise};
   --secondary-color: #d8f0ca;
@@ -106,7 +108,7 @@ html.has-custom-scrollbars {
   color: #fff;
   border-color: transparent;
   &:hover {
-    border-color: rgb(255, 221, 87) !important;
+    border-color: var(--border-hover-color) !important;
     background: rgba(0, 0, 0, 0.8) !important;
     color: #fff !important;
   }