Fix: Update markdown image for dark/light mode

[mykh-hailo]

Description

This PR improves how Gitea renders Markdown images for dark/light mode to match GitHub behavior more closely.

Closes: #35545

Markdown image dark/light switching

• Enhanced the Markdown HTML sanitizer to allow GitHub’s / elements and required attributes (media, srcset).

• Updated the Markdown post-processing so that:

  • The fallback inside remains a direct child (so browsers correctly apply <source media="(prefers-color-scheme: ...)" ...> selection).

  • <source srcset="..."> URLs are rewritten/resolved consistently with how <img src="..."> URLs are handled.

CSS behavior

Added the prefers-color-scheme rules for #gh-dark-mode-only / #gh-light-mode-only so the correct image is shown automatically in dark vs light mode.

[bircni]

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]

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

[mykh-hailo]

@wxiaoguang can you check my for this issue please?

[wxiaoguang]

1. it needs tests.
2. users can have custom themes, so the selector data-theme^="gitea-auto" still doesn't really work.
   • https://docs.gitea.com/administration/customizing-gitea?_highlight=custom&_highlight=theme#customizing-the-look-of-gitea

[wxiaoguang]

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]

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]

@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]

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]

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

[wxiaoguang]

I think it can be like this e1156fe

[mykh-hailo]

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

[wxiaoguang]

Wait for 2 maintainer's approvals.

By the way, please update the PR's description