text more readable

styles.css

@@ -1,3 +1,4 @@
+/* ... (previous styles remain unchanged) ... */
 body {
     font-family: Arial, sans-serif;
     margin: 0;
@@ -574,15 +575,45 @@ 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;
+    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;
-}
+}
+
+/* Improve contrast for dark mode */
+body.dark-mode .custom-color-enabled #preview,
+body.dark-mode .custom-color-enabled #resultsTable tbody tr {
+    text-shadow: 
+        -1px -1px 0 #fff,
+        1px -1px 0 #fff,
+        -1px 1px 0 #fff,
+        1px 1px 0 #fff;
+}
+
+body.dark-mode .custom-color-enabled #resultsTable th {
+    background-color: #1a1a1a;
+}
+
+/* Additional styles to improve readability */
+.custom-color-enabled #resultsTable td {
+    padding: 8px;
+}
+
+.custom-color-enabled #preview {
+    padding: 12px;
+    margin: 12px 0;
+    border-radius: 6px;
+}
+
+/* ... (rest of the styles remain unchanged) ... */

ui.js

@@ -95,22 +95,21 @@ function setupMeasurementHandlers() {
 
     console.log("Measurement handlers set up.");
 }
-
 function calculateColor(dipDirection, dip) {
     // Normalize dip direction to 0-360 range
     dipDirection = (dipDirection % 360 + 360) % 360;
 
     // Calculate hue based on dip direction (0-360)
     const hue = dipDirection;
 
-    // Calculate saturation based on dip (0-90 degrees mapped to 50-100%)
-    const sat= 50 + (dip / 90) * 50;
+    // Calculate saturation based on dip (0-90 degrees mapped to 60-100%)
+    const sat = 60 + (dip / 90) * 40;
 
-    // Use a fixed lightness value
-    const lit = 50;
+    // Adjust lightness based on dip (higher dip = darker color)
+    const lit = 60 - (dip / 90) * 30;
 
     return `hsl(${hue}, ${sat}%, ${lit}%)`;
-    }
+}
 
 function setupDepthButtons() {
     const depthButtons = document.querySelectorAll('.depth-button');