diff --git a/src/renderer/components/cluster-manager/clusters-menu.scss b/src/renderer/components/cluster-manager/clusters-menu.scss
index 0ee1f59d7e..9b412e5035 100644
--- a/src/renderer/components/cluster-manager/clusters-menu.scss
+++ b/src/renderer/components/cluster-manager/clusters-menu.scss
@@ -1,5 +1,4 @@
.ClustersMenu {
- @include hidden-scrollbar;
$spacing: $padding * 2;
position: relative;
@@ -23,8 +22,7 @@
padding: $spacing;
width: 320px;
background: $bgc;
- z-index: 100;
- color: white;
+ color: $textColorAccent;
filter: drop-shadow(0 0px 2px #ffffff33);
pointer-events: none;
@@ -38,6 +36,19 @@
border-right: $arrowSize solid $bgc;
right: 100%;
}
+
+ .theme-light & {
+ filter: drop-shadow(0 0px 2px #777);
+ background: white;
+
+ &:before {
+ border-right-color: white;
+ }
+ }
+ }
+
+ .clusters {
+ @include hidden-scrollbar;
}
> .add-cluster {
diff --git a/src/renderer/components/cluster-manager/clusters-menu.tsx b/src/renderer/components/cluster-manager/clusters-menu.tsx
index 23d85507c3..d4fb4cefb1 100644
--- a/src/renderer/components/cluster-manager/clusters-menu.tsx
+++ b/src/renderer/components/cluster-manager/clusters-menu.tsx
@@ -110,18 +110,20 @@ export class ClustersMenu extends React.Component