Closed jinwon7878 closed 1 month ago
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,
});
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)
@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
@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