From 308afb994524eea762ae817bc884858c16351cf6 Mon Sep 17 00:00:00 2001 From: squidfunk Date: Fri, 12 May 2023 16:51:42 +0200 Subject: [PATCH] Adjusted documentation for light/dark images in custom color schemes --- docs/reference/images.md | 30 ++++++++++++++++++++++++++++++ 1 file changed, 30 insertions(+) diff --git a/docs/reference/images.md b/docs/reference/images.md index f120352de..ee0245a1a 100644 --- a/docs/reference/images.md +++ b/docs/reference/images.md @@ -172,7 +172,37 @@ hash fragment to the image URL: +!!! 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