Enhancement proposal: Theme-Specific Image Display

[martyanovandrey]

Problem

The current YFM syntax does not support the capability to display different images based on the user's selected theme (light or dark). This proposal introduces an enhancement to the YFM syntax, enabling content creators to specify distinct images for light and dark themes. This will enhance the user experience by ensuring images are appropriately visible and contextually suitable based on the selected theme.

Existing Implementation Reference

GitHub has implemented a similar feature, as detailed in the GitHub Blog Changelog.

Proposed Syntax and Implementation

CSS Styling

To facilitate this feature, specific CSS rules will be required to handle the visibility of images based on the data-theme attribute.

[data-theme='light'] img[src$='#dark-mode-only'],
[data-theme='dark'] img[src$='#light-mode-only'] {
  display: none;
}

YFM Syntax

![Themed image](/_assets/image.svg#light-mode-only)![Themed image](/_assets/image.svg#dark-mode-only)