mirror of
https://codeberg.org/forgejo/forgejo.git
synced 2024-08-29 22:06:06 +02:00
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.
This commit is contained in:
parent
e0f81b4ef4
commit
af901a4ca9
3 changed files with 6 additions and 7 deletions
|
@ -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:
|
||||
|
|
|
@ -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
|
||||
|
|
|
@ -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;
|
||||
|
|
Loading…
Reference in a new issue