Cool_Tools/mkdocs-material
1
0
Fork 0
mirror of https://github.com/squidfunk/mkdocs-material.git synced 2024-09-24 03:18:21 +02:00
Code Issues Releases Wiki Activity

Adjusted documentation for light/dark images in custom color schemes

Browse Source
This commit is contained in:
squidfunk 2023-05-12 16:51:42 +02:00
parent 75ab4398b3
commit 308afb9945
No known key found for this signature in database
GPG Key ID: 5ED40BC4F9C436DF
1 changed files with 30 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

30
docs/reference/images.md
View File

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