Add option for custom tone colors

background.js

@@ -64,7 +64,8 @@ let zhongwenOptions = window.zhongwenOptions = {
     zhuyin: localStorage['zhuyin'] || 'no',
     grammar: localStorage['grammar'] || 'yes',
     simpTrad: localStorage['simpTrad'] || 'classic',
-    toneColorScheme: localStorage['toneColorScheme'] || 'standard'
+    toneColorScheme: localStorage['toneColorScheme'] || 'standard',
+    customToneColorScheme: JSON.parse(localStorage['customToneColorScheme'] || '{}')
 };
 
 function activateExtension(tabId, showHelp) {

content.js

@@ -628,6 +628,15 @@ function showPopup(html, elem, x, y, looseWidth) {
     popup.style.maxWidth = (looseWidth ? '' : '600px');
     popup.className = `background-${config.css} tonecolor-${config.toneColorScheme}`;
 
+    if (config.toneColorScheme === 'custom') {
+        for (let n = 1; n <= 5; ++n) {
+            popup.style.setProperty(
+                `--zhongwen-tonecolor-${n}`,
+                config.customToneColorScheme?.[`tone${n}`] ?? '#000000'
+            );
+        }
+    }
+
     $(popup).html(html);
 
     if (elem) {

css/content.css

@@ -221,3 +221,25 @@
 #zhongwen-window.tonecolor-hanping .tone5 {
   color: #a0a0a0;
 }
+
+
+/* Custom Tone Colors */
+#zhongwen-window.tonecolor-custom .tone1 {
+  color: var(--zhongwen-tonecolor-1);
+}
+
+#zhongwen-window.tonecolor-custom .tone2 {
+  color: var(--zhongwen-tonecolor-2);
+}
+
+#zhongwen-window.tonecolor-custom .tone3 {
+  color: var(--zhongwen-tonecolor-3);
+}
+
+#zhongwen-window.tonecolor-custom .tone4 {
+  color: var(--zhongwen-tonecolor-4);
+}
+
+#zhongwen-window.tonecolor-custom .tone5 {
+  color: var(--zhongwen-tonecolor-5);
+}

js/options.js

@@ -19,6 +19,11 @@ function loadVals() {
         document.querySelector(`input[name="toneColors"][value="${toneColorScheme}"]`).checked = true;
     }
 
+    const customToneColorScheme = JSON.parse(localStorage['customToneColorScheme'] || '{}');
+    Object.entries(customToneColorScheme).forEach(([key, val]) => {
+        document.querySelector(`input[id="${key}"]`).value = val;
+    });
+
     const fontSize = localStorage['fontSize'] || 'small';
     document.querySelector(`input[name="fontSize"][value="${fontSize}"]`).checked = true;
 
@@ -52,6 +57,14 @@ function setToneColorScheme(toneColorScheme) {
     }
 }
 
+function updateCustomToneColorScheme() {
+    const toneColorEls = document.querySelectorAll('input[name="customToneColors"]');
+    const toneColors = Object.fromEntries([...toneColorEls]
+        .map(el => [el.id, el.value]));
+
+    setJsonOption('customToneColorScheme', toneColors);
+}
+
 function setOption(option, value) {
     localStorage[option] = value;
     chrome.extension.getBackgroundPage().zhongwenOptions[option] = value;
@@ -62,6 +75,11 @@ function setBooleanOption(option, value) {
     setOption(option, yesNo);
 }
 
+function setJsonOption(option, value) {
+    localStorage[option] = JSON.stringify(value);
+    chrome.extension.getBackgroundPage().zhongwenOptions[option] = value;
+}
+
 window.addEventListener('load', () => {
 
     document.querySelectorAll('input[name="popupColor"]').forEach((input) => {
@@ -74,6 +92,10 @@ window.addEventListener('load', () => {
             () => setToneColorScheme(input.getAttribute('value')));
     });
 
+    document.querySelectorAll('input[name="toneColors"], input[name="customToneColors"]').forEach((input) => {
+        input.addEventListener('change', updateCustomToneColorScheme);
+    });
+
     document.querySelectorAll('input[name="fontSize"]').forEach((input) => {
         input.addEventListener('change',
             () => setOption('fontSize', input.getAttribute('value')));
@@ -103,3 +125,13 @@ window.addEventListener('load', () => {
 
 loadVals();
 
+const toggleCustomToneColorOptions = () => {
+    document.querySelector('#toneColorsCustomOptions').hidden =
+        !document.querySelector('#toneColorsCustom').checked;
+}
+
+toggleCustomToneColorOptions();
+
+document.querySelectorAll('input[name="toneColors"]').forEach((input) => {
+    input.addEventListener('change', toggleCustomToneColorOptions);
+});

options.html

@@ -64,6 +64,19 @@ <h2 class="mb-3">Appearance of the Pop-up Window</h2>
                     href="https://hanpingchinese.com/" target="_blank">Hanping</a> color
                 scheme.</label>
         </div>
+        <div class="custom-control custom-radio">
+            <input type="radio" id="toneColorsCustom" name="toneColors"
+                   class="custom-control-input" value="custom">
+            <label class="custom-control-label" for="toneColorsCustom">Use a custom color
+                scheme.</label>
+        </div>
+        <div id="toneColorsCustomOptions" class="custom-control" hidden>
+            <label for="tone1">Tone 1</label> <input name="customToneColors" type="color" id="tone1" value="#000000">
+            <label for="tone2">Tone 2</label> <input name="customToneColors" type="color" id="tone2" value="#000000">
+            <label for="tone3">Tone 3</label> <input name="customToneColors" type="color" id="tone3" value="#000000">
+            <label for="tone4">Tone 4</label> <input name="customToneColors" type="color" id="tone4" value="#000000">
+            <label for="tone5">Tone 5</label> <input name="customToneColors" type="color" id="tone5" value="#000000">
+        </div>
         <div class="custom-control custom-radio">
             <input type="radio" id="toneColorsNone" name="toneColors" class="custom-control-input"
                    value="none">