mdBook icon indicating copy to clipboard operation
mdBook copied to clipboard

Theme-dependent image variants

Open mlange-42 opened this issue 2 years ago • 1 comments

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

mlange-42 avatar Jan 18 '23 12:01 mlange-42

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

hayesall avatar Oct 19 '23 15:10 hayesall