Skip to content

Support dark/light theme images in markdown#36922

Merged
wxiaoguang merged 3 commits intogo-gitea:mainfrom
mykh-hailo:fix/markdown-dark-light-mode
Mar 21, 2026
Merged

Support dark/light theme images in markdown#36922
wxiaoguang merged 3 commits intogo-gitea:mainfrom
mykh-hailo:fix/markdown-dark-light-mode

Conversation

@mykh-hailo
Copy link
Copy Markdown
Contributor

@mykh-hailo mykh-hailo commented Mar 18, 2026 •
edited by delvh
Loading

This PR matches GitHub's behavior more closely on how to render Markdown images in light/dark mode.
Images with source suffix #gh-dark-mode-only / #gh-light-mode-only will only show when the correct theme is requested.
Closes: #35545

@GiteaBot GiteaBot added the lgtm/need 2 This PR needs two approvals by maintainers to be considered for merging. label Mar 18, 2026
@github-actions github-actions bot added modifies/go Pull requests that update Go code modifies/frontend labels Mar 18, 2026
@bircni
Copy link
Copy Markdown
Member

bircni commented Mar 18, 2026

The prefers-color-scheme responds to OS preferences. If a user has Gitea explicitly set to dark mode while their OS is in light mode, #gh-dark-mode-only images will be hidden.

@mykh-hailo
Copy link
Copy Markdown
Contributor Author

mykh-hailo commented Mar 18, 2026

@bircni I updated my code for you comments.
Appreciate for you all kind comments and feedback.

@mykh-hailo
Copy link
Copy Markdown
Contributor Author

mykh-hailo commented Mar 19, 2026

@wxiaoguang can you check my for this issue please?

@wxiaoguang
Copy link
Copy Markdown
Contributor

wxiaoguang commented Mar 19, 2026 •
edited
Loading

  1. it needs tests.
  2. users can have custom themes, so the selector data-theme^="gitea-auto" still doesn't really work.

@wxiaoguang
Copy link
Copy Markdown
Contributor

wxiaoguang commented Mar 19, 2026

One of the feasible approaches is "calling isDarkTheme() in JS and add some class/attribute to the HTML body, then use it as selector", and you also need to watch the change of "prefers-color-scheme".

@wxiaoguang wxiaoguang marked this pull request as draft March 19, 2026 11:11
@wxiaoguang
Copy link
Copy Markdown
Contributor

wxiaoguang commented Mar 19, 2026

By the way, this PR is unnecessarily complex.

You can simply allow the media attribute, and also make #gh-dark-mode-only work.

I don't understand why you need to do these: extract the "picture" node / parse the attributes / transform to other layouts.

@mykh-hailo
Copy link
Copy Markdown
Contributor Author

mykh-hailo commented Mar 19, 2026

@wxiaoguang My approach works like this:

The <picture> element chooses which image source to use based on the prefers-color-scheme media query.
To make it follow a selected theme (instead of the system theme), I update the prefers-color-scheme condition so it matches the theme I want to use.
For example, I modify the media attribute to include both (prefers-color-scheme: dark) and (prefers-color-scheme: light), depending on the selected theme. This ensures the correct image source is chosen for that specific theme—similar to how GitHub handles it.

@wxiaoguang
Copy link
Copy Markdown
Contributor

wxiaoguang commented Mar 19, 2026

I think we shouldn't touch picture transforming. The syntax is very complex https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/picture. We never supported that, so no need to introduce a new support for it.

The only thing need to do is to support #gh-....-mode-only correctly at the moment.

@mykh-hailo mykh-hailo force-pushed the fix/markdown-dark-light-mode branch from 93bd290 to 5217897 Compare March 19, 2026 22:47
@github-actions github-actions bot removed the modifies/go Pull requests that update Go code label Mar 19, 2026
@mykh-hailo mykh-hailo force-pushed the fix/markdown-dark-light-mode branch from 5217897 to 1b5c9f6 Compare March 19, 2026 22:52
@mykh-hailo
Copy link
Copy Markdown
Contributor Author

mykh-hailo commented Mar 19, 2026

@wxiaoguang thank you for the quick update.
I updated my code for your comments.
Could you possibly review it please?
Thank you?

@mykh-hailo mykh-hailo marked this pull request as ready for review March 19, 2026 22:57
@wxiaoguang
Copy link
Copy Markdown
Contributor

wxiaoguang commented Mar 19, 2026

I think it can be like this e1156fe

@mykh-hailo
Copy link
Copy Markdown
Contributor Author

mykh-hailo commented Mar 20, 2026

@wxiaoguang I'd appreciate it if you can give me the ETA for the merge please.
Thank you.

@wxiaoguang
Copy link
Copy Markdown
Contributor

wxiaoguang commented Mar 20, 2026

Wait for 2 maintainer's approvals.

By the way, please update the PR's description

@GiteaBot GiteaBot added lgtm/need 1 This PR needs approval from one additional maintainer to be merged. and removed lgtm/need 2 This PR needs two approvals by maintainers to be considered for merging. labels Mar 20, 2026
@lunny lunny added the type/enhancement An improvement of existing functionality label Mar 20, 2026
@GiteaBot GiteaBot added lgtm/done This PR has enough approvals to get merged. There are no important open reservations anymore. and removed lgtm/need 1 This PR needs approval from one additional maintainer to be merged. labels Mar 21, 2026
@delvh delvh changed the title Fix: Update markdown image for dark/light mode Do not show lightmode markdown image in dark mode and vice-versa Mar 21, 2026
@delvh delvh changed the title Do not show lightmode markdown image in dark mode and vice-versa Allow for darkmode-only markdown images Mar 21, 2026
@wxiaoguang
Copy link
Copy Markdown
Contributor

wxiaoguang commented Mar 21, 2026

I think the title can be "Make images support dark/light theme in markdown"

@delvh delvh changed the title Allow for darkmode-only markdown images Support dark/light theme images in markdown Mar 21, 2026
@delvh
Copy link
Copy Markdown
Member

delvh commented Mar 21, 2026

Changed

@wxiaoguang wxiaoguang enabled auto-merge (squash) March 21, 2026 12:43
@wxiaoguang wxiaoguang merged commit ee009eb into go-gitea:main Mar 21, 2026
26 checks passed
@GiteaBot GiteaBot added this to the 1.26.0 milestone Mar 21, 2026
@lunny lunny mentioned this pull request Mar 21, 2026
Closed
zjjhot added a commit to zjjhot/gitea that referenced this pull request Mar 23, 2026
@zjjhot
Merge remote-tracking branch 'giteaofficial/main'
7fee992 
* giteaofficial/main:
  Add user badges (go-gitea#36752)
  Apply as maintainer (go-gitea#36947)
  Refactor storage content-type handling of ServeDirectURL (go-gitea#36804)
  Add summary to action runs view (go-gitea#36883)
  feat: Add configurable permissions for Actions automatic tokens (go-gitea#36173)
  Feature: Add button to re-run failed jobs in Actions (go-gitea#36924)
  Support dark/light theme images in markdown (go-gitea#36922)
  fix go-gitea#36463: preserve sort order of exclusive labels from template repo (go-gitea#36931)
  fix(upgrade.sh): use HTTPS for GPG key import and restore SELinux context after upgrade (go-gitea#36930)
  [skip ci] Updated translations via Crowdin
  Make container registry support Apple Container (basic auth) (go-gitea#36920)
  Fix various trivial problems (go-gitea#36921)
silverwind added a commit to silverwind/gitea that referenced this pull request Mar 23, 2026
@silverwind
Merge remote-tracking branch 'origin/main' into vite
8bbb950 
* origin/main:
  Update to eslint 10 (go-gitea#36925)
  Add user badges (go-gitea#36752)
  Apply as maintainer (go-gitea#36947)
  Refactor storage content-type handling of ServeDirectURL (go-gitea#36804)
  Add summary to action runs view (go-gitea#36883)
  feat: Add configurable permissions for Actions automatic tokens (go-gitea#36173)
  Feature: Add button to re-run failed jobs in Actions (go-gitea#36924)
  Support dark/light theme images in markdown (go-gitea#36922)
  fix go-gitea#36463: preserve sort order of exclusive labels from template repo (go-gitea#36931)
  fix(upgrade.sh): use HTTPS for GPG key import and restore SELinux context after upgrade (go-gitea#36930)
  [skip ci] Updated translations via Crowdin
  Make container registry support Apple Container (basic auth) (go-gitea#36920)
  Fix various trivial problems (go-gitea#36921)
  [skip ci] Updated translations via Crowdin

# Conflicts:
#	package.json
#	pnpm-lock.yaml
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Reviewers

@wxiaoguang wxiaoguang wxiaoguang approved these changes

@delvh delvh delvh approved these changes

Assignees

No one assigned

Labels

lgtm/done This PR has enough approvals to get merged. There are no important open reservations anymore. modifies/frontend type/enhancement An improvement of existing functionality

Projects

None yet

Milestone

1.26.0

Development

Successfully merging this pull request may close these issues.

Support for dark mode alternate images in markdown

6 participants

@mykh-hailo @bircni @wxiaoguang @delvh @lunny @GiteaBot