Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Dark Mode - Reading view turn text to unreadable #51

Open
FareziHanif opened this issue Oct 15, 2022 · 6 comments
Open

Dark Mode - Reading view turn text to unreadable #51

FareziHanif opened this issue Oct 15, 2022 · 6 comments

Comments

@FareziHanif
Copy link

In Source mode / live preview, the text is easily readable
image

In Preview Mode, the text turns white.
image

The text should turn black in preview mode since the highlighter is on the brighter colour.
Im inserted the colour hex myself (copy paste from internet), if that causing this.
Anyway, thank you to make such an eye pleasing plugins! Keep it up!~

@3dot141
Copy link

3dot141 commented Oct 30, 2022

have some issue

@Comprehensive-Jason
Copy link

Comprehensive-Jason commented Oct 30, 2022

I have the same issue. For now, you can just add color: #000000 right after the semicolon in the inline CSS <mark style="background: #FFFFFF;"> to force the text color to black (for example <mark style="background: #FFFFFF; color: #000000">. It would be great if this was a built-in option in the plugin, so that we could select which font color to always use.

@Comprehensive-Jason
Copy link

Comprehensive-Jason commented Oct 30, 2022

I noticed that #22 is having the opposite problem. They want their text to be white always. Here #22 (comment) they used a CSS snippet to force colors to always use the color of the theme. I messed with it, but it doesn't seem to work correctly anymore after the Obsidian 1.0 update due to the devs changing how some of the CSS classes work.
It would be great if there was some kind of toggle in the plugin to select between these different behaviors by adding inline CSS like my comment above, so that our highlights are more robust and less fiddly.

@jx3v
Copy link

jx3v commented Dec 15, 2022

It would be great if the plugin could get updated to force white/default text color in editing mode.

@florenciagithub
Copy link

I personally prefer to work in dark mode with my font always white. I choose highlighter colours that make it still easy to read white fonts. And I wrote a snippet that makes the font always white, also when highlighted and with the editor mode on.
Screenshot 2023-11-25 223640
The Highlighter colours that I use:
Screenshot 2023-11-25 232205

here is the code:
/* Setzt die Textfarbe für alle hervorgehobenen Elemente auf Weiß */
.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 hope it helps anyone :) <3

@florenciagithub
Copy link

BUT it would be my dream if there was a "highlightr dark mode" version, where the font would be always white without the need to use a css snippet <3

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

5 participants