Support for dark mode alternate images in markdown #14986

New Issue

GiteaMirror · 2025-11-02T11:27:21-06:00

GiteaMirror commented

2025-11-02 11:27:21 -06:00

Originally created by @ybizeul on GitHub (Sep 28, 2025).

Feature Description

GitHub supports embedding both variant of an image in markdown (See https://www.stefanjudis.com/notes/how-to-define-dark-light-mode-images-in-github-markdown/)

Basically it works by using this syntax :

![fperm schema](./schema-dark.svg#gh-dark-mode-only)
![fperm schema](./schema-light.svg#gh-light-mode-only)

It would be nice to have this supported in Gitea markdown

Currently, both images are displayed.

Screenshots

Originally created by @ybizeul on GitHub (Sep 28, 2025). ### Feature Description GitHub supports embedding both variant of an image in markdown (See https://www.stefanjudis.com/notes/how-to-define-dark-light-mode-images-in-github-markdown/) Basically it works by using this syntax : ```md ![fperm schema](./schema-dark.svg#gh-dark-mode-only) ![fperm schema](./schema-light.svg#gh-light-mode-only) ``` It would be nice to have this supported in Gitea markdown Currently, both images are displayed. ### Screenshots <img width="910" height="767" alt="Image" src="https://github.com/user-attachments/assets/c8f314ec-4afa-4cf3-879e-0c52d92194b4" /> <img width="910" height="767" alt="Image" src="https://github.com/user-attachments/assets/57273a00-18f1-4869-8e5e-5a7eb30e3b5a" />

GiteaMirror added the issue/confirmed topic/ui labels 2025-11-02 11:27:21 -06:00

GiteaMirror commented

2025-11-02 11:27:22 -06:00

@silverwind commented on GitHub (Sep 29, 2025):

According to https://github.com/stefanjudis/github-light-dark-image-example, that hash-based syntax is "deprecated" and the <picture> syntax should be preferred. Does it work in Gitea?

<picture>
  <source media="(prefers-color-scheme: dark)" srcset="./dark.svg">
  <img src="./light.svg">
</picture>

We should still support the GitHub sytnax for compatibility reasons of course.

@silverwind commented on GitHub (Sep 29, 2025): According to https://github.com/stefanjudis/github-light-dark-image-example, that hash-based syntax is "deprecated" and the `<picture>` syntax should be preferred. Does it work in Gitea? ```html <picture> <source media="(prefers-color-scheme: dark)" srcset="./dark.svg"> <img src="./light.svg"> </picture> ``` We should still support the GitHub sytnax for compatibility reasons of course.

GiteaMirror commented

2025-11-02 11:27:22 -06:00

@wxiaoguang commented on GitHub (Sep 29, 2025):

Gitea doesn't support <source> at the moment.

It should be an easy fix to support <source media...., just add them to the func (st *Sanitizer) createDefaultPolicy()

@wxiaoguang commented on GitHub (Sep 29, 2025): Gitea doesn't support `<source>` at the moment. It should be an easy fix to support `<source media....`, just add them to the `func (st *Sanitizer) createDefaultPolicy()`

GiteaMirror commented

2025-11-02 11:27:22 -06:00

@ybizeul commented on GitHub (Sep 29, 2025):

According to https://github.com/stefanjudis/github-light-dark-image-example, that hash-based syntax is "deprecated" and the <picture> syntax should be preferred. Does it work in Gitea?
We should still support the GitHub sytnax for compatibility reasons of course.

I didn't know about deprecation, well that's too bad but indeed mirroring GitHub behavior is usually a plus.

That said, the options listed below in your example page work better as they fall back on light image instead of displaying both, that's a win.

So I replaced :

![fperm schema](./schema-dark.svg#gh-dark-mode-only)
![fperm schema](./schema-light.svg#gh-light-mode-only)

with:

<picture>
  <source media="(prefers-color-scheme: dark)" srcset="./schema-dark.svg">
  <img alt="fperm schema" src="./schema-light.svg">
</picture>

As @wxiaoguang said, it doesn't work in Gitea indeed, and only light image is displayed

@ybizeul commented on GitHub (Sep 29, 2025): > According to https://github.com/stefanjudis/github-light-dark-image-example, that hash-based syntax is "deprecated" and the `<picture>` syntax should be preferred. Does it work in Gitea? > > <picture> > <source media="(prefers-color-scheme: dark)" srcset="./dark.svg"> > <img src="./light.svg"> > </picture> > We should still support the GitHub sytnax for compatibility reasons of course. I didn't know about deprecation, well that's too bad but indeed mirroring GitHub behavior is usually a plus. That said, the options listed below in your example page work better as they fall back on light image instead of displaying both, that's a win. So I replaced : ```md ![fperm schema](./schema-dark.svg#gh-dark-mode-only) ![fperm schema](./schema-light.svg#gh-light-mode-only) ``` with: ```html <picture> <source media="(prefers-color-scheme: dark)" srcset="./schema-dark.svg"> <img alt="fperm schema" src="./schema-light.svg"> </picture> ``` As @wxiaoguang said, it doesn't work in Gitea indeed, and only light image is displayed

GiteaMirror commented

2025-11-02 11:27:22 -06:00

@silverwind commented on GitHub (Sep 29, 2025):

Yeah we will need to adapt the markdown sanitizer for that to work. After that, we can also try to support the hash syntax.

@silverwind commented on GitHub (Sep 29, 2025): Yeah we will need to adapt the markdown sanitizer for that to work. After that, we can also try to support the hash syntax.

Sign in to join this conversation.

Branches Tags

1 Participants

Notifications

Due Date

No due date set.

Dependencies

No dependencies set.

Reference: github-starred/gitea#14986