diff --git a/client/src/components/app-bar/FeaturePickerButton.tsx b/client/src/components/app-bar/FeaturePickerButton.tsx
index 8eecd98e..d547094d 100644
--- a/client/src/components/app-bar/FeaturePickerButton.tsx
+++ b/client/src/components/app-bar/FeaturePickerButton.tsx
@@ -1,5 +1,5 @@
 import { KeyboardArrowDownOutlined } from "@mui/icons-material";
-import { Box, Button, ButtonProps } from "@mui/material";
+import { Box, Button, ButtonProps, useTheme } from "@mui/material";
 import { Props } from "./FeaturePicker";
 
 export function FeaturePickerButton({
@@ -8,6 +8,7 @@ export function FeaturePickerButton({
   showArrow,
   ...props
 }: ButtonProps & Pick<Props, "icon" | "showArrow">) {
+  const theme = useTheme();
   return (
     <Button
       {...props}
@@ -21,7 +22,8 @@ export function FeaturePickerButton({
           <KeyboardArrowDownOutlined
             sx={{
               ml: -0.5,
-              color: "text.primary",
+              // For some reason this color must be explicit
+              color: theme.palette.text.primary,
               opacity: (t) =>
                 props.disabled ? t.palette.action.disabledOpacity : 1,
             }}
@@ -31,7 +33,7 @@ export function FeaturePickerButton({
     >
       <Box
         sx={{
-          color: "text.primary",
+          color: (t) => t.palette.text.primary,
           opacity: (t) =>
             props.disabled ? t.palette.action.disabledOpacity : 1,
         }}