update menu style

src/Home.tsx

@@ -238,7 +238,9 @@ const Home: FunctionComponent<{ initial?: number }> = ({ initial = 0 }) => {
           alignSelf: "stretch",
         }}
       >
-        <h1 style={{ margin: "10px 0px" }}>{context.texts.Mancala}</h1>
+        <h1 style={{ color: menuTextColor, margin: "10px 0px" }}>
+          {context.texts.Mancala}
+        </h1>
         <div
           style={{
             display: "flex",
@@ -259,7 +261,12 @@ const Home: FunctionComponent<{ initial?: number }> = ({ initial = 0 }) => {
                 background: context.themeManager.theme.appBarBgColor,
               }}
               menuButton={
-                <span class="material-symbols-outlined">light_mode</span>
+                <span
+                  style={{ color: menuTextColor }}
+                  class="material-symbols-outlined"
+                >
+                  light_mode
+                </span>
               }
               transition
               align="end"
@@ -270,6 +277,13 @@ const Home: FunctionComponent<{ initial?: number }> = ({ initial = 0 }) => {
                     style={{
                       color: menuTextColor,
                     }}
+                    onMouseOver={(event) =>
+                      (event.target.style.background =
+                        context.themeManager.theme.background)
+                    }
+                    onMouseOut={(event) =>
+                      (event.target.style.background = "transparent")
+                    }
                     onClick={() => (context.themeManager.theme = theme)}
                   >
                     <div