1 files changed, 12 insertions, 5 deletions
diff --git a/frontend/src/App/Navbar.tsx b/frontend/src/App/Navbar.tsx
index 02a0469b1..a6e8791d4 100644
--- a/frontend/src/App/Navbar.tsx
+++ b/frontend/src/App/Navbar.tsx
@@ -138,7 +138,7 @@ const AppNavbar: FunctionComponent = () => {
             <Action
               label="Change Theme"
               color={dark ? "yellow" : "indigo"}
-              variant="hover"
+              variant="subtle"
               onClick={() => toggleColorScheme()}
               icon={dark ? faSun : faMoon}
             ></Action>
@@ -149,7 +149,7 @@ const AppNavbar: FunctionComponent = () => {
               <Action
                 label="Donate"
                 icon={faHeart}
-                variant="hover"
+                variant="subtle"
                 color="red"
               ></Action>
             </Anchor>
@@ -254,8 +254,16 @@ const useStyles = createStyles((theme) => {
   const hoverBackgroundColor =
     theme.colorScheme === "light" ? theme.colors.gray[0] : theme.colors.dark[7];
 
+  const textColor =
+    theme.colorScheme === "light" ? theme.colors.gray[8] : theme.colors.gray[5];
+
   return {
-    text: { display: "inline-flex", alignItems: "center", width: "100%" },
+    text: {
+      display: "inline-flex",
+      alignItems: "center",
+      width: "100%",
+      color: textColor,
+    },
     anchor: {
       textDecoration: "none",
       borderLeft: `2px solid ${borderColor}`,
@@ -273,6 +281,7 @@ const useStyles = createStyles((theme) => {
       marginLeft: "auto",
       textDecoration: "none",
       boxShadow: theme.shadows.xs,
+      color: textColor,
     },
   };
 });
@@ -323,7 +332,6 @@ const NavbarItem: FunctionComponent<NavbarItemProps> = ({
         inline
         p="xs"
         size="sm"
-        color="gray"
         weight={primary ? "bold" : "normal"}
         className={classes.text}
       >
@@ -336,7 +344,6 @@ const NavbarItem: FunctionComponent<NavbarItemProps> = ({
         {name}
         <Badge
           className={classes.badge}
-          color="gray"
           radius="xs"
           hidden={badge === undefined || badge === 0}
         >