feat: apply dark mode contrast corrections to all 3D modules

app/src/components/three/Bar3D.tsx

@@ -3,6 +3,7 @@ import { OrbitControls, Grid, Environment, Text } from '@react-three/drei';
 import * as THREE from 'three';
 import SceneCanvas from '../SceneCanvas';
 import FallbackDiagram from '../FallbackDiagram';
+import { useCanvasTheme } from '@/lib/theme';
 
 export interface Bar3DInput {
   /** Tipo de seção */
@@ -34,14 +35,18 @@ function BarModel({
   alpha,
   cx,
 }: Bar3DInput) {
+  const theme = useCanvasTheme();
+  const isDark = theme === 'dark';
+  
   const barRadius = barType === 'circular' ? (diameter ?? 0.05) / 2 : Math.min(width ?? 0.1, 0.08) / 2;
   const barThickness = barType === 'circular' ? barRadius : barRadius * 0.5;
 
   const barColor = useMemo(() => {
     const intensity = Math.min(1, Math.abs(cx) / 2.5);
     const hue = 215 - intensity * 215;
-    return new THREE.Color(`hsl(${hue}, ${65 + intensity * 25}%, ${45 - intensity * 10}%)`);
-  }, [cx]);
+    const l = isDark ? (55 - intensity * 10) : (45 - intensity * 10);
+    return new THREE.Color(`hsl(${hue}, ${65 + intensity * 25}%, ${l}%)`);
+  }, [cx, isDark]);
 
   // Ação do vento deve rotacionar a barra em seu próprio eixo longitudinal (roll).
   // O eixo longitudinal na nossa geometria é o X.
@@ -87,7 +92,7 @@ function BarModel({
       <Text
         position={[0, -barRadius * 2 - 0.4, 0]}
         fontSize={0.3}
-        color="#1e40af"
+        color={isDark ? "#93c5fd" : "#1e40af"}
         anchorX="center"
         anchorY="top"
       >
@@ -172,6 +177,8 @@ function SectionShape({
 }
 
 export default function Bar3DViewer(input: Bar3DInput) {
+  const theme = useCanvasTheme();
+  const isDark = theme === 'dark';
   const { length, width, diameter } = input;
   const size = Math.max(length * 0.6, (width ?? diameter ?? 0.1) * 8);
 
@@ -192,7 +199,13 @@ export default function Bar3DViewer(input: Bar3DInput) {
       <ambientLight intensity={0.6} />
       <directionalLight position={[size, size, size]} intensity={1.2} castShadow shadow-mapSize-width={1024} shadow-mapSize-height={1024} />
       <BarModel {...input} />
-      <Grid infiniteGrid fadeDistance={size * 2} sectionColor="#94a3b8" cellColor="#cbd5e1" position={[0, -size * 0.3, 0]} />
+      <Grid 
+        infiniteGrid 
+        fadeDistance={size * 2} 
+        sectionColor={isDark ? "#475569" : "#94a3b8"} 
+        cellColor={isDark ? "#1e293b" : "#cbd5e1"} 
+        position={[0, -size * 0.3, 0]} 
+      />
       <OrbitControls makeDefault minPolarAngle={0} maxPolarAngle={Math.PI - 0.05} />
       <Environment preset="city" />
     </SceneCanvas>