From c514f92f9b07b94dca908c9760d5c679d2659d07 Mon Sep 17 00:00:00 2001 From: Tom Najdek Date: Mon, 15 Jan 2024 16:44:16 +0100 Subject: [PATCH] Update csl editor theme based on system color scheme --- chrome/content/zotero/tools/csledit.js | 8 +++++++- 1 file changed, 7 insertions(+), 1 deletion(-) diff --git a/chrome/content/zotero/tools/csledit.js b/chrome/content/zotero/tools/csledit.js index 5cbe4279f8..d44ebb773f 100644 --- a/chrome/content/zotero/tools/csledit.js +++ b/chrome/content/zotero/tools/csledit.js @@ -33,6 +33,8 @@ var Zotero_CSL_Editor = new function() { async function init() { await Zotero.Schema.schemaUpdatePromise; + + const isDarkMQL = Zotero.getMainWindow()?.matchMedia('(prefers-color-scheme: dark)'); Zotero.Styles.populateLocaleList(document.getElementById("locale-menu")); @@ -65,7 +67,7 @@ var Zotero_CSL_Editor = new function() { let editorWin = document.getElementById("zotero-csl-editor-iframe").contentWindow; let { monaco: _monaco, editor: _editor } = await editorWin.loadMonaco({ language: 'xml', - theme: 'vs-light' + theme: isDarkMQL.matches ? 'vs-dark' : 'vs-light' }); monaco = _monaco; editor = _editor; @@ -78,6 +80,10 @@ var Zotero_CSL_Editor = new function() { // Call asynchronously, see note in Zotero.Styles window.setTimeout(this.onStyleSelected.bind(this, currentStyle.styleID), 1); } + + isDarkMQL.addEventListener("change", (ev) => { + monaco.editor.setTheme(ev.matches ? 'vs-dark' : 'vs-light'); + }); } this.onStyleSelected = function(styleID) {