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.
tokarchuk/v1.17
ThetaDev 3 years ago committed by GitHub
parent e0f81b4ef4
commit af901a4ca9
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
  1. 3
      docs/content/doc/advanced/customizing-gitea.en-us.md
  2. 9
      web_src/js/utils.js
  3. 1
      web_src/less/themes/theme-arc-green.less

@ -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). 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 ## Customizing fonts
Fonts can be customized using CSS variables: Fonts can be customized using CSS variables:

@ -26,13 +26,8 @@ export function isObject(obj) {
// returns whether a dark theme is enabled // returns whether a dark theme is enabled
export function isDarkTheme() { export function isDarkTheme() {
if (document.documentElement.classList.contains('theme-auto')) { const style = window.getComputedStyle(document.documentElement);
return window.matchMedia('(prefers-color-scheme: dark)').matches; return style.getPropertyValue('--is-dark-theme').trim().toLowerCase() === 'true';
}
if (document.documentElement.classList.contains('theme-arc-green')) {
return true;
}
return false;
} }
// removes duplicate elements in an array // removes duplicate elements in an array

@ -1,6 +1,7 @@
@import "../chroma/dark.less"; @import "../chroma/dark.less";
:root { :root {
--is-dark-theme: true;
--color-primary: #87ab63; --color-primary: #87ab63;
--color-primary-dark-1: #93b373; --color-primary-dark-1: #93b373;
--color-primary-dark-2: #9fbc82; --color-primary-dark-2: #9fbc82;

Loading…
Cancel
Save