habsi/authentik
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

web/elements: improve codemirror contrast in dark theme

Browse Source 
closes #4622

Signed-off-by: Jens Langhammer <jens@goauthentik.io>
This commit is contained in:
Jens Langhammer
2023-02-06 11:37:11 +01:00
parent ed01a844ef
commit fd9ce531c9
3 changed files with 26 additions and 8 deletions
Download Patch File Download Diff File Expand all files Collapse all files

23
web/package-lock.json generated
View File

@ -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",

1
web/package.json
View File

@ -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",

10
web/src/elements/CodeMirror.ts
View File

@ -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 {