Ensures that the highlighter makes the text white (especially for dark mode users)

[praneeth-lakshman]

This is a rudimentary approach; ideally, we could have the plugin automatically change the colour of the text depending on the background

[JeFawk]

Would it fix this issue?

[florenciagithub]

Hey 😊🌟

I've found a solution for us Dark Mode lovers! 🌙✨

After tinkering around with CSS snippets, I've managed to adjust the text color when using the Highlightr tool to stay white - no matter the color of the highlighter!

To achieve the same result, add the following code to your CSS snippets directory:

1
/* Sets the text color of all highlighted elements to white */
.markdown-preview-view mark[class^="hltr-"],
.cm-s-obsidian mark[class^="hltr-"] {
    color: #FFFFFF !important;
}

⚠️ Make sure you switch the highlighting method to "css-classes" in the settings of the Highlightr plugin for the snippet to work its magic. Once you've done that, you'll see your text shining bright white over the colorful highlights – in both preview and editor mode!

I'm also attaching a before-and-after picture for you to see the comparison. 💡

I hope it brings a bit of joy to your Obsidian daily routine :).

Let's brighten up the dark a bit! 💖

Stay curious and creative,

Florencia 🚀 #ObsidianMD #DarkMode #HighlightRHack

P.S.: A user in discord mentioned "this is cool. var(--text-normal) might be preferred if it also renders a light font (so it matches the user's theme)". So maybe that could be an even better option 🥳.