fix: Submenus get stuck open, closes #2938

app/actions/definitions/settings.tsx

@@ -36,7 +36,8 @@ export const changeToSystemTheme = createAction({
 });
 
 export const changeTheme = createAction({
-  name: ({ t }) => t("Change theme"),
+  name: ({ t, isContextMenu }) =>
+    isContextMenu ? t("Appearance") : t("Change theme"),
   placeholder: ({ t }) => t("Change theme to"),
   icon: () =>
     stores.ui.resolvedTheme === "light" ? <SunIcon /> : <MoonIcon />,

app/components/ContextMenu/MenuItem.tsx

@@ -107,6 +107,7 @@ export const MenuAnchorCSS = css<{ level?: number; disabled?: boolean }>`
   font-size: 16px;
   cursor: default;
   user-select: none;
+  white-space: nowrap;
 
   svg:not(:last-child) {
     margin-right: 4px;

app/components/ContextMenu/Template.tsx

@@ -7,7 +7,7 @@ import {
   MenuButton,
   MenuItem as BaseMenuItem,
 } from "reakit/Menu";
-import styled from "styled-components";
+import styled, { useTheme } from "styled-components";
 import Flex from "~/components/Flex";
 import MenuIconWrapper from "~/components/MenuIconWrapper";
 import { actionToMenuItem } from "~/actions";
@@ -46,16 +46,15 @@ const Submenu = React.forwardRef(
     ref: React.LegacyRef<HTMLButtonElement>
   ) => {
     const { t } = useTranslation();
-    const menu = useMenuState({
-      modal: true,
-    });
+    const theme = useTheme();
+    const menu = useMenuState();
 
     return (
       <>
         <MenuButton ref={ref} {...menu} {...rest}>
           {(props) => (
             <MenuAnchor {...props}>
-              {title} <Disclosure color="currentColor" />
+              {title} <Disclosure color={theme.textTertiary} />
             </MenuAnchor>
           )}
         </MenuButton>