use css for custom colors

kinnujan · Jul 19, 2024 · d9daa84 · d9daa84
1 parent 951c99d
commit d9daa84
Show file tree

Hide file tree

Showing 2 changed files with 29 additions and 14 deletions.
diff --git a/styles.css b/styles.css
@@ -573,4 +573,16 @@ body.dark-mode .data-storage-info {
 
 body.dark-mode .data-storage-info i {
     color: #4da6ff;
+}
+
+/* Custom color styles */
+.custom-color-enabled #preview,
+.custom-color-enabled #resultsTable tbody tr {
+    color: white;
+    text-shadow: 1px 1px 0 #000, -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000;
+}
+
+.custom-color-enabled #resultsTable th {
+    background-color: #333;
+    color: white;
 }
diff --git a/ui.js b/ui.js
@@ -310,13 +310,13 @@ export async function updatePreview() {
             elements.preview.textContent = previewText;
 
             if (settings.customColorEnabled) {
-            const color = calculateColor(dipDirection, dip);
-            elements.preview.style.backgroundColor = color;
-            elements.preview.style.color = 'white';
-            } else {
-            elements.preview.style.backgroundColor = '';
-            elements.preview.style.color = '';
-            }
+                const color = calculateColor(dipDirection, dip);
+                elements.preview.style.backgroundColor = color;
+                elements.preview.classList.add('custom-color-enabled');
+                } else {
+                elements.preview.style.backgroundColor = '';
+                elements.preview.classList.remove('custom-color-enabled');
+                }
             } catch (error) {
             handleError(error, "Error updating preview");
             }
@@ -388,10 +388,13 @@ export async function updateResultsTable() {
 
     // Apply custom color if enabled
     if (settings.customColorEnabled) {
-    const color = calculateColor(measurement.dipDirection, measurement.dip);
-    row.style.backgroundColor = color;
-    row.style.color = 'white';
-    }
+        const color = calculateColor(measurement.dipDirection, measurement.dip);
+        row.style.backgroundColor = color;
+        row.classList.add('custom-color-enabled');
+        } else {
+        row.style.backgroundColor = '';
+        row.classList.remove('custom-color-enabled');
+        }
     });
     } catch (error) {
     handleError(error, "Error updating results table");
@@ -418,9 +421,9 @@ document.addEventListener('customColorSettingChanged', async (event) => {
     await updatePreview();
     await updateResultsTable();
 
-    // Update existing rows in the results table
     const resultsTable = document.getElementById('resultsTable');
     if (resultsTable) {
+    resultsTable.classList.toggle('custom-color-enabled', isCustomColorEnabled);
     const tbody = resultsTable.querySelector('tbody');
     if (tbody) {
     const rows = tbody.querySelectorAll('tr');
@@ -430,10 +433,10 @@ document.addEventListener('customColorSettingChanged', async (event) => {
     if (isCustomColorEnabled) {
     const color = calculateColor(measurement.dipDirection, measurement.dip);
     row.style.backgroundColor = color;
-    row.style.color = 'white';
+    row.classList.add('custom-color-enabled');
     } else {
     row.style.backgroundColor = '';
-    row.style.color = '';
+    row.classList.remove('custom-color-enabled');
     }
     }
     });