editor: always use black icons on image overlay

packages/editor/src/components/resizer/index.tsx

@@ -74,7 +74,7 @@ export function Resizer(props: PropsWithChildren<ResizerProps>) {
             }}
             path={Icons.resize}
             size={25}
-            color={handleColor || "text"}
+            color={handleColor || "black"}
           />
         )
       }}

packages/editor/src/extensions/image/component.tsx

@@ -233,7 +233,7 @@ export function ImageComponent(
                     data-drag-handle
                     draggable
                     path={Icons.dragHandle}
-                    color="text"
+                    color="black"
                     sx={{
                       cursor: "grab",
                       position: "absolute",

packages/editor/src/toolbar/components/icon.tsx

@@ -23,11 +23,18 @@ import { SchemeColors } from "@notesnook/theme/dist/theme/colorscheme";
 import { Flex, FlexProps } from "@theme-ui/components";
 import { useTheme } from "@emotion/react";
 
+function isSchemeColor(
+  color: string,
+  theme: Theme
+): color is keyof SchemeColors {
+  return color in theme.colors;
+}
+
 type IconProps = {
   title?: string;
   path: string;
   size?: keyof Theme["iconSizes"] | number;
-  color?: keyof SchemeColors;
+  color?: keyof SchemeColors | string;
   stroke?: string;
   rotate?: boolean;
 };
@@ -41,9 +48,10 @@ function MDIIconWrapper({
 }: IconProps) {
   const theme = useTheme() as Theme;
 
-  const themedColor: string = theme?.colors
-    ? (theme.colors[color] as string)
-    : color;
+  const themedColor: string =
+    theme && isSchemeColor(color, theme)
+      ? (theme.colors[color] as string)
+      : color;
 
   return (
     <MDIIcon