Selected text can be difficult to see compared to excalidraw.com

[parkero]

Describe the bug

 In obsidian-excalidraw-plugin selected text retains its color on the dark background, making it more difficult to see.

To Reproduce

1. Insert a new text field with double click or text tool
2. Type some text, dark colors most obvious
3. Select the text by pressing ctrl-a or clicking out and back in
4. The text stays dark on a dark colored background

Expected behavior

 On excalidraw.com selected text is turned white on the dark background so it is easier to see.

Screenshots
 obsidian-excalidraw-plugin

 www.excalidraw.com

Environment (please complete the following information):

• OS including version: Windows 10 (Version 20H2)
• Plugin version: 1.7.12
• Obsidian version: 0.15.9

Additional context
Tested on a fresh install of obsidian and the plugin in a windows sandbox

[zsviczian]

I'll take a look - this must be some CSS issue

[parkero]

I am willing to assist as well if you don't mind pointing me to a possible starting spot

[zsviczian]

I tried to reproduce this, but was not successful. This does feel like a CSS issue. Not yet sure where to look in the CSS though.

2022-08-15.09-56-09.mp4

[zsviczian]

Ok. I was able to reproduce by switching Obsidian to the default CSS.

Try adding the following CSS snippet to Obsidian:

.theme-light {
  --text-selection: rgba(189, 174, 147, 0.5);
}
.theme-dark {
  --text-selection: rgba(168, 153, 132, 0.5);
}

Click settings > select Appearance > scroll down to CSS snippets > click open snippets folder > create a text file with the above 6 lines and save the file with the name textselection.css > in obsidian settings under CSS snippets click reload snippets > then click the toggle to activate your new snippet

hopefully this will resolve your issue

[parkero]

Appreciate you looking into this for me. Using your CSS as a jumping point I was able to define a rule that changes it to be like the excalidraw defaults, without affecting the base theme in Obsidian.

.excalidraw-view ::selection {
  background-color: #4dabf7;
  color: rgba(255, 255, 255, 1);
}

High contrast in light mode and dark.

Cheers! and thank you for the help and the great plugin.