Fix: Update markdown image for dark/light mode

mykh-hailo · mykh-hailo · commit 1b5c9f66cc75 · 2026-03-19T18:52:35.000-04:00
diff --git a/web_src/css/markup/content.css b/web_src/css/markup/content.css
@@ -316,6 +316,26 @@ 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 set to show via `data-gitea-theme` on `<html>`, which is
+   mirrored from `--is-dark-theme` in JS (so it also works with custom themes).
+*/
+.markup img[src*="#gh-dark-mode-only"],
+.markup img[src*="#gh-light-mode-only"] {
+  display: none;
+}
+
+html[data-gitea-theme="dark"] .markup img[src*="#gh-dark-mode-only"] {
+  display: inline;
+}
+
+html[data-gitea-theme="light"] .markup img[src*="#gh-light-mode-only"] {
+  display: inline;
+}
+
+/* `data-gitea-theme` is managed by JS using `isDarkTheme()` (respects explicit theme + auto). */
+
 .file-view.markup {
   padding: 1em 2em;
   font-size: 16px;
diff --git a/web_src/js/features/common-page.ts b/web_src/js/features/common-page.ts
@@ -3,6 +3,7 @@ import {showGlobalErrorMessage} from '../bootstrap.ts';
 import {fomanticQuery} from '../modules/fomantic/base.ts';
 import {addDelegatedEventListener, queryElems} from '../utils/dom.ts';
 import {registerGlobalInitFunc, registerGlobalSelectorFunc} from '../modules/observer.ts';
+import {isDarkTheme} from '../utils.ts';
 import {initAvatarUploaderWithCropper} from './comp/Cropper.ts';
 import {initCompSearchRepoBox} from './comp/SearchRepoBox.ts';
 
@@ -45,10 +46,27 @@ function initFooterThemeSelector() {
   });
 }
 
+function initMarkdownDarkLightImages() {
+  // Mirror Gitea's current "darkness" into a dataset so markup/CSS can
+  // switch `#gh-dark-mode-only` / `#gh-light-mode-only` images correctly
+  // for both explicit themes and "auto" themes.
+  const root = document.documentElement;
+  const sync = () => {
+    root.setAttribute('data-gitea-theme', isDarkTheme() ? 'dark' : 'light');
+  };
+  sync();
+
+  // Track system theme changes in case Gitea is set to "auto".
+  const mql = window.matchMedia('(prefers-color-scheme: dark)');
+  const onChange = () => sync();
+  mql.addEventListener('change', onChange);
+}
+
 export function initCommmPageComponents() {
   initHeadNavbarContentToggle();
   initFooterLanguageMenu();
   initFooterThemeSelector();
+  initMarkdownDarkLightImages();
 }
 
 export function initGlobalDropdown() {
