Added dark theme handling

This commit is contained in:
Dan Brown 2022-08-04 14:19:04 +01:00
parent 4757ed9453
commit 9fd7a6abed
No known key found for this signature in database
GPG key ID: 46D9F943C24A2EF9
3 changed files with 45 additions and 2 deletions

23
package-lock.json generated
View file

@ -21,6 +21,7 @@
"@codemirror/language": "^6.2.1",
"@codemirror/legacy-modes": "^6.1.0",
"@codemirror/state": "^6.1.0",
"@codemirror/theme-one-dark": "^6.0.0",
"@codemirror/view": "^6.1.2",
"clipboard": "^2.0.11",
"codemirror": "^6.0.1",
@ -246,6 +247,17 @@
"resolved": "https://registry.npmjs.org/@codemirror/state/-/state-6.1.0.tgz",
"integrity": "sha512-qbUr94DZTe6/V1VS7LDLz11rM/1t/nJxR1El4I6UaxDEdc0aZZvq6JCLJWiRmUf95NRAnDH6fhXn+PWp9wGCIg=="
},
"node_modules/@codemirror/theme-one-dark": {
"version": "6.0.0",
"resolved": "https://registry.npmjs.org/@codemirror/theme-one-dark/-/theme-one-dark-6.0.0.tgz",
"integrity": "sha512-jTCfi1I8QT++3m21Ui6sU8qwu3F/hLv161KLxfvkV1cYWSBwyUanmQFs89ChobQjBHi2x7s2k71wF9WYvE8fdw==",
"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.1.2",
"resolved": "https://registry.npmjs.org/@codemirror/view/-/view-6.1.2.tgz",
@ -2477,6 +2489,17 @@
"resolved": "https://registry.npmjs.org/@codemirror/state/-/state-6.1.0.tgz",
"integrity": "sha512-qbUr94DZTe6/V1VS7LDLz11rM/1t/nJxR1El4I6UaxDEdc0aZZvq6JCLJWiRmUf95NRAnDH6fhXn+PWp9wGCIg=="
},
"@codemirror/theme-one-dark": {
"version": "6.0.0",
"resolved": "https://registry.npmjs.org/@codemirror/theme-one-dark/-/theme-one-dark-6.0.0.tgz",
"integrity": "sha512-jTCfi1I8QT++3m21Ui6sU8qwu3F/hLv161KLxfvkV1cYWSBwyUanmQFs89ChobQjBHi2x7s2k71wF9WYvE8fdw==",
"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.1.2",
"resolved": "https://registry.npmjs.org/@codemirror/view/-/view-6.1.2.tgz",

View file

@ -39,6 +39,7 @@
"@codemirror/language": "^6.2.1",
"@codemirror/legacy-modes": "^6.1.0",
"@codemirror/state": "^6.1.0",
"@codemirror/theme-one-dark": "^6.0.0",
"@codemirror/view": "^6.1.2",
"clipboard": "^2.0.11",
"codemirror": "^6.0.1",

View file

@ -1,18 +1,20 @@
import {getLanguageExtension} from "./languages";
import {getLanguageExtension} from "./languages"
import {Compartment} from "@codemirror/state"
import {EditorView} from "@codemirror/view"
import {oneDark} from "@codemirror/theme-one-dark"
const viewLangCompartments = new WeakMap();
/**
* Create a new editor view.
*
* @param {Object} config
* @param {{parent: Element, doc: String, extensions: Array}} config
* @returns {EditorView}
*/
export function createView(config) {
const langCompartment = new Compartment();
config.extensions.push(langCompartment.of([]));
config.extensions.push(getTheme(config.parent));
const ev = new EditorView(config);
@ -21,6 +23,23 @@ export function createView(config) {
return ev;
}
/**
* Ge the theme extension to use for editor view instance.
* @returns {Extension}
*/
function getTheme(viewParentEl) {
const darkMode = document.documentElement.classList.contains('dark-mode');
const eventData = {
darkMode: darkMode,
theme: null,
};
window.$events.emitPublic(viewParentEl, 'library-cm6::configure-theme', eventData);
return eventData.theme || (darkMode ? oneDark : []);
}
/**
* Set the language mode of an EditorView.
*