added option "apply the system theme when formatting a page in the annotation editor"

Former-commit-id: f20fbf7076f54d880e648fd9cdd8540e6fa478a5

_locales/de/messages.json

@@ -367,6 +367,10 @@
 		"message": "Speicherung der Seiten im Hintergrund",
 		"description": "Options page label: 'save pages in background'"
 	},
+	"optionApplySystemTheme": {
+		"message": "apply the system theme when formatting a page in the annotation editor",
+		"description": "Title of the button 'apply the system theme when formatting a page in the annotation editor"
+	},
 	"optionDisplayStats": {
 		"message": "Statistik nach Verarbeitung in der Konsole anzeigen",
 		"description": "Options page label: 'display stats in the console after processing'"

_locales/en/messages.json

@@ -367,6 +367,10 @@
 		"message": "save pages in background",
 		"description": "Options page label: 'save pages in background'"
 	},
+	"optionApplySystemTheme": {
+		"message": "apply the system theme when formatting a page in the annotation editor",
+		"description": "Title of the button 'apply the system theme when formatting a page in the annotation editor"
+	},
 	"optionDisplayStats": {
 		"message": "display stats in the console after processing",
 		"description": "Options page label: 'display stats in the console after processing'"

_locales/es/messages.json

@@ -367,6 +367,10 @@
 		"message": "guardar páginas en segundo plano",
 		"description": "Options page label: 'save pages in background'"
 	},
+	"optionApplySystemTheme": {
+		"message": "apply the system theme when formatting a page in the annotation editor",
+		"description": "Title of the button 'apply the system theme when formatting a page in the annotation editor"
+	},
 	"optionDisplayStats": {
 		"message": "mostrar estadísticas en la consola tras el procesado",
 		"description": "Options page label: 'display stats in the console after processing'"

_locales/fr/messages.json

@@ -367,6 +367,10 @@
 		"message": "sauvegarder la page en tâche de fond",
 		"description": "Options page label: 'save pages in background'"
 	},
+	"optionApplySystemTheme": {
+		"message": "appliquer le thème système lors du formattage d'une page dans l'éditeur  d'annotations",
+		"description": "Title of the button 'apply the system theme when formatting a page in the annotation editor"
+	},
 	"optionDisplayStats": {
 		"message": "afficher les statistiques dans la console après la sauvegarde",
 		"description": "Options page label: 'display stats in the console after processing'"

_locales/ja/messages.json

@@ -367,6 +367,10 @@
 		"message": "バックグラウンドでページを保存する",
 		"description": "Options page label: 'save pages in background'"
 	},
+	"optionApplySystemTheme": {
+		"message": "apply the system theme when formatting a page in the annotation editor",
+		"description": "Title of the button 'apply the system theme when formatting a page in the annotation editor"
+	},
 	"optionDisplayStats": {
 		"message": "処理後、コンソールに統計情報を表示する",
 		"description": "Options page label: 'display stats in the console after processing'"

_locales/pl/messages.json

@@ -367,6 +367,10 @@
 		"message": "zapisuj strony w tle",
 		"description": "Options page label: 'save pages in background'"
 	},
+	"optionApplySystemTheme": {
+		"message": "apply the system theme when formatting a page in the annotation editor",
+		"description": "Title of the button 'apply the system theme when formatting a page in the annotation editor"
+	},
 	"optionDisplayStats": {
 		"message": "wyświetlaj statystyki w konsoli po przetworzeniu",
 		"description": "Options page label: 'display stats in the console after processing'"

_locales/ru/messages.json

@@ -367,6 +367,10 @@
 		"message": "сохранять страницы в фоновом режиме",
 		"description": "Options page label: 'save pages in background'"
 	},
+	"optionApplySystemTheme": {
+		"message": "apply the system theme when formatting a page in the annotation editor",
+		"description": "Title of the button 'apply the system theme when formatting a page in the annotation editor"
+	},
 	"optionDisplayStats": {
 		"message": "показывать статистику в консоли после обработки",
 		"description": "Options page label: 'display stats in the console after processing'"

_locales/uk/messages.json

@@ -367,6 +367,10 @@
 		"message": "зберігати сторінки у фоновому режимі",
 		"description": "Options page label: 'save pages in background'"
 	},
+	"optionApplySystemTheme": {
+		"message": "apply the system theme when formatting a page in the annotation editor",
+		"description": "Title of the button 'apply the system theme when formatting a page in the annotation editor"
+	},
 	"optionDisplayStats": {
 		"message": "відображати статистику в консолі після обробки",
 		"description": "Options page label: 'display stats in the console after processing'"

_locales/zh_CN/messages.json

@@ -367,6 +367,10 @@
 		"message": "在后台保存页面",
 		"description": "Options page label: 'save pages in background'"
 	},
+	"optionApplySystemTheme": {
+		"message": "apply the system theme when formatting a page in the annotation editor",
+		"description": "Title of the button 'apply the system theme when formatting a page in the annotation editor"
+	},
 	"optionDisplayStats": {
 		"message": "处理完成后在控制台中显示统计数据",
 		"description": "Options page label: 'display stats in the console after processing'"

_locales/zh_TW/messages.json

@@ -367,6 +367,10 @@
 		"message": "在後臺保存頁面",
 		"description": "選項頁標籤: '在後臺保存頁面'"
 	},
+	"optionApplySystemTheme": {
+		"message": "apply the system theme when formatting a page in the annotation editor",
+		"description": "Title of the button 'apply the system theme when formatting a page in the annotation editor"
+	},
 	"optionDisplayStats": {
 		"message": "處理後在控制檯消息中顯示統計",
 		"description": "選項頁標籤: '處理後在控制檯消息中顯示統計'"

extension/core/bg/config.js

@@ -66,6 +66,7 @@ singlefile.extension.core.bg.config = (() => {
 		displayInfobar: true,
 		displayStats: false,
 		backgroundSave: true,
+		applySystemTheme: true,
 		autoSaveDelay: 1,
 		autoSaveLoad: false,
 		autoSaveUnload: false,

extension/core/bg/downloads.js

@@ -111,7 +111,8 @@ singlefile.extension.core.bg.downloads = (() => {
 					filenameReplacementCharacter: message.filenameReplacementCharacter,
 					compressHTML: message.compressHTML,
 					bookmarkId: message.bookmarkId,
-					replaceBookmarkURL: message.replaceBookmarkURL
+					replaceBookmarkURL: message.replaceBookmarkURL,
+					applySystemTheme: message.applySystemTheme
 				});
 			} else {
 				if (message.saveToClipboard) {

extension/core/content/content-download.js

@@ -55,7 +55,8 @@ this.singlefile.extension.core.content.download = this.singlefile.extension.core
 					compressHTML: options.compressHTML,
 					backgroundSave: options.backgroundSave,
 					bookmarkId: options.bookmarkId,
-					replaceBookmarkURL: options.replaceBookmarkURL
+					replaceBookmarkURL: options.replaceBookmarkURL,
+					applySystemTheme: options.applySystemTheme
 				};
 				message.truncated = pageData.content.length > MAX_CONTENT_SIZE;
 				if (message.truncated) {

extension/ui/bg/ui-editor.js

@@ -148,7 +148,7 @@ singlefile.extension.ui.bg.editor = (() => {
 	formatPageButton.onclick = () => {
 		if (formatPageButton.classList.contains("format-disabled")) {
 			formatPageButton.classList.remove("format-disabled");
-			editorElement.contentWindow.postMessage(JSON.stringify({ method: "formatPage" }), "*");
+			editorElement.contentWindow.postMessage(JSON.stringify({ method: tabData.options.applySystemTheme ? "formatPage" : "formatPageNoTheme" }), "*");
 		}
 	};
 	cutPageButton.onclick = () => {

extension/ui/bg/ui-options.js

@@ -57,6 +57,7 @@
 	const displayInfobarLabel = document.getElementById("displayInfobarLabel");
 	const displayStatsLabel = document.getElementById("displayStatsLabel");
 	const backgroundSaveLabel = document.getElementById("backgroundSaveLabel");
+	const applySystemThemeLabel = document.getElementById("applySystemThemeLabel");
 	const autoSaveDelayLabel = document.getElementById("autoSaveDelayLabel");
 	const autoSaveLoadLabel = document.getElementById("autoSaveLoadLabel");
 	const autoSaveUnloadLabel = document.getElementById("autoSaveUnloadLabel");
@@ -127,6 +128,7 @@
 	const displayInfobarInput = document.getElementById("displayInfobarInput");
 	const displayStatsInput = document.getElementById("displayStatsInput");
 	const backgroundSaveInput = document.getElementById("backgroundSaveInput");
+	const applySystemThemeInput = document.getElementById("applySystemThemeInput");
 	const autoSaveDelayInput = document.getElementById("autoSaveDelayInput");
 	const autoSaveLoadInput = document.getElementById("autoSaveLoadInput");
 	const autoSaveUnloadInput = document.getElementById("autoSaveUnloadInput");
@@ -447,6 +449,7 @@
 	displayInfobarLabel.textContent = browser.i18n.getMessage("optionDisplayInfobar");
 	displayStatsLabel.textContent = browser.i18n.getMessage("optionDisplayStats");
 	backgroundSaveLabel.textContent = browser.i18n.getMessage("optionBackgroundSave");
+	applySystemThemeLabel.textContent = browser.i18n.getMessage("optionApplySystemTheme");
 	autoSaveDelayLabel.textContent = browser.i18n.getMessage("optionAutoSaveDelay");
 	autoSaveLoadLabel.textContent = browser.i18n.getMessage("optionAutoSaveLoad");
 	autoSaveUnloadLabel.textContent = browser.i18n.getMessage("optionAutoSaveUnload");
@@ -630,6 +633,7 @@
 		displayStatsInput.checked = profileOptions.displayStats;
 		backgroundSaveInput.checked = profileOptions.backgroundSave;
 		backgroundSaveInput.disabled = profileOptions.saveToGDrive;
+		applySystemThemeInput.checked = profileOptions.applySystemTheme;
 		autoSaveDelayInput.value = profileOptions.autoSaveDelay;
 		autoSaveDelayInput.disabled = !profileOptions.autoSaveLoadOrUnload && !profileOptions.autoSaveLoad;
 		autoSaveLoadInput.checked = !profileOptions.autoSaveLoadOrUnload && profileOptions.autoSaveLoad;
@@ -698,6 +702,7 @@
 				displayInfobar: displayInfobarInput.checked,
 				displayStats: displayStatsInput.checked,
 				backgroundSave: backgroundSaveInput.checked,
+				applySystemTheme: applySystemThemeInput.checked,
 				autoSaveDelay: Math.max(autoSaveDelayInput.value, 0),
 				autoSaveLoad: autoSaveLoadInput.checked,
 				autoSaveUnload: autoSaveUnloadInput.checked,

extension/ui/content/content-ui-editor-web.js

@@ -848,7 +848,10 @@ table {
 			document.body.contentEditable = true;
 		}
 		if (message.method == "formatPage") {
-			formatPage();
+			formatPage(true);
+		}
+		if (message.method == "formatPageNoTheme") {
+			formatPage(false);
 		}
 		if (message.method == "disableEditPage") {
 			document.body.contentEditable = false;
@@ -1308,7 +1311,7 @@ table {
 		event.stopPropagation();
 	}
 
-	function formatPage() {
+	function formatPage(applySystemTheme) {
 		const shadowRoots = {};
 		const classesToPreserve = ["single-file-highlight", "single-file-highlight-yellow", "single-file-highlight-green", "single-file-highlight-pink", "single-file-highlight-blue"];
 		document.querySelectorAll(NOTE_TAGNAME).forEach(containerElement => {
@@ -1345,7 +1348,7 @@ table {
 		document.body.classList.add("sans-serif");
 		document.body.classList.add("container");
 		document.body.classList.add("line-height4");
-		if (matchMedia("prefers-color-scheme: dark")) {
+		if (applySystemTheme && matchMedia("prefers-color-scheme: dark")) {
 			document.body.classList.add("dark");
 		}
 		document.body.style.setProperty("display", "block");

extension/ui/pages/help.html

@@ -343,6 +343,12 @@
 							path. Unchecking this option prevent using sub-directories in filename templates.</p>
 						<p class="notice">It is recommended to <u>check</u> this option</p>
 					</li>
+					<li data-options-label="applySystemThemeLabel"> <span class="option">Option: apply the system theme
+							when formatting a page in the annotation editor</span>
+						<p>Uncheck this option if you do not want to apply the theme of the operating system or the
+							browser (e.g. dark or light) when you click on the button "Format the page for better
+							readability" in the annotation editor.</p>
+					</li>
 					<li data-options-label="displayStatsLabel"> <span class="option">Option: display stats in the
 							console after processing</span>
 						<p>Check this option to display stats about processing in the JavaScript developer tools of your

extension/ui/pages/options.html

@@ -194,6 +194,10 @@
 				<label for="backgroundSaveInput" id="backgroundSaveLabel"></label>
 				<input type="checkbox" id="backgroundSaveInput">
 			</div>
+			<div class="option">
+				<label for="applySystemThemeInput" id="applySystemThemeLabel"></label>
+				<input type="checkbox" id="applySystemThemeInput">
+			</div>			
 			<div class="option">
 				<label for="displayStatsInput" id="displayStatsLabel"></label>
 				<input type="checkbox" id="displayStatsInput">