Can't set selection background color by solution

[jinwon7878]

          > hey @jinwon7878, while working on: https://x.com/10play_software/status/1808501667215593521

I noticed that:

* {
color: red;
}

Will change the color of the iOS selection to red, iOS probably inspect the * color of the webpage inside the webview and by that color the selection, this solution + override the color inside the class .ProseMirror will give you full control on selection

so the final solution will look something like this:

const editor = useEditorBridge({
  ...,
  bridgeExtensions: [
    ...TenTapStartKit,
    CodeBridge.configureCSS(`
    * {
      color: red;
    }

    #root div .ProseMirror * {
      color: #404040;
    }
    `), // Custom codeblock css
  ],
});

see: https://10play.github.io/10tap-editor/docs/examples/customCss

@GuySerfaty I tried it, but this seems to be the way to change the font color - it doesn't change the background color while it's a selection via dragging, it's still there.

If there's something I'm missing, I'd appreciate it if you could let me know 😢.

Originally posted by @jinwon7878 in https://github.com/10play/10tap-editor/issues/144#issuecomment-2206756607

[GuySerfaty]

Can you share code? on my side:

  const editor = useEditorBridge({
    autofocus: true,
    avoidIosKeyboard: true,
    bridgeExtensions: [
      ...TenTapStartKit,
      CodeBridge.configureCSS(`
      * {
        color: red;
      }

      #root div .ProseMirror * {
        color: #404040;
      }
      `), // Custom codeblock css
    ],
    initialContent,
  });

[jinwon7878]

Here's my editor code in dark mode!! Thank you for your quick response :)

// editor in dark mode

const editor = useEditorBridge({
    bridgeExtensions: [
      CodeBridge.configureCSS(`
      .tiptap {
         background-color: ${color.background}; // #212121 (black background)
         padding: 0 24px;
         font-size: 15px;
         color: ${color.neutral1}; // #E6E6E6 (white font color)
      }
      `),
    ],
    initialContent,
  });

As shown in the top photo, in dark mode (background color is black, text color is white), the selection background obscures the text. This selection background (similar to the font color) is only rectangularly wrapping around the text, not the margins.

Additionally, when I applied the solution, the result was as follows (background color is not changed)

[GuySerfaty]

@jinwon7878 - you didnt follow my solution at all

      #root div .ProseMirror * {
        color: blue;
      }

      * {
        color: red;
      }

      #root div .ProseMirror {
        background-color: black;
        padding: 0 24px;
        font-size: 15px;
      }

output:

please notice the:

      * {
        color: red;
      }

which does the trick here, change the selection color, then:

      #root div .ProseMirror * {
        color: blue;
      }

Will let you override the color to whatever you want to be the color of the actual text