diff --git a/src/renderer/components/+namespaces/namespace-select-filter.scss b/src/renderer/components/+namespaces/namespace-select-filter.scss
index 76014ecbef..f48ffdde49 100644
--- a/src/renderer/components/+namespaces/namespace-select-filter.scss
+++ b/src/renderer/components/+namespaces/namespace-select-filter.scss
@@ -1,5 +1,11 @@
 .NamespaceSelectFilter {
+  --gradientColor: var(--contentColor);
+
   .Select {
+    &.theme-light {
+      --gradientColor: #fff;
+    }
+
     &__placeholder {
       width: 100%;
       white-space: nowrap;
@@ -29,12 +35,12 @@
 
       &::before {
         left: 0px;
-        background: linear-gradient(to right, var(--contentColor) 0px, transparent);
+        background: linear-gradient(to right, var(--gradientColor) 0px, transparent);
       }
 
       &::after {
         right: 0px;
-        background: linear-gradient(to left, var(--contentColor) 0px, transparent);
+        background: linear-gradient(to left, var(--gradientColor) 0px, transparent);
       }
     }
   }
diff --git a/src/renderer/components/+namespaces/namespace-select-filter.tsx b/src/renderer/components/+namespaces/namespace-select-filter.tsx
index 63109a8630..7bf2fbebf1 100644
--- a/src/renderer/components/+namespaces/namespace-select-filter.tsx
+++ b/src/renderer/components/+namespaces/namespace-select-filter.tsx
@@ -7,7 +7,7 @@ import { components, PlaceholderProps } from "react-select";
 import { Icon } from "../icon";
 import { FilterIcon } from "../item-object-list/filter-icon";
 import { FilterType } from "../item-object-list/page-filters.store";
-import { SelectOption } from "../select";
+import { SelectOption, SelectProps } from "../select";
 import { NamespaceSelect } from "./namespace-select";
 import { namespaceStore } from "./namespace.store";
 
@@ -33,9 +33,8 @@ const Placeholder = observer((props: PlaceholderProps<any>) => {
   );
 });
 
-
 @observer
-export class NamespaceSelectFilter extends React.Component {
+export class NamespaceSelectFilter extends React.Component<SelectProps> {
   formatOptionLabel({ value: namespace, label }: SelectOption) {
     if (namespace) {
       const isSelected = namespaceStore.hasContext(namespace);