mirror of
https://github.com/squidfunk/mkdocs-material.git
synced 2024-06-14 11:52:32 +03: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>
|
</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
|
[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
|
[color palette toggle]: ../setup/changing-the-colors.md#color-palette-toggle
|
||||||
[Zelda light world]: ../assets/images/zelda-light-world.png#only-light
|
[Zelda light world]: ../assets/images/zelda-light-world.png#only-light
|
||||||
[Zelda dark world]: ../assets/images/zelda-dark-world.png#only-dark
|
[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