-
Notifications
You must be signed in to change notification settings - Fork 1.7k
Theme-dependent image variants #1991
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
base: master
Are you sure you want to change the base?
Conversation
271e65a
to
dafc430
Compare
<img src="images/rust-logo-blk.svg" class="no-dark-themes" /> | ||
<img src="images/rust-logo-blk-dark.svg" class="no-light-themes" /> |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
I'd prefer only-light-themes
and only-dark-themes
for the class names ... since the negation is a bit unintuitive.
There is also some precedence for that, see e.g. the mkdocs material documentation.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Thanks for the review, you are probably right here. Will try to rework this accordingly.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Technically, this fenced block is only html
syntax.
Some MD linters prohibit the use of raw HTML, so maybe change this to
```markdown


```
as hayesall reported it working.
@mlange-42 I've been working with this for a little while now, and it seems like a good approach after not-my-profile's review: .light img[src$="#only-dark"],
.rust img[src$="#only-dark"] {
display:none;
}
.navy img[src$="#only-light"],
.ayu img[src$="#only-light"],
.coal img[src$="#only-light"] {
display:none;
} plus it works directly in Markdown: 
 |
☔ The latest upstream changes (possibly #2681) made this pull request unmergeable. Please resolve the merge conflicts. |
Implements theme-dependent image variants using CSS and HTML classes.
Basically, HTML elements can be excluded on individual themes, or on themes grouped by light vs. dark.
See the added documentation for usage details. They also show the feature in action.
An alternative would be to let users do it via CSS themselves, but this solution might not be obvious.
Fixes #1990