Skip to content

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

Open
wants to merge 5 commits into
base: master
Choose a base branch
from

Conversation

mlange-42
Copy link

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

@rustbot rustbot added the S-waiting-on-review Status: waiting on a review label Jan 18, 2023
Comment on lines +127 to +128
<img src="images/rust-logo-blk.svg" class="no-dark-themes" />
<img src="images/rust-logo-blk-dark.svg" class="no-light-themes" />
Copy link

@not-my-profile not-my-profile Feb 13, 2023

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.

Copy link
Author

@mlange-42 mlange-42 Feb 13, 2023

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.

Copy link

@2bndy5 2bndy5 Jul 12, 2024

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
![rust logo standard edition](images/rust-logo-blk.svg#only-light)
![rust logo dark mode](images/rust-logo-blk-dark.svg#only-dark)
```

as hayesall reported it working.

@hayesall
Copy link

@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:

![rust logo standard edition](images/rust-logo-blk.svg#only-light)
![rust logo dark mode](images/rust-logo-blk-dark.svg#only-dark)

@ehuss ehuss added the A-Theme Area: Theme label Feb 25, 2024
@rustbot
Copy link
Collaborator

rustbot commented Apr 30, 2025

☔ The latest upstream changes (possibly #2681) made this pull request unmergeable. Please resolve the merge conflicts.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
A-Theme Area: Theme S-waiting-on-review Status: waiting on a review
Projects
None yet
Development

Successfully merging this pull request may close these issues.

Theme-dependent image variants
6 participants