Fix csl editor style in dark theme (#3702)
This commit is contained in:
parent
5940b63908
commit
294835b995
4 changed files with 10 additions and 4 deletions
|
@ -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'
|
||||
});
|
||||
|
|
|
@ -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'
|
||||
|
|
|
@ -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>`;
|
||||
|
|
|
@ -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"/>
|
||||
|
|
Loading…
Add table
Reference in a new issue