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:
- is this CSS “correct” ?
- is there a better way to do this?
Thanks everyone
/* 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:
with:
preview mode (without):
with: