diplodoc-platform / diplodoc-platform/transform
Enhancement proposal: Theme-Specific Image Display
- 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

```
Contributor guide
Assessment
This issue has not been assessed yet.