Detect dark theme via css variable (#17800) * detect dark theme via css variable * minor refactor, add documentation If your custom theme is considered a dark theme, set the global css variable `--is-dark-theme` to `true`. This allows gitea to adjust the Monaco code editor's theme accordingly.

Changes

3 changed files (+6/-7)

• docs/content/doc/advanced/customizing-gitea.en-us.md
  • @@ -337,6 +337,9 @@ Community themes are listed in [gitea/awesome-gitea#themes](https://gitea.com/gi
    The `arc-green` theme source can be found [here](https://github.com/go-gitea/gitea/blob/main/web_src/less/themes/theme-arc-green.less). + If your custom theme is considered a dark theme, set the global css variable `--is-dark-theme` to `true`. + This allows gitea to adjust the Monaco code editor's theme accordingly. + ## Customizing fonts Fonts can be customized using CSS variables:
• web_src/js/utils.js
  • @@ -26,13 +26,8 @@ export function isObject(obj) {
    // returns whether a dark theme is enabled export function isDarkTheme() { - if (document.documentElement.classList.contains('theme-auto')) { - return window.matchMedia('(prefers-color-scheme: dark)').matches; - } - if (document.documentElement.classList.contains('theme-arc-green')) { - return true; - } - return false; + const style = window.getComputedStyle(document.documentElement); + return style.getPropertyValue('--is-dark-theme').trim().toLowerCase() === 'true'; } // removes duplicate elements in an array
• web_src/less/themes/theme-arc-green.less
  • @@ -1,6 +1,7 @@
    @import "../chroma/dark.less"; :root { + --is-dark-theme: true; --color-primary: #87ab63; --color-primary-dark-1: #93b373; --color-primary-dark-2: #9fbc82;