diff --git a/web_src/css/markup/content.css b/web_src/css/markup/content.css index 34e7de8c47c..047b03fa19a 100644 --- a/web_src/css/markup/content.css +++ b/web_src/css/markup/content.css @@ -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 ``, 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; diff --git a/web_src/js/webcomponents/index.ts b/web_src/js/webcomponents/index.ts index f2d725814d7..2493f56ac99 100644 --- a/web_src/js/webcomponents/index.ts +++ b/web_src/js/webcomponents/index.ts @@ -2,3 +2,14 @@ import './polyfills.ts'; import './relative-time.ts'; import './origin-url.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();