diff --git a/packages/editor/src/components/resizer/index.tsx b/packages/editor/src/components/resizer/index.tsx index 1235adef6..7f345f088 100644 --- a/packages/editor/src/components/resizer/index.tsx +++ b/packages/editor/src/components/resizer/index.tsx @@ -74,7 +74,7 @@ export function Resizer(props: PropsWithChildren) { }} path={Icons.resize} size={25} - color={handleColor || "text"} + color={handleColor || "black"} /> ) }} diff --git a/packages/editor/src/extensions/image/component.tsx b/packages/editor/src/extensions/image/component.tsx index 6e9679b78..c6246ca8f 100644 --- a/packages/editor/src/extensions/image/component.tsx +++ b/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", diff --git a/packages/editor/src/toolbar/components/icon.tsx b/packages/editor/src/toolbar/components/icon.tsx index 3f9427605..d5ab84d95 100644 --- a/packages/editor/src/toolbar/components/icon.tsx +++ b/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 (