mirror of
https://github.com/squidfunk/mkdocs-material.git
synced 2024-11-12 01:50:52 +01:00
Adjusted documentation for light/dark images in custom color schemes
This commit is contained in:
parent
75ab4398b3
commit
308afb9945
@ -172,7 +172,37 @@ hash fragment to the image URL:
|
||||
|
||||
</div>
|
||||
|
||||
!!! warning "Requirements when using [custom color schemes]"
|
||||
|
||||
The built-in [color schemes] define the aforementioned hash fragments, but
|
||||
if you're using [custom color schemes], you'll also have to add the
|
||||
following selectors to your scheme, depending on whether it's a light or
|
||||
dark scheme:
|
||||
|
||||
=== "Custom light scheme"
|
||||
|
||||
``` css
|
||||
[data-md-color-scheme="custom-light"] img[src$="#only-dark"]
|
||||
[data-md-color-scheme="custom-light"] img[src$="#gh-dark-mode-only"] {
|
||||
display: none; /* Hide dark images in light mode */
|
||||
}
|
||||
```
|
||||
|
||||
=== "Custom dark scheme"
|
||||
|
||||
``` css
|
||||
[data-md-color-scheme="custom-dark"] img[src$="#only-light"],
|
||||
[data-md-color-scheme="custom-dark"] img[src$="#gh-light-mode-only"] {
|
||||
display: none; /* Hide light images in dark mode */
|
||||
}
|
||||
```
|
||||
|
||||
Remember to change `#!css "custom-light"` and `#!css "custom-dark"` to the
|
||||
name of your scheme.
|
||||
|
||||
[Light and dark mode support]: https://github.com/squidfunk/mkdocs-material/releases/tag/8.1.1
|
||||
[color palette toggle]: ../setup/changing-the-colors.md#color-palette-toggle
|
||||
[Zelda light world]: ../assets/images/zelda-light-world.png#only-light
|
||||
[Zelda dark world]: ../assets/images/zelda-dark-world.png#only-dark
|
||||
[color schemes]: ../setup/changing-the-colors.md#color-scheme
|
||||
[custom color schemes]: ../setup/changing-the-colors.md#custom-color-schemes
|
||||
|
Loading…
Reference in New Issue
Block a user