diff --git a/src/display/shared/sidebar/_styles.js b/src/display/shared/sidebar/_styles.js
index 86e1f4fb..89c53c7e 100644
--- a/src/display/shared/sidebar/_styles.js
+++ b/src/display/shared/sidebar/_styles.js
@@ -2,22 +2,40 @@ import styled from 'styled-components';
 import colors from '../../../infrastructure/constants/colors';
 
 export default styled.div`
-	color: ${colors.GRAY_400};
-	background: ${colors.WHITE};
-	border-right: 1px solid ${colors.GRAY_200};
+	color: ${colors.GRAY_100};
+	background: ${colors.GRAY_900};
+	border-right: 1px solid ${colors.GRAY_400};
+  .light-theme & {
+	  color: ${colors.GRAY_400};
+	  background: ${colors.WHITE};
+    border-right: 1px solid ${colors.GRAY_200};
+  }
 	.nav {
 		.nav-title {
-			color: ${colors.GRAY_600}
+			color: ${colors.GRAY_100};
+      .light-theme & {
+        color: ${colors.GRAY_600}
+      }
 		}
 		.nav-item {
 			.nav-link {
-				color: ${colors.GRAY_600}
+				color: ${colors.GRAY_100};
+        .light-theme & {
+          color: ${colors.GRAY_600}
+        }
 				i {
-					color: ${colors.GRAY_600}
+					color: ${colors.GRAY_100}; 
+          .light-theme & {
+            color: ${colors.GRAY_600}
+          }
 				}
 				&.active {
-					background: ${colors.GRAY_050};
-					color: ${colors.GRAY_600};
+					background: ${colors.GRAY_600};
+					color: ${colors.GRAY_050};
+          .light-theme & {
+            background: ${colors.GRAY_050};
+            color: ${colors.GRAY_600};
+          }
 					i {
 						color: ${colors.LIGHT_BLUE};
 					}