Contents

img

Custom. Specify different images to match the system light and dark modes used by the Azure Citadel site theme.

Inspired by the GitHub post, this shortcode enables you to use light / dark mode appropriate images using the prefers-color-scheme feature.

Example HTML

<picture>
  <source media="(prefers-color-scheme: dark)" srcset="/about/images/dark.png">
  <img alt="Shows a sun in light mode and a moon in dark mode." src="/about/images/light.png">
</picture>

Hugo shortcode

{{< img light="/about/images/light.png" dark="/about/images/dark.png" alt="Shows a sun in light mode and a moon in dark mode." >}}

Pick any two named variables from src, light and dark. The alt text is optional but recommended for inclusivity.

Example

Help us improve

Azure Citadel is a community site built on GitHub, please contribute and send a pull request