diff options
| author | ThetaDev <t.testboy@gmail.com> | 2021-11-25 08:14:48 +0100 |
|---|---|---|
| committer | GitHub <noreply@github.com> | 2021-11-25 15:14:48 +0800 |
| commit | af901a4ca94603c8a379d2585758d89522430f8d (patch) | |
| tree | e3e6c5d19b9b70a69251a804da01f46004eb2ae1 /web_src | |
| parent | e0f81b4ef445948d33abcd5c67b6d0786b07de68 (diff) | |
| download | gitea-af901a4ca94603c8a379d2585758d89522430f8d.tar.gz gitea-af901a4ca94603c8a379d2585758d89522430f8d.zip | |
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.
Diffstat (limited to 'web_src')
| -rw-r--r-- | web_src/js/utils.js | 9 | ||||
| -rw-r--r-- | web_src/less/themes/theme-arc-green.less | 1 |
2 files changed, 3 insertions, 7 deletions
diff --git a/web_src/js/utils.js b/web_src/js/utils.js index 6310b2cb99..86a64b8b75 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 4b60c9410f..3a956e0c78 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; |