diplodoc-platform / diplodoc-platform/transform

Enhancement proposal: Theme-Specific Image Display

Open
#521 0 comments 0 reactions 0 assignees View on GitHub
enhancement good first issue
Dominant language
TypeScript
Stars
69
Forks
59
Avg merge
1d 21h
Merged PRs (30d)
6

Description

## 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](https://github.blog/changelog/2021-11-24-specify-theme-context-for-images-in-markdown/).

## 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.

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

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

Contributor guide

Open the contributing guide

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.