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

app/src/components/three/Cylinder3D.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 Cylinder3DInput {
   diameter: number;
@@ -22,6 +23,8 @@ function cylinderColor(cpe: number, cpi: number): THREE.Color {
 }
 
 function CylinderModel({ diameter, height, cpeProfile, cpi }: Cylinder3DInput) {
+  const theme = useCanvasTheme();
+  const isDark = theme === 'dark';
   const segments = 64;
   const radius = diameter / 2;
 
@@ -121,11 +124,11 @@ function CylinderModel({ diameter, height, cpeProfile, cpi }: Cylinder3DInput) {
       {/* Anéis de detalhe (bordas do cilindro) */}
       <mesh position={[0, height + 0.01, 0]} rotation={[-Math.PI / 2, 0, 0]}>
         <ringGeometry args={[radius - 0.03, radius + 0.03, segments]} />
-        <meshStandardMaterial color="#2d3748" roughness={0.5} />
+        <meshStandardMaterial color={isDark ? "#475569" : "#2d3748"} roughness={0.5} />
       </mesh>
       <mesh position={[0, 0.01, 0]} rotation={[-Math.PI / 2, 0, 0]}>
         <ringGeometry args={[radius - 0.03, radius + 0.03, segments]} />
-        <meshStandardMaterial color="#2d3748" roughness={0.5} />
+        <meshStandardMaterial color={isDark ? "#475569" : "#2d3748"} roughness={0.5} />
       </mesh>
 
       {/* Seta indicativa de direção do vento */}
@@ -154,7 +157,7 @@ function CylinderModel({ diameter, height, cpeProfile, cpi }: Cylinder3DInput) {
       <Text
         position={[0, height + 0.8, 0]}
         fontSize={Math.max(0.3, Math.min(0.6, diameter / 10))}
-        color="#1a202c"
+        color={isDark ? "#cbd5e1" : "#1a202c"}
         anchorX="center"
         anchorY="bottom"
       >
@@ -165,6 +168,9 @@ function CylinderModel({ diameter, height, cpeProfile, cpi }: Cylinder3DInput) {
 }
 
 export default function Cylinder3DViewer({ diameter, height, cpeProfile, cpi }: Cylinder3DInput) {
+  const theme = useCanvasTheme();
+  const isDark = theme === 'dark';
+
   const fallback = (
     <FallbackDiagram
       type="cylinder"
@@ -195,7 +201,13 @@ export default function Cylinder3DViewer({ diameter, height, cpeProfile, cpi }:
         shadow-camera-bottom={-maxDim}
       />
       <CylinderModel diameter={diameter} height={height} cpeProfile={cpeProfile} cpi={cpi} />
-      <Grid infiniteGrid fadeDistance={maxDim * 5} sectionColor="#94a3b8" cellColor="#cbd5e1" position={[0, -0.01, 0]} />
+      <Grid 
+        infiniteGrid 
+        fadeDistance={maxDim * 5} 
+        sectionColor={isDark ? "#475569" : "#94a3b8"} 
+        cellColor={isDark ? "#1e293b" : "#cbd5e1"} 
+        position={[0, -0.01, 0]} 
+      />
       <OrbitControls makeDefault minPolarAngle={0} maxPolarAngle={Math.PI / 2 - 0.05} />
       <Environment preset="city" />
     </SceneCanvas>