From fd9ce531c93ced87905dd605a2312d489685535a Mon Sep 17 00:00:00 2001 From: Jens Langhammer Date: Mon, 6 Feb 2023 11:37:11 +0100 Subject: [PATCH] web/elements: improve codemirror contrast in dark theme closes #4622 Signed-off-by: Jens Langhammer --- web/package-lock.json | 23 +++++++++++++++++++++++ web/package.json | 1 + web/src/elements/CodeMirror.ts | 10 ++-------- 3 files changed, 26 insertions(+), 8 deletions(-) diff --git a/web/package-lock.json b/web/package-lock.json index 9e000bc22..66d33fe1b 100644 --- a/web/package-lock.json +++ b/web/package-lock.json @@ -19,6 +19,7 @@ "@codemirror/lang-python": "^6.1.1", "@codemirror/lang-xml": "^6.0.2", "@codemirror/legacy-modes": "^6.3.1", + "@codemirror/theme-one-dark": "^6.1.0", "@formatjs/intl-listformat": "^7.1.7", "@fortawesome/fontawesome-free": "^6.2.1", "@goauthentik/api": "^2023.1.2-1675529778", @@ -1847,6 +1848,17 @@ "resolved": "https://registry.npmjs.org/@codemirror/state/-/state-6.1.4.tgz", "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": { "version": "6.5.1", "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", "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": { "version": "6.5.1", "resolved": "https://registry.npmjs.org/@codemirror/view/-/view-6.5.1.tgz", diff --git a/web/package.json b/web/package.json index 89acaecf1..29dc75f11 100644 --- a/web/package.json +++ b/web/package.json @@ -63,6 +63,7 @@ "@codemirror/lang-python": "^6.1.1", "@codemirror/lang-xml": "^6.0.2", "@codemirror/legacy-modes": "^6.3.1", + "@codemirror/theme-one-dark": "^6.1.0", "@formatjs/intl-listformat": "^7.1.7", "@fortawesome/fontawesome-free": "^6.2.1", "@goauthentik/api": "^2023.1.2-1675529778", diff --git a/web/src/elements/CodeMirror.ts b/web/src/elements/CodeMirror.ts index 0cf551dfb..3e9ab4cdc 100644 --- a/web/src/elements/CodeMirror.ts +++ b/web/src/elements/CodeMirror.ts @@ -11,6 +11,7 @@ import { } from "@codemirror/language"; import * as yamlMode from "@codemirror/legacy-modes/mode/yaml"; import { Compartment, EditorState, Extension } from "@codemirror/state"; +import { oneDark } from "@codemirror/theme-one-dark"; import { EditorView, drawSelection, keymap, lineNumbers } from "@codemirror/view"; import { AKElement } from "@goauthentik/elements/Base"; import YAML from "yaml"; @@ -98,14 +99,7 @@ export class CodeMirrorTextarea extends AKElement { }, { dark: false }, ); - this.themeDark = EditorView.theme( - { - "&": { - backgroundColor: "var(--ak-dark-background-light)", - }, - }, - { dark: true }, - ); + this.themeDark = oneDark; } private getInnerValue(): string {