Fix PlantUML start/end state colors in dark mode

- Start states: orange filled circle (fill + stroke)
- End states: outer circle with orange stroke only (transparent fill), inner circle with orange fill
- Updated JavaScript to detect nested polygons and apply correct styling
- Updated CSS comments to reflect the differentiation logic

Author: jgeluk

docs/diagrams/include/themes/dark.puml

@@ -57,5 +57,13 @@ skinparam state {
   EndColor #ffffff
 }
 
+' Explicitly set start/end state colors for visibility in dark mode
+' Note: PlantUML may hardcode start/end state colors, so these may not work
 skinparam StateStartColor #ffffff
 skinparam StateEndColor #ffffff
+skinparam StateStartBackgroundColor #ffffff
+skinparam StateEndBackgroundColor #ffffff
+skinparam StateStartBorderColor #ffffff
+skinparam StateEndBorderColor #ffffff
+skinparam StateStartFillColor #ffffff
+skinparam StateEndFillColor #ffffff

docs/diagrams/src/uctm-process.puml

@@ -1,5 +1,5 @@
 !option handwritten false
-@startuml Plan Build Run
+@startuml
 !include ../include/themes/light.puml
 
 state Planxs {

docs/javascripts/darkable-objects.js

@@ -79,6 +79,118 @@
     svg.removeAttribute('height');
   }
 
+  function fixStartEndStateColors(svg) {
+    if (!isDarkMode()) return;
+    // Fix hardcoded #222222 fill/stroke colors for start/end states in dark mode
+    // Start state: one filled circle (orange fill + stroke)
+    // End state: smaller filled circle inside larger non-filled circle (outer: orange stroke only, inner: orange fill)
+    
+    // Helper to get bounding box of a polygon
+    function getBoundingBox(polygon) {
+      const points = polygon.getAttribute('points');
+      if (!points) return null;
+      const coords = points.split(/[\s,]+/).map(parseFloat).filter(n => !isNaN(n));
+      if (coords.length < 4) return null;
+      
+      let minX = coords[0], maxX = coords[0];
+      let minY = coords[1], maxY = coords[1];
+      for (let i = 2; i < coords.length; i += 2) {
+        minX = Math.min(minX, coords[i]);
+        maxX = Math.max(maxX, coords[i]);
+        minY = Math.min(minY, coords[i + 1]);
+        maxY = Math.max(maxY, coords[i + 1]);
+      }
+      return { minX, maxX, minY, maxY, width: maxX - minX, height: maxY - minY };
+    }
+    
+    // Helper to check if two bounding boxes overlap significantly (indicating nested circles)
+    function areNested(bb1, bb2, threshold = 0.7) {
+      if (!bb1 || !bb2) return false;
+      const center1 = { x: (bb1.minX + bb1.maxX) / 2, y: (bb1.minY + bb1.maxY) / 2 };
+      const center2 = { x: (bb2.minX + bb2.maxX) / 2, y: (bb2.minY + bb2.maxY) / 2 };
+      const distance = Math.sqrt(Math.pow(center1.x - center2.x, 2) + Math.pow(center1.y - center2.y, 2));
+      const avgSize = (bb1.width + bb1.height + bb2.width + bb2.height) / 4;
+      return distance < avgSize * threshold;
+    }
+    
+    // Find all polygons with dark fill/stroke (start/end states)
+    const candidatePolygons = Array.from(svg.querySelectorAll('polygon')).filter((polygon) => {
+      const fill = polygon.getAttribute('fill');
+      const style = polygon.getAttribute('style') || '';
+      const hasDarkFill = fill === '#222222' || fill === '#222';
+      const hasDarkStroke = style.includes('stroke:#222222') || style.includes('stroke:#222');
+      return hasDarkFill || hasDarkStroke;
+    });
+    
+    // Group polygons that are nested (end states have two circles)
+    const processed = new Set();
+    candidatePolygons.forEach((polygon) => {
+      if (processed.has(polygon)) return;
+      
+      const bb1 = getBoundingBox(polygon);
+      if (!bb1) return;
+      
+      // Look for a nearby polygon that might be the other circle of an end state
+      let nestedPolygon = null;
+      for (const other of candidatePolygons) {
+        if (other === polygon || processed.has(other)) continue;
+        const bb2 = getBoundingBox(other);
+        if (bb2 && areNested(bb1, bb2)) {
+          nestedPolygon = other;
+          break;
+        }
+      }
+      
+      if (nestedPolygon) {
+        // This is an end state: two nested circles
+        processed.add(polygon);
+        processed.add(nestedPolygon);
+        
+        const bb2 = getBoundingBox(nestedPolygon);
+        const isOuter = bb1.width > bb2.width || bb1.height > bb2.height;
+        const outer = isOuter ? polygon : nestedPolygon;
+        const inner = isOuter ? nestedPolygon : polygon;
+        
+        // Outer circle: orange stroke, transparent fill
+        const outerStyle = outer.getAttribute('style') || '';
+        outer.setAttribute('fill', 'transparent');
+        outer.setAttribute('stroke', '#ff6f00');
+        if (outerStyle) {
+          outer.setAttribute('style', outerStyle
+            .replace(/stroke:#222222/g, 'stroke:#ff6f00')
+            .replace(/stroke:#222([^0-9])/g, 'stroke:#ff6f00$1')
+            .replace(/fill:#222222/g, 'fill:transparent')
+            .replace(/fill:#222([^0-9])/g, 'fill:transparent$1'));
+        }
+        
+        // Inner circle: orange fill and stroke
+        const innerStyle = inner.getAttribute('style') || '';
+        inner.setAttribute('fill', '#ff6f00');
+        inner.setAttribute('stroke', '#ff6f00');
+        if (innerStyle) {
+          inner.setAttribute('style', innerStyle
+            .replace(/stroke:#222222/g, 'stroke:#ff6f00')
+            .replace(/stroke:#222([^0-9])/g, 'stroke:#ff6f00$1')
+            .replace(/fill:#222222/g, 'fill:#ff6f00')
+            .replace(/fill:#222([^0-9])/g, 'fill:#ff6f00$1'));
+        }
+      } else {
+        // This is a start state: single filled circle
+        processed.add(polygon);
+        const style = polygon.getAttribute('style') || '';
+        polygon.setAttribute('fill', '#ff6f00');
+        polygon.setAttribute('stroke', '#ff6f00');
+        if (style) {
+          polygon.setAttribute('style', style
+            .replace(/stroke:#222222/g, 'stroke:#ff6f00')
+            .replace(/stroke:#222([^0-9])/g, 'stroke:#ff6f00$1')
+            .replace(/fill:#222222/g, 'fill:#ff6f00')
+            .replace(/fill:#222([^0-9])/g, 'fill:#ff6f00$1'));
+        }
+      }
+    });
+  }
+
   function renderDiagram(diagram) {
     const markup =
       (isDarkMode() ? diagram.darkMarkup : diagram.lightMarkup) ||
@@ -89,6 +201,7 @@
     if (svg) {
       diagram.naturalWidth = getNaturalWidth(svg) || diagram.naturalWidth;
       applySizing(diagram, svg);
+      fixStartEndStateColors(svg);
     }
   }
 

docs/stylesheets/extra.css

@@ -680,6 +680,23 @@
 }
 
 /* Hover state - orange on hover for all tabs */
+
+/* Fix PlantUML start/end state visibility in dark mode */
+/* JavaScript (darkable-objects.js) handles the differentiation:
+ *   - Start states: orange fill + stroke
+ *   - End states: outer circle (transparent fill + orange stroke), inner circle (orange fill + stroke)
+ * CSS here is a fallback to ensure visibility before JS runs */
+[data-md-color-scheme="slate"] svg[data-diagram-type="STATE"] polygon[fill="#222222"],
+[data-md-color-scheme="slate"] svg[data-diagram-type="STATE"] polygon[fill="#222"],
+[data-md-color-scheme="slate"] .ekgf-diagram svg[data-diagram-type="STATE"] polygon[fill="#222222"],
+[data-md-color-scheme="slate"] .ekgf-diagram svg[data-diagram-type="STATE"] polygon[fill="#222"],
+[data-md-color-scheme="slate"] svg[data-diagram-type="STATE"] polygon[style*="stroke:#222222"],
+[data-md-color-scheme="slate"] svg[data-diagram-type="STATE"] polygon[style*="stroke:#222"],
+[data-md-color-scheme="slate"] .ekgf-diagram svg[data-diagram-type="STATE"] polygon[style*="stroke:#222222"],
+[data-md-color-scheme="slate"] .ekgf-diagram svg[data-diagram-type="STATE"] polygon[style*="stroke:#222"] {
+  stroke: #ff6f00 !important;
+  /* Fill will be handled by JavaScript to differentiate start vs end states */
+}
 .md-typeset .tabbed-labels > label:hover {
   color: #ff6f00 !important;
 }