Support dark/light theme images in markdown (#36922)

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

---------

Co-authored-by: wxiaoguang <wxiaoguang@gmail.com>
This commit is contained in:
Mykhailo
2026-03-21 13:44:33 +01:00
committed by GitHub
parent 0e0cf7a813
commit ee009ebec8
2 changed files with 21 additions and 0 deletions

View File

@@ -316,6 +316,16 @@ In markup content, we always use bottom margin for all elements */
box-sizing: initial;
}
/* GitHub-style dark/light image switching.
These fragments are kept in the rendered HTML as part of the `src` attribute.
We decide which to show via `data-gitea-theme-dark` on `<html>`, which is
mirrored from `--is-dark-theme` in JS (so it also works with auto/custom themes).
*/
html[data-gitea-theme-dark="true"] .markup img[src*="#gh-light-mode-only"],
html[data-gitea-theme-dark="false"] .markup img[src*="#gh-dark-mode-only"] {
display: none;
}
.file-view.markup {
padding: 1em 2em;
font-size: 16px;