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

Add css media queries to support dark themes #134

Open
MayeulC opened this issue May 11, 2023 · 1 comment
Open

Add css media queries to support dark themes #134

MayeulC opened this issue May 11, 2023 · 1 comment

Comments

@MayeulC
Copy link

MayeulC commented May 11, 2023

I was browsing a repository that uses a file from this repository in its readme.

As I use a dark mode on github, it displayed the schematic as black-on-dark-background, making it almost unreadable. This repository has the same issue.

Playing around with different options, I suggest adding css media queries to the generated svg files and skins:

@media (prefers-color-scheme: dark) {
svg {stroke: #ccc;}
text {fill: #ccc;}
.splitjoinBody {fill: #ccc;}
.detail {fill: #ccc;}
}

When the browser is set to a dark theme, the circuit color will be changed to white.

As a possible drawback, graphics may appear white-on-white on websites that still use a white background despite the user preference. As this is not the case on GitHub, this should probably be the default, at least for examples in this repository.
An alternative I considered was to use mix-blend-mode and background-blend-mode, as well as svg filters, to try to mix/invert background colors, but I didn't have much success.

@sifferman
Copy link

This is the temporary fix I use in my Makefiles:

%.netlistsvg.svg: %.json
	netlistsvg $< -o $@
	sed -i -E 's@(<svg[^>]*>)@\1<rect width="100%" height="100%" fill="white"/>@g' "$@"

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

2 participants