Mirrors/gitea
0
0
Fork 0
mirror of https://github.com/go-gitea/gitea.git synced 2026-05-21 23:53:36 +02:00
Code Issues Activity

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

Browse Source 
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
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
2 changed files with 21 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
web_src/css/markup/content.css
View File

@ -316,6 +316,16 @@ In markup content, we always use bottom margin for all elements */
box-sizing: initial; 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 { .file-view.markup {
padding: 1em 2em; padding: 1em 2em;
font-size: 16px; font-size: 16px;

11
web_src/js/webcomponents/index.ts
View File

@ -2,3 +2,14 @@ import './polyfills.ts';
import './relative-time.ts'; import './relative-time.ts';
import './origin-url.ts'; import './origin-url.ts';
import './overflow-menu.ts'; import './overflow-menu.ts';
import {isDarkTheme} from '../utils.ts';
function initPageThemeDarkLight() {
// Set page's theme color preference as early as possible, to avoid flicker of wrong theme color during page load.
const sync = () => document.documentElement.setAttribute('data-gitea-theme-dark', String(isDarkTheme()));
sync();
// Track system theme changes in case Gitea is using "auto" theme.
window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', sync);
}
initPageThemeDarkLight();