Better text selection visibility with dark theme

Hi folks.

I came here to both ask and offer the snippet below that I’m using with the standard Dark theme to provide better visibility to selected text with my much-less-than-perfect eyesight.

Here’s how selected text (edit mode) looks WITHOUT this:

And here’s how it looks with the CSS below:

Would like to know:

  1. is this CSS “correct” ?
  2. is there a better way to do this?

Thanks everyone :pray:

/* Better selection visibility */
.CodeMirror-selected {
  background-color: rgba(255, 255, 255, 0.15) !important;
  border: solid rgba(255, 255, 0, 0.75) !important;
  border-width: 0 1px 0 1px !important;
}
.cm-s-obsidian span.cm-inline-code {
  background-color: transparent !important;
}
::selection {
  background-color: rgba(255, 255, 0, 0.35) !important;
}

Some more examples:

without:
image

with:
image

preview mode (without):
image

with:

1 Like

Anyone know how to make this work with the new cm6 based editor?