[@mantine/tiptap] Fix incorrect color displayed in color control in d…

…ark color scheme (#4560)

* Update ColorPickerControl.tsx

Updated ColorPickerControl.tsx to resolve the issue "Rich Text Editor's color picker now showing black color as default in dark color scheme"

* Update ColorPickerControl.tsx

prettier issue?

* Update ColorPickerControl.tsx

I sure hope this works!

* formatting

src/mantine-tiptap/src/controls/ColorPickerControl/ColorPickerControl.tsx

@@ -11,6 +11,7 @@ import {
   Tooltip,
   ColorPickerProps,
   useComponentDefaultProps,
+  useMantineTheme,
 } from '@mantine/core';
 import { useDisclosure } from '@mantine/hooks';
 import { IconCircleOff, IconColorPicker, IconX, IconPalette, IconCheck } from '@tabler/icons-react';
@@ -43,7 +44,11 @@ export const ColorPickerControl = forwardRef<HTMLButtonElement, ColorPickerContr
     const { editor, labels, unstyled } = useRichTextEditorContext();
     const [opened, { toggle, close }] = useDisclosure(false);
     const [state, setState] = useState<'palette' | 'colorPicker'>('palette');
-    const currentColor = editor?.getAttributes('textStyle').color || '#000';
+    const theme = useMantineTheme();
+    const currentColor =
+      editor?.getAttributes('textStyle').color || theme.colorScheme === 'dark'
+        ? theme.colors.dark[1]
+        : theme.colors.blue[1];
 
     const handleChange = (value: string, shouldClose = true) => {
       (editor.chain() as any).focus().setColor(value).run();
@@ -92,7 +97,7 @@ export const ColorPickerControl = forwardRef<HTMLButtonElement, ColorPickerContr
         </Popover.Target>
 
         <Popover.Dropdown
-          sx={(theme) => ({
+          sx={() => ({
             backgroundColor: theme.colorScheme === 'dark' ? theme.colors.dark[7] : theme.white,
           })}
         >