Match the app theme in the HTML context menu

Author: pimterry

src/components/html-context-menu.tsx

@@ -10,9 +10,12 @@ import {
     contextMenu
 } from 'react-contexify';
 
-import { ContextMenuItem, ContextMenuState } from '../model/ui/context-menu';
+import { styled } from '../styles';
+
 import { UnreachableCheck } from '../util/error';
 
+import { ContextMenuItem, ContextMenuState } from '../model/ui/context-menu';
+
 @observer
 export class HtmlContextMenu<T> extends React.Component<{
     menuState: ContextMenuState<T>,
@@ -36,12 +39,12 @@ export class HtmlContextMenu<T> extends React.Component<{
     }
 
     render() {
-        return <Menu
+        return <ThemedMenu
             id='menu'
             onVisibilityChange={this.onVisibilityChange}
         >
             { this.props.menuState.items.map(this.renderItem) }
-        </Menu>
+        </ThemedMenu>
     }
 
     renderItem = (item: ContextMenuItem<T>, i: number) => {
@@ -70,4 +73,19 @@ export class HtmlContextMenu<T> extends React.Component<{
         if (!visible) this.props.onHidden();
     };
 
-}
+}
+
+const ThemedMenu = styled(Menu)`
+    --contexify-menu-bgColor: ${p => p.theme.mainLowlightBackground};
+    --contexify-item-color: ${p => p.theme.mainColor};
+    --contexify-separator-color: ${p => p.theme.containerBorder};
+
+    --contexify-rightSlot-color: ${p => p.theme.containerWatermark};
+    --contexify-activeRightSlot-color: ${p => p.theme.mainColor};
+
+    --contexify-arrow-color: ${p => p.theme.containerWatermark};
+    --contexify-activeArrow-color: ${p => p.theme.mainColor};
+
+    --contexify-activeItem-color: #fff;
+    --contexify-activeItem-bgColor: #3498db;
+`;