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.

diff --git a/docs/content/doc/advanced/customizing-gitea.en-us.md b/docs/content/doc/advanced/customizing-gitea.en-us.md
index 040dcfd3e85b09654476828f811c9c911d9f5ed1..d097019870028394061605525b95ef094f218cbb 100644 (file)
--- a/docs/content/doc/advanced/customizing-gitea.en-us.md
+++ b/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:

diff --git a/web_src/js/utils.js b/web_src/js/utils.js
index 6310b2cb9984c06da5a59aae46f140ee2f382d4e..86a64b8b75474f8d61099e07ba3f8dd7bdeba1a3 100644 (file)
--- a/web_src/js/utils.js
+++ b/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

diff --git a/web_src/less/themes/theme-arc-green.less b/web_src/less/themes/theme-arc-green.less
index 4b60c9410fe16dc1482efc6b1e16048bc84594c3..3a956e0c78e10fb69ccca67ca13eb304a7acf882 100644 (file)
--- a/web_src/less/themes/theme-arc-green.less
+++ b/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;