improve theme

src/components/graph/AnimatedEdge.tsx

@@ -56,7 +56,7 @@ export function AnimatedEdge({
           id={startId}
           markerWidth={DOT_MARKER_R * 2}
           markerHeight={DOT_MARKER_R * 2}
-          refX={DOT_MARKER_R + 10}
+          refX={DOT_MARKER_R - 1}
           refY={DOT_MARKER_R}
           orient="auto"
         >
@@ -72,7 +72,7 @@ export function AnimatedEdge({
           id={endId}
           markerWidth={DOT_MARKER_R * 2}
           markerHeight={DOT_MARKER_R * 2}
-          refX={DOT_MARKER_R - 10}
+          refX={DOT_MARKER_R + 1}
           refY={DOT_MARKER_R}
           orient="auto"
         >

src/components/graph/RenderingNode.tsx

@@ -1,7 +1,6 @@
 import { memo, useCallback, useContext, useEffect, useMemo, useRef, useState } from 'react'
 import nunjucks from 'nunjucks'
 import FlowContext from '../../lib/flowContext'
-import { useTheme } from '../../lib/themeContext'
 import { Empty, EmptyHeader, EmptyTitle, EmptyDescription, EmptyContent, EmptyMedia } from '../ui/empty'
 import {
     BaseNode,
@@ -27,49 +26,6 @@ type Props = {
     style?: React.CSSProperties
 }
 
-const DARK_SKINPARAMS = `
-skinparam backgroundColor #1e1e1e
-skinparam defaultFontColor #e0e0e0
-skinparam shadowing false
-skinparam ArrowColor #b0b0b0
-skinparam ArrowFontColor #e0e0e0
-skinparam ActivityBackgroundColor #2d2d2d
-skinparam ActivityBorderColor #6b6b6b
-skinparam ActivityDiamondBackgroundColor #2d2d2d
-skinparam ActivityDiamondBorderColor #6b6b6b
-skinparam SequenceParticipantBackgroundColor #2d2d2d
-skinparam SequenceParticipantBorderColor #6b6b6b
-skinparam SequenceLifeLineBorderColor #6b6b6b
-skinparam SequenceBoxBackgroundColor #252525
-skinparam SequenceBoxBorderColor #6b6b6b
-skinparam SequenceActorBackgroundColor #2d2d2d
-skinparam SequenceActorBorderColor #6b6b6b
-skinparam ClassBackgroundColor #2d2d2d
-skinparam ClassBorderColor #6b6b6b
-skinparam ComponentBackgroundColor #2d2d2d
-skinparam ComponentBorderColor #6b6b6b
-skinparam StateBackgroundColor #2d2d2d
-skinparam StateBorderColor #6b6b6b
-skinparam partitionBorderColor #6b6b6b
-skinparam sequence {
-  ArrowColor #b0b0b0
-  LifeLineBorderColor #6b6b6b
-  LifeLineBackgroundColor #2d2d2d
-  ParticipantBorderColor #6b6b6b
-  ActorBorderColor #6b6b6b
-  BoxBorderColor #6b6b6b
-}
-skinparam activity {
-  ArrowColor #b0b0b0
-  BorderColor #6b6b6b
-  DiamondBorderColor #6b6b6b
-}
-skinparam class {
-  ArrowColor #b0b0b0
-  BorderColor #6b6b6b
-}
-`
-
 export const RenderingNode = memo(function RenderingNode({ id, width, height }: Props) {
     const [svgContent, setSvgContent] = useState<string | null>(null)
     const [error, setError] = useState<null | { kind: string; message: string }>(null)
@@ -77,7 +33,6 @@ export const RenderingNode = memo(function RenderingNode({ id, width, height }:
     const runIdRef = useRef(0)
     const loadingStartedAtRef = useRef<number | null>(null)
     const minLoadingTimeoutRef = useRef<ReturnType<typeof setTimeout> | null>(null)
-    const { theme } = useTheme()
 
     const ctx = useContext(FlowContext)
     const nodes = ctx?.nodes ?? []
@@ -314,13 +269,7 @@ export const RenderingNode = memo(function RenderingNode({ id, width, height }:
                     throw new Error(`Nunjucks: ${nunjucksErr?.message ?? String(nunjucksErr)}`)
                 }
 
-                let resolvedPlantuml = afterNunjucks
+                const resolvedPlantuml = afterNunjucks
-                if (theme === 'dark') {
-                    resolvedPlantuml = resolvedPlantuml.replace(
-                        /^(\s*@startuml\s*\n)/i,
-                        `$1${DARK_SKINPARAMS}\n`
-                    )
-                }
 
                 const res = await fetch(KROKI_PLANTUML_SVG, {
                     method: 'POST',
@@ -369,9 +318,9 @@ export const RenderingNode = memo(function RenderingNode({ id, width, height }:
                 minLoadingTimeoutRef.current = null
             }
         }
-        // Only re-run when inputs that affect the resolved diagram change (signatures + source + theme).
+        // Only re-run when inputs that affect the resolved diagram change (signatures + source).
         // Do not depend on nodes/edges refs to avoid flicker from unnecessary re-renders.
-    }, [id, theme, plantumlText, configSignature, edgesSignature, variablesSignature, functionsSignature])
+    }, [id, plantumlText, configSignature, edgesSignature, variablesSignature, functionsSignature])
 
     const dimensions =
         width != null && height != null && width > 0 && height > 0
@@ -479,7 +428,7 @@ export const RenderingNode = memo(function RenderingNode({ id, width, height }:
                         <div className="flex min-h-0 flex-1 items-center justify-center text-xs text-muted-foreground">Rendering…</div>
                     ) : svgContent ? (
                         <div
-                            className="min-h-0 flex-1 w-full overflow-auto bg-white dark:bg-secondary [&_svg]:max-w-full [&_svg]:h-auto"
+                            className="rendering-diagram min-h-0 flex-1 w-full overflow-auto bg-white dark:bg-secondary [&_svg]:max-w-full [&_svg]:h-auto"
                             dangerouslySetInnerHTML={{ __html: svgContent }}
                         />
                     ) : null}

src/styles.css

@@ -56,6 +56,11 @@ body {
     pointer-events: none;
 }
 
+/* Rendering node: diagram is fetched once (light). In dark mode, invert so it stays readable without re-fetching. */
+.dark .rendering-diagram svg {
+    filter: invert(0.92) hue-rotate(180deg);
+}
+
 /* Animated React Flow edges: thicker stroke + path animation */
 .react-flow__edge path.animated-edge-path,
 .animated-edge-path {