feat: improve dark mode contrast in Tower3D and IsolatedRoof3D components

app/src/components/three/IsolatedRoof3D.tsx

@@ -4,6 +4,7 @@ import * as THREE from 'three';
 import SceneCanvas from '../SceneCanvas';
 import FallbackDiagram from '../FallbackDiagram';
 import { WindArrow } from './WindArrow';
+import { useCanvasTheme } from '@/lib/theme';
 
 export interface IsolatedRoof3DInput {
   /** Tipo de cobertura: 'shed' (uma água) ou 'gable' (duas águas) */
@@ -43,6 +44,13 @@ function IsolatedRoofModel({
   cpeLeeward,
   forceKN,
 }: IsolatedRoof3DInput) {
+  const theme = useCanvasTheme();
+  const isDark = theme === 'dark';
+  const labelColor = isDark ? '#cbd5e1' : '#475569';
+  const textColor = isDark ? '#93c5fd' : '#1a202c';
+  const lineMaterialColor = isDark ? '#94a3b8' : '#64748b';
+  const pillarColor = isDark ? '#cbd5e1' : '#475569';
+
   const thetaRad = (theta * Math.PI) / 180;
   const halfDepth = depth / 2;
   const halfWidth = width / 2;
@@ -142,7 +150,7 @@ function IsolatedRoofModel({
       {pillars.map((p, i) => (
         <mesh key={`pillar-${i}`} position={p.pos} castShadow>
           <cylinderGeometry args={[0.06, 0.06, p.h, 16]} />
-          <meshStandardMaterial color="#475569" roughness={0.5} />
+          <meshStandardMaterial color={pillarColor} roughness={0.5} />
         </mesh>
       ))}
 
@@ -157,21 +165,21 @@ function IsolatedRoofModel({
       <group position={[-halfDepth - 0.4, 0, -halfDepth]}>
         <mesh position={[0, height / 2, 0]}>
           <boxGeometry args={[0.015, height, 0.015]} />
-          <meshStandardMaterial color="#64748b" />
+          <meshStandardMaterial color={lineMaterialColor} />
         </mesh>
         <mesh position={[0, height, 0]}>
           <boxGeometry args={[0.1, 0.015, 0.015]} />
-          <meshStandardMaterial color="#64748b" />
+          <meshStandardMaterial color={lineMaterialColor} />
         </mesh>
         <mesh position={[0, 0, 0]}>
           <boxGeometry args={[0.1, 0.015, 0.015]} />
-          <meshStandardMaterial color="#64748b" />
+          <meshStandardMaterial color={lineMaterialColor} />
         </mesh>
         <Text
           position={[-0.15, height / 2, 0]}
           rotation={[0, -Math.PI / 2, 0]}
           fontSize={0.25}
-          color="#475569"
+          color={labelColor}
           anchorX="center"
           anchorY="middle"
         >
@@ -183,21 +191,21 @@ function IsolatedRoofModel({
       <group position={[halfDepth + 0.4, height / 2, 0]}>
         <mesh position={[0, 0, 0]}>
           <boxGeometry args={[0.015, 0.015, depth]} />
-          <meshStandardMaterial color="#64748b" />
+          <meshStandardMaterial color={lineMaterialColor} />
         </mesh>
         <mesh position={[0, 0, halfDepth]}>
           <boxGeometry args={[0.1, 0.015, 0.015]} />
-          <meshStandardMaterial color="#64748b" />
+          <meshStandardMaterial color={lineMaterialColor} />
         </mesh>
         <mesh position={[0, 0, -halfDepth]}>
           <boxGeometry args={[0.1, 0.015, 0.015]} />
-          <meshStandardMaterial color="#64748b" />
+          <meshStandardMaterial color={lineMaterialColor} />
         </mesh>
         <Text
           position={[0.15, 0, 0]}
           rotation={[0, Math.PI / 2, 0]}
           fontSize={0.25}
-          color="#475569"
+          color={labelColor}
           anchorX="center"
           anchorY="middle"
         >
@@ -208,7 +216,7 @@ function IsolatedRoofModel({
       {/* Rótulo Superior */}
       <Text
         position={[0, centerY + 3, 0]}
-        color="#1a202c"
+        color={textColor}
         anchorX="center"
         anchorY="bottom"
       >