Hello! I’ve been messing around with multiple cursors and I’ve found an issue with the CSS from presumably Code Mirror overriding the app.css styles.
Specifically, selecting in multiple places with alt+drag has a background color of #d7d4f0 even overriding the the var(--text-selector). This looks decent in light mode but makes dark mode completely unreadable. It also does not respect themes’ custom selection colors.
This comes from the first <style> tag in the <head> element. Specifically, it’s the style from .ͼ2.cm-focused > .cm-scroller > .cm-selectionLayer .cm-selectionBackground. I assume this has something to do with Code Mirror because the theme template has a line that affects .cm-cursor-layer which seems to be related.
A solution could hopefully also include the ability to customize secondary .cm-selectionBackground elements with some variable like --text-selection-secondary with a default value of that variable being var(--text-selection).
I have included more screenshots of the issue at the bottom.
Steps to reproduce
- Go to edit mode (source or live preview)
- Hold Alt
- Drag to select text
- Drag to select more text
You will have to use the debugger command to find the style since it is located under .cm-scroller > .cm-selection-layer. I used setTimeout(()=>{debugger}, 2000) in the console.
A gif of the process:
Expected result
The text background should obey the --text-selector color.
Actual result
The text background is hard coded to be #d7d4f0 in both dark and light modes.
Environment
SYSTEM INFO:
Obsidian version: v1.2.7
Installer version: v1.2.7
Operating system: Windows 10 Pro 10.0.19045
Login status: not logged in
Insider build toggle: off
Live preview: on
Legacy editor: off
Base theme: dark
Community theme: none
Snippets enabled: 0
Restricted mode: on
RECOMMENDATIONS:
none
Additional information
Current style:
After removing the hard-coded style:
