Skip to content

Commit 308afb9

Browse files
committed
Adjusted documentation for light/dark images in custom color schemes
1 parent 75ab439 commit 308afb9

File tree

1 file changed

+30
-0
lines changed

1 file changed

+30
-0
lines changed

Diff for: docs/reference/images.md

+30
Original file line numberDiff line numberDiff line change
@@ -172,7 +172,37 @@ hash fragment to the image URL:
172172

173173
</div>
174174

175+
!!! warning "Requirements when using [custom color schemes]"
176+
177+
The built-in [color schemes] define the aforementioned hash fragments, but
178+
if you're using [custom color schemes], you'll also have to add the
179+
following selectors to your scheme, depending on whether it's a light or
180+
dark scheme:
181+
182+
=== "Custom light scheme"
183+
184+
``` css
185+
[data-md-color-scheme="custom-light"] img[src$="#only-dark"]
186+
[data-md-color-scheme="custom-light"] img[src$="#gh-dark-mode-only"] {
187+
display: none; /* Hide dark images in light mode */
188+
}
189+
```
190+
191+
=== "Custom dark scheme"
192+
193+
``` css
194+
[data-md-color-scheme="custom-dark"] img[src$="#only-light"],
195+
[data-md-color-scheme="custom-dark"] img[src$="#gh-light-mode-only"] {
196+
display: none; /* Hide light images in dark mode */
197+
}
198+
```
199+
200+
Remember to change `#!css "custom-light"` and `#!css "custom-dark"` to the
201+
name of your scheme.
202+
175203
[Light and dark mode support]: https://github.com/squidfunk/mkdocs-material/releases/tag/8.1.1
176204
[color palette toggle]: ../setup/changing-the-colors.md#color-palette-toggle
177205
[Zelda light world]: ../assets/images/zelda-light-world.png#only-light
178206
[Zelda dark world]: ../assets/images/zelda-dark-world.png#only-dark
207+
[color schemes]: ../setup/changing-the-colors.md#color-scheme
208+
[custom color schemes]: ../setup/changing-the-colors.md#custom-color-schemes

0 commit comments

Comments
 (0)