search

lukeorth / poison

Professional Hugo theme for dev bloggers. Based on Mdo's classic Hyde theme.
https://poison.lukeorth.com
GNU General Public License v3.0
199 stars 98 forks source link

Mermaid diagrams are hard to read in dark mode #119

Closed jaskij closed 10 months ago

jaskij commented 1 year ago

As in the title - they are hard to read, and the colors clash. Maybe it could be fixed with styling?

image

lukeorth commented 12 months ago

Hi, @jaskij -- thank you for pointing this out. I actually have a couple changes I'd like to make to the Mermaid diagrams, this being one of them. I'll try to work on this soon. :+1:

jaskij commented 11 months ago

I'm not a web developer, but iirc SVG can be styled with CSS? If Mermaid's output actually works for that.

lukeorth commented 11 months ago

Yes I think it can be styled with CSS. It also appears that Mermaid offers dark mode support out of the box -- it's just a matter of setting the right configs for it.

jaskij commented 11 months ago

So it's just a matter of implementing this

lukeorth commented 10 months ago

Sorry, @jaskij -- I finally got around to this with this PR.

As stated in the PR, I was unsuccessful in finding a way to do this with an "onClick" event, so diagrams will only be updated on page load. Simply toggling between light/dark mode won't activate the associated theme. I assume this isn't too big of an issue since most users will settle on using light/dark mode and stick to it, but it's still something that I don't like and could certainly be improved. That said, I wanted to get something out there for the time being. Hope this helps!

jaskij commented 10 months ago

@lukeorth thank you very much!

As you say, the onClick part isn't critical, and it's better to have it in the current state.

One thing I'm not sure if Poison is choosing light or dark based on browser preferences. I would see it that this case works more than onClick.