web/elements: improve codemirror contrast in dark theme
closes #4622 Signed-off-by: Jens Langhammer <jens@goauthentik.io>
This commit is contained in:
parent
ed01a844ef
commit
fd9ce531c9
23
web/package-lock.json
generated
23
web/package-lock.json
generated
|
@ -19,6 +19,7 @@
|
||||||
"@codemirror/lang-python": "^6.1.1",
|
"@codemirror/lang-python": "^6.1.1",
|
||||||
"@codemirror/lang-xml": "^6.0.2",
|
"@codemirror/lang-xml": "^6.0.2",
|
||||||
"@codemirror/legacy-modes": "^6.3.1",
|
"@codemirror/legacy-modes": "^6.3.1",
|
||||||
|
"@codemirror/theme-one-dark": "^6.1.0",
|
||||||
"@formatjs/intl-listformat": "^7.1.7",
|
"@formatjs/intl-listformat": "^7.1.7",
|
||||||
"@fortawesome/fontawesome-free": "^6.2.1",
|
"@fortawesome/fontawesome-free": "^6.2.1",
|
||||||
"@goauthentik/api": "^2023.1.2-1675529778",
|
"@goauthentik/api": "^2023.1.2-1675529778",
|
||||||
|
@ -1847,6 +1848,17 @@
|
||||||
"resolved": "https://registry.npmjs.org/@codemirror/state/-/state-6.1.4.tgz",
|
"resolved": "https://registry.npmjs.org/@codemirror/state/-/state-6.1.4.tgz",
|
||||||
"integrity": "sha512-g+3OJuRylV5qsXuuhrc6Cvs1NQluNioepYMM2fhnpYkNk7NgX+j0AFuevKSVKzTDmDyt9+Puju+zPdHNECzCNQ=="
|
"integrity": "sha512-g+3OJuRylV5qsXuuhrc6Cvs1NQluNioepYMM2fhnpYkNk7NgX+j0AFuevKSVKzTDmDyt9+Puju+zPdHNECzCNQ=="
|
||||||
},
|
},
|
||||||
|
"node_modules/@codemirror/theme-one-dark": {
|
||||||
|
"version": "6.1.0",
|
||||||
|
"resolved": "https://registry.npmjs.org/@codemirror/theme-one-dark/-/theme-one-dark-6.1.0.tgz",
|
||||||
|
"integrity": "sha512-AiTHtFRu8+vWT9wWUWDM+cog6ZwgivJogB1Tm/g40NIpLwph7AnmxrSzWfvJN5fBVufsuwBxecQCNmdcR5D7Aw==",
|
||||||
|
"dependencies": {
|
||||||
|
"@codemirror/language": "^6.0.0",
|
||||||
|
"@codemirror/state": "^6.0.0",
|
||||||
|
"@codemirror/view": "^6.0.0",
|
||||||
|
"@lezer/highlight": "^1.0.0"
|
||||||
|
}
|
||||||
|
},
|
||||||
"node_modules/@codemirror/view": {
|
"node_modules/@codemirror/view": {
|
||||||
"version": "6.5.1",
|
"version": "6.5.1",
|
||||||
"resolved": "https://registry.npmjs.org/@codemirror/view/-/view-6.5.1.tgz",
|
"resolved": "https://registry.npmjs.org/@codemirror/view/-/view-6.5.1.tgz",
|
||||||
|
@ -11370,6 +11382,17 @@
|
||||||
"resolved": "https://registry.npmjs.org/@codemirror/state/-/state-6.1.4.tgz",
|
"resolved": "https://registry.npmjs.org/@codemirror/state/-/state-6.1.4.tgz",
|
||||||
"integrity": "sha512-g+3OJuRylV5qsXuuhrc6Cvs1NQluNioepYMM2fhnpYkNk7NgX+j0AFuevKSVKzTDmDyt9+Puju+zPdHNECzCNQ=="
|
"integrity": "sha512-g+3OJuRylV5qsXuuhrc6Cvs1NQluNioepYMM2fhnpYkNk7NgX+j0AFuevKSVKzTDmDyt9+Puju+zPdHNECzCNQ=="
|
||||||
},
|
},
|
||||||
|
"@codemirror/theme-one-dark": {
|
||||||
|
"version": "6.1.0",
|
||||||
|
"resolved": "https://registry.npmjs.org/@codemirror/theme-one-dark/-/theme-one-dark-6.1.0.tgz",
|
||||||
|
"integrity": "sha512-AiTHtFRu8+vWT9wWUWDM+cog6ZwgivJogB1Tm/g40NIpLwph7AnmxrSzWfvJN5fBVufsuwBxecQCNmdcR5D7Aw==",
|
||||||
|
"requires": {
|
||||||
|
"@codemirror/language": "^6.0.0",
|
||||||
|
"@codemirror/state": "^6.0.0",
|
||||||
|
"@codemirror/view": "^6.0.0",
|
||||||
|
"@lezer/highlight": "^1.0.0"
|
||||||
|
}
|
||||||
|
},
|
||||||
"@codemirror/view": {
|
"@codemirror/view": {
|
||||||
"version": "6.5.1",
|
"version": "6.5.1",
|
||||||
"resolved": "https://registry.npmjs.org/@codemirror/view/-/view-6.5.1.tgz",
|
"resolved": "https://registry.npmjs.org/@codemirror/view/-/view-6.5.1.tgz",
|
||||||
|
|
|
@ -63,6 +63,7 @@
|
||||||
"@codemirror/lang-python": "^6.1.1",
|
"@codemirror/lang-python": "^6.1.1",
|
||||||
"@codemirror/lang-xml": "^6.0.2",
|
"@codemirror/lang-xml": "^6.0.2",
|
||||||
"@codemirror/legacy-modes": "^6.3.1",
|
"@codemirror/legacy-modes": "^6.3.1",
|
||||||
|
"@codemirror/theme-one-dark": "^6.1.0",
|
||||||
"@formatjs/intl-listformat": "^7.1.7",
|
"@formatjs/intl-listformat": "^7.1.7",
|
||||||
"@fortawesome/fontawesome-free": "^6.2.1",
|
"@fortawesome/fontawesome-free": "^6.2.1",
|
||||||
"@goauthentik/api": "^2023.1.2-1675529778",
|
"@goauthentik/api": "^2023.1.2-1675529778",
|
||||||
|
|
|
@ -11,6 +11,7 @@ import {
|
||||||
} from "@codemirror/language";
|
} from "@codemirror/language";
|
||||||
import * as yamlMode from "@codemirror/legacy-modes/mode/yaml";
|
import * as yamlMode from "@codemirror/legacy-modes/mode/yaml";
|
||||||
import { Compartment, EditorState, Extension } from "@codemirror/state";
|
import { Compartment, EditorState, Extension } from "@codemirror/state";
|
||||||
|
import { oneDark } from "@codemirror/theme-one-dark";
|
||||||
import { EditorView, drawSelection, keymap, lineNumbers } from "@codemirror/view";
|
import { EditorView, drawSelection, keymap, lineNumbers } from "@codemirror/view";
|
||||||
import { AKElement } from "@goauthentik/elements/Base";
|
import { AKElement } from "@goauthentik/elements/Base";
|
||||||
import YAML from "yaml";
|
import YAML from "yaml";
|
||||||
|
@ -98,14 +99,7 @@ export class CodeMirrorTextarea<T> extends AKElement {
|
||||||
},
|
},
|
||||||
{ dark: false },
|
{ dark: false },
|
||||||
);
|
);
|
||||||
this.themeDark = EditorView.theme(
|
this.themeDark = oneDark;
|
||||||
{
|
|
||||||
"&": {
|
|
||||||
backgroundColor: "var(--ak-dark-background-light)",
|
|
||||||
},
|
|
||||||
},
|
|
||||||
{ dark: true },
|
|
||||||
);
|
|
||||||
}
|
}
|
||||||
|
|
||||||
private getInnerValue(): string {
|
private getInnerValue(): string {
|
||||||
|
|
Reference in a new issue