From acd842dd105c4fdac2db1c310ebaa7ff3c4b687a Mon Sep 17 00:00:00 2001
From: tecc <tecc@tecc.me>
Date: Fri, 23 Feb 2024 23:52:31 +0100
Subject: [PATCH 1/2] feat(theme): Force `color` to black by default, add
 theming option

better-theming: The CSS selector now also applies `color: black` to go with `background-color: white`.
option-force-light-theme: A new option has been added that forces the colours to always be white for the foreground and black for the background, otherwise inheriting the colours. It is on by default to be as close to original behaviour as possible.
---
 src/index.ts            | 12 ++++++++++--
 src/markdownItPlugin.ts | 10 ++++++++--
 2 files changed, 18 insertions(+), 4 deletions(-)

diff --git a/src/index.ts b/src/index.ts
index b0b35d8..891d78c 100644
--- a/src/index.ts
+++ b/src/index.ts
@@ -1,5 +1,5 @@
 import joplin from 'api';
-import { ContentScriptType, SettingItemType } from 'api/types';
+import {ContentScriptType, SettingItemType} from 'api/types';
 
 joplin.plugins.register({
 	onStart: async function() {
@@ -14,9 +14,17 @@ joplin.plugins.register({
 				type: SettingItemType.String,
 				section: 'abc',
 				public: true,
-				label: 'ABC options',
+				label: 'ABC render options',
 				description: 'Options that should be used whenever rendering an ABC code. It must be a JSON5 object. The full list of options is available at: https://paulrosen.github.io/abcjs/visual/render-abc-options.html',
 			},
+			'forceLightTheme': {
+				value: true,
+				type: SettingItemType.Bool,
+				section: 'abc',
+				public: true,
+				label: 'Force light theme',
+				description: 'Forces the rendered output to be white and black (unless overriden by ABC render options); otherwise the sheet music will inherit the background and foreground colours of your selected theme.'
+			}
 		});
 
 		await joplin.contentScripts.register(
diff --git a/src/markdownItPlugin.ts b/src/markdownItPlugin.ts
index ef3f2fc..3930909 100644
--- a/src/markdownItPlugin.ts
+++ b/src/markdownItPlugin.ts
@@ -48,13 +48,14 @@ export default function() {
 
 				try {
 					const globalOptions = parseOptions(pluginOptions.settingValue('options'));
+					const forceLightTheme = pluginOptions.settingValue('forceLightTheme');
 
 					element.setAttribute('id', elementId);
 					element.style.display = 'none';
 					document.body.appendChild(element);
 					const parsed = parseAbcContent(token.content);
 					abcjs.renderAbc(elementId, parsed.markup, { ...globalOptions, ...parsed.options });
-					html = '<div class="abc-notation-block">' + element.innerHTML + '</div>';
+					html = `<div class="abc-notation-block ${forceLightTheme ? ' force-light' : ''}">` + element.innerHTML + '</div>';
 				} catch (error) {
 					console.error(error);
 					return '<div style="border: 1px solid red; padding: 10px;">Could not render ABC notation: ' + htmlentities(error.message) + '</div>';
@@ -72,8 +73,13 @@ export default function() {
 					inline: true,
 					mime: 'text/css',
 					text: `
-						.abc-notation-block svg {
+						.abc-notation-block.force-light svg {
 							background-color: white;
+							color: black;
+						}
+						.abc-notation-block:not(.force-light) svg {
+							background-color: inherit;
+							color: inherit;
 						}
 					`,
 				},

From bd0df1481cafdb5774f8f7e15d84134cdd4e2180 Mon Sep 17 00:00:00 2001
From: tecc <tecc@tecc.me>
Date: Sat, 24 Feb 2024 16:27:37 +0100
Subject: [PATCH 2/2] fix(theme): Reimplementation of theming

theming: The container element now specifies the colours in its `style` attribute. Consequently, the CSS asset specifies to inherit parent colours. It's essentially a shorter way of expressing the same thing.
---
 src/markdownItPlugin.ts | 10 ++++------
 1 file changed, 4 insertions(+), 6 deletions(-)

diff --git a/src/markdownItPlugin.ts b/src/markdownItPlugin.ts
index 3930909..b800489 100644
--- a/src/markdownItPlugin.ts
+++ b/src/markdownItPlugin.ts
@@ -55,7 +55,9 @@ export default function() {
 					document.body.appendChild(element);
 					const parsed = parseAbcContent(token.content);
 					abcjs.renderAbc(elementId, parsed.markup, { ...globalOptions, ...parsed.options });
-					html = `<div class="abc-notation-block ${forceLightTheme ? ' force-light' : ''}">` + element.innerHTML + '</div>';
+
+					const style = forceLightTheme ? 'color: black; background-color: white;' : 'color: inherit; background-color: inherit;';
+					html = `<div class="abc-notation-block" style="${style}">` + element.innerHTML + '</div>';
 				} catch (error) {
 					console.error(error);
 					return '<div style="border: 1px solid red; padding: 10px;">Could not render ABC notation: ' + htmlentities(error.message) + '</div>';
@@ -73,11 +75,7 @@ export default function() {
 					inline: true,
 					mime: 'text/css',
 					text: `
-						.abc-notation-block.force-light svg {
-							background-color: white;
-							color: black;
-						}
-						.abc-notation-block:not(.force-light) svg {
+						.abc-notation-block svg {
 							background-color: inherit;
 							color: inherit;
 						}