From 294835b995b0514ae92f2fbc8452d88417a7eaf4 Mon Sep 17 00:00:00 2001
From: windingwind <33902321+windingwind@users.noreply.github.com>
Date: Mon, 19 Feb 2024 16:35:57 +0800
Subject: [PATCH] Fix csl editor style in dark theme (#3702)

---
 chrome/content/zotero/ace/aceWrapper.js   | 2 +-
 chrome/content/zotero/runJS.js            | 2 +-
 chrome/content/zotero/tools/csledit.js    | 9 ++++++++-
 chrome/content/zotero/tools/csledit.xhtml | 1 -
 4 files changed, 10 insertions(+), 4 deletions(-)

diff --git a/chrome/content/zotero/ace/aceWrapper.js b/chrome/content/zotero/ace/aceWrapper.js
index f30b1af3e4..3a58912771 100644
--- a/chrome/content/zotero/ace/aceWrapper.js
+++ b/chrome/content/zotero/ace/aceWrapper.js
@@ -38,7 +38,7 @@ window.addEventListener("DOMContentLoaded", function(e) {
 	TextMode = require("ace/mode/text").Mode;
 	EditSession = require("ace/edit_session").EditSession;
 	
-	const isDark = Zotero.getMainWindow()?.matchMedia('(prefers-color-scheme: dark)').matches;
+	const isDark = window.matchMedia('(prefers-color-scheme: dark)').matches;
 	editor = ace.edit('ace-div', {
 		theme: isDark ? 'ace/theme/monokai' : 'ace/theme/chrome'
 	});
diff --git a/chrome/content/zotero/runJS.js b/chrome/content/zotero/runJS.js
index 23c81935a3..2681b493c3 100644
--- a/chrome/content/zotero/runJS.js
+++ b/chrome/content/zotero/runJS.js
@@ -98,7 +98,7 @@ window.addEventListener("load", function (e) {
 	codeEditor.on('input', handleInput);
 	codeEditor.focus();
 	
-	const isDarkMQL = Zotero.getMainWindow()?.matchMedia('(prefers-color-scheme: dark)');
+	const isDarkMQL = window.matchMedia('(prefers-color-scheme: dark)');
 	isDarkMQL.addEventListener("change", (ev) => {
 		codeEditor.setOptions({
 			theme: ev.matches ? 'ace/theme/monokai' : 'ace/theme/chrome'
diff --git a/chrome/content/zotero/tools/csledit.js b/chrome/content/zotero/tools/csledit.js
index 4b846c76e4..5f4322f3d1 100644
--- a/chrome/content/zotero/tools/csledit.js
+++ b/chrome/content/zotero/tools/csledit.js
@@ -34,7 +34,7 @@ var Zotero_CSL_Editor = new function () {
 	async function init() {
 		await Zotero.Schema.schemaUpdatePromise;
 
-		const isDarkMQL = Zotero.getMainWindow()?.matchMedia('(prefers-color-scheme: dark)');
+		const isDarkMQL = window.matchMedia('(prefers-color-scheme: dark)');
 		
 		Zotero.Styles.populateLocaleList(document.getElementById("locale-menu"));
 		
@@ -83,6 +83,7 @@ var Zotero_CSL_Editor = new function () {
 
 		isDarkMQL.addEventListener("change", (ev) => {
 			monaco.editor.setTheme(ev.matches ? 'vs-dark' : 'vs-light');
+			this.refresh();
 		});
 	}
 	
@@ -266,11 +267,17 @@ var Zotero_CSL_Editor = new function () {
 	};
 
 	this.updateIframe = function (content, containerClass = 'preview') {
+		const isDarkMode = window.matchMedia('(prefers-color-scheme: dark)').matches;
 		let iframe = document.getElementById('zotero-csl-preview-box');
 		iframe.contentDocument.documentElement.innerHTML = `<html>
 		<head>
 			<title></title>
 			<link rel="stylesheet" href="chrome://zotero-platform/content/zotero.css">
+			<style>
+				html {
+					color-scheme: ${isDarkMode ? "dark" : "light"};
+				}
+			</style>
 		</head>
 		<body id="csl-edit-preview"><div class="${containerClass}">${content}</div></body>
 		</html>`;
diff --git a/chrome/content/zotero/tools/csledit.xhtml b/chrome/content/zotero/tools/csledit.xhtml
index ce99dc8c4c..63fc23662d 100644
--- a/chrome/content/zotero/tools/csledit.xhtml
+++ b/chrome/content/zotero/tools/csledit.xhtml
@@ -37,7 +37,6 @@
 	xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"
 	xmlns:html="http://www.w3.org/1999/xhtml"
 	onload="Zotero_CSL_Editor.init();"
-	onunload="Zotero_CSL_Editor.onUnload()"
 	title="&styles.editor;">
 	
 	<script src="chrome://zotero/content/include.js"/>