Fix csl editor style in dark theme (#3702)

This commit is contained in:
windingwind 2024-02-19 16:35:57 +08:00 committed by GitHub
parent 5940b63908
commit 294835b995
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
4 changed files with 10 additions and 4 deletions

View file

@ -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'
});

View file

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

View file

@ -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>`;

View file

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