From af901a4ca94603c8a379d2585758d89522430f8d Mon Sep 17 00:00:00 2001
From: ThetaDev <t.testboy@gmail.com>
Date: Thu, 25 Nov 2021 08:14:48 +0100
Subject: [PATCH] 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.
---
docs/content/doc/advanced/customizing-gitea.en-us.md | 3 +++
web_src/js/utils.js | 9 ++-------
web_src/less/themes/theme-arc-green.less | 1 +
3 files changed, 6 insertions(+), 7 deletions(-)
diff --git a/docs/content/doc/advanced/customizing-gitea.en-us.md b/docs/content/doc/advanced/customizing-gitea.en-us.md
index 040dcfd3e..d09701987 100644
--- 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 6310b2cb9..86a64b8b7 100644
--- 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 4b60c9410..3a956e0c7 100644
--- 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;