Dark mode: use dark edges

src/clientSideScene/sceneEntities.ts

@@ -162,7 +162,7 @@ import type RustContext from '@src/lib/rustContext'
 import type { Selections } from '@src/machines/modelingSharedTypes'
 import type { SettingsType } from '@src/lib/settings/initialSettings'
 import { Themes, getResolvedTheme } from '@src/lib/theme'
-import { getThemeColorForThreeJs } from '@src/lib/theme'
+import { getVolumeColorForThreeJs } from '@src/lib/theme'
 import { err, reportRejection, trap } from '@src/lib/trap'
 import { isArray, isOverlap, roundOff } from '@src/lib/utils'
 import {
@@ -3433,7 +3433,7 @@ export class SceneEntities {
    * latest value from `sceneInfra._theme`
    */
   updateSegmentBaseColor(newColor: Themes.Light | Themes.Dark) {
-    const newColorThreeJs = getThemeColorForThreeJs(newColor)
+    const newColorThreeJs = getVolumeColorForThreeJs(newColor)
     Object.values(this.activeSegments).forEach((group) => {
       group.userData.baseColor = newColorThreeJs
       group.traverse((child) => {
@@ -3662,7 +3662,7 @@ export class SceneEntities {
           isSelected
             ? SEGMENT_BLUE
             : parent?.userData?.baseColor ||
-                getThemeColorForThreeJs(this.sceneInfra.theme)
+                getVolumeColorForThreeJs(this.sceneInfra.theme)
         )
         updateExtraSegments(parent, 'hoveringLine', false)
         updateExtraSegments(parent, 'selected', isSelected)
@@ -3784,7 +3784,7 @@ export class SceneEntities {
   }
 
   drawDashedLine({ from, to }: { from: Coords2d; to: Coords2d }) {
-    const baseColor = getThemeColorForThreeJs(this.sceneInfra.theme)
+    const baseColor = getVolumeColorForThreeJs(this.sceneInfra.theme)
     const color = baseColor
     const meshType = STRAIGHT_SEGMENT_DASH
 

src/clientSideScene/segments.ts

@@ -81,7 +81,7 @@ import type { PathToNode } from '@src/lang/wasm'
 import { getTangentialArcToInfo } from '@src/lang/wasm'
 import type { Selections } from '@src/machines/modelingSharedTypes'
 import type { Themes } from '@src/lib/theme'
-import { getThemeColorForThreeJs } from '@src/lib/theme'
+import { getVolumeColorForThreeJs } from '@src/lib/theme'
 import { err } from '@src/lib/trap'
 import { isClockwise, normaliseAngle, roundOff } from '@src/lib/utils'
 import { getTangentPointFromPreviousArc } from '@src/lib/utils2d'
@@ -166,7 +166,7 @@ class StraightSegment implements SegmentUtils {
       return new Error('Invalid segment type')
     const { from, to } = input
     const baseColor =
-      callExpName === 'close' ? 0x444444 : getThemeColorForThreeJs(theme)
+      callExpName === 'close' ? 0x444444 : getVolumeColorForThreeJs(theme)
     const color = isSelected ? SEGMENT_BLUE : baseColor
     const meshType = isDraftSegment
       ? STRAIGHT_SEGMENT_DASH
@@ -419,7 +419,7 @@ class TangentialArcToSegment implements SegmentUtils {
       isDashed: isDraftSegment,
       scale,
     })
-    const baseColor = getThemeColorForThreeJs(theme)
+    const baseColor = getVolumeColorForThreeJs(theme)
     const color = isSelected ? SEGMENT_BLUE : baseColor
     const body = new MeshBasicMaterial({ color })
     const mesh = new Mesh(geometry, body)
@@ -608,7 +608,7 @@ class CircleSegment implements SegmentUtils {
       return new Error('Invalid segment type')
     }
     const { from, center, radius } = input
-    const baseColor = getThemeColorForThreeJs(theme)
+    const baseColor = getVolumeColorForThreeJs(theme)
     const color = isSelected ? SEGMENT_BLUE : baseColor
 
     const group = new Group()
@@ -862,7 +862,7 @@ class CircleThreePointSegment implements SegmentUtils {
       p3[1]
     )
     const center: [number, number] = [center_x, center_y]
-    const baseColor = getThemeColorForThreeJs(theme)
+    const baseColor = getVolumeColorForThreeJs(theme)
     const color = isSelected ? SEGMENT_BLUE : baseColor
 
     const group = new Group()
@@ -1072,7 +1072,7 @@ class ArcSegment implements SegmentUtils {
       return new Error('Invalid segment type')
     }
     const { from, to, center, radius, ccw } = input
-    const baseColor = getThemeColorForThreeJs(theme)
+    const baseColor = getVolumeColorForThreeJs(theme)
     const color = isSelected ? SEGMENT_BLUE : baseColor
 
     // Calculate start and end angles
@@ -1440,7 +1440,7 @@ class ThreePointArcSegment implements SegmentUtils {
       p3[1]
     )
     const center: [number, number] = [center_x, center_y]
-    const baseColor = getThemeColorForThreeJs(theme)
+    const baseColor = getVolumeColorForThreeJs(theme)
     const color = isSelected ? SEGMENT_BLUE : baseColor
 
     // Calculate start and end angles
@@ -1656,7 +1656,7 @@ export function createProfileStartHandle({
   const group = new Group()
 
   const geometry = new BoxGeometry(size, size, size) // in pixels scaled later
-  const baseColor = getThemeColorForThreeJs(theme)
+  const baseColor = getVolumeColorForThreeJs(theme)
   const color = isSelected ? SEGMENT_BLUE : baseColor
   const body = new MeshBasicMaterial({ color })
   const mesh = new Mesh(geometry, body)
@@ -1677,7 +1677,7 @@ export function createProfileStartHandle({
 }
 
 function createArrowhead(scale = 1, theme: Themes, color?: number): Group {
-  const baseColor = getThemeColorForThreeJs(theme)
+  const baseColor = getVolumeColorForThreeJs(theme)
   const arrowMaterial = new MeshBasicMaterial({
     color: color || baseColor,
   })
@@ -1703,7 +1703,7 @@ function createCircleCenterHandle(
   const circleCenterGroup = new Group()
 
   const geometry = new BoxGeometry(12, 12, 12) // in pixels scaled later
-  const baseColor = getThemeColorForThreeJs(theme)
+  const baseColor = getVolumeColorForThreeJs(theme)
   const body = new MeshBasicMaterial({ color })
   const mesh = new Mesh(geometry, body)
 
@@ -1726,7 +1726,7 @@ function createCircleThreePointHandle(
   const circleCenterGroup = new Group()
 
   const geometry = new BoxGeometry(12, 12, 12) // in pixels scaled later
-  const baseColor = getThemeColorForThreeJs(theme)
+  const baseColor = getVolumeColorForThreeJs(theme)
   const body = new MeshBasicMaterial({ color })
   const mesh = new Mesh(geometry, body)
 
@@ -1748,15 +1748,15 @@ function createExtraSegmentHandle(scale: number, theme: Themes): Group {
 
   const mat = new MeshBasicMaterial({
     transparent: true,
-    color: getThemeColorForThreeJs(theme),
+    color: getVolumeColorForThreeJs(theme),
     opacity: 0,
   })
   const sphereMesh = new Mesh(new SphereGeometry(6, 12, 12), mat) // sphere radius in pixels
   extraSegmentGroup.add(sphereMesh)
 
   const handleDiv = document.createElement('div')
   handleDiv.classList.add('extra-segment-handle')
-  handleDiv.style.color = `#${getThemeColorForThreeJs(theme).toString(16).padStart(6, '0')}`
+  handleDiv.style.color = `#${getVolumeColorForThreeJs(theme).toString(16).padStart(6, '0')}`
 
   const cssObject = new CSS2DObject(handleDiv)
   cssObject.userData.ignoreColorChange = true

src/lib/theme.ts

@@ -64,21 +64,40 @@ export function getOppositeTheme(theme: Themes) {
  * @param theme
  * @returns { r: number, g: number, b: number, a: number }
  */
-export function getThemeColorForEngine(theme: Themes) {
+export function getVolumeColorForEngine(theme: Themes) {
   const resolvedTheme = getResolvedTheme(theme)
-  const dark = 28 / 255
-  const light = 249 / 255
+  const dark = DARK_BASE_VOLUME_COLOR / 255
+  const light = LIGHT_BASE_VOLUME_COLOR / 255
   return resolvedTheme === Themes.Dark
     ? { r: dark, g: dark, b: dark, a: 1 }
     : { r: light, g: light, b: light, a: 1 }
 }
 
+/**
+ * Color used for the edges of geometry.
+ * @param theme
+ * @returns { r: number, g: number, b: number, a: number }
+ */
+export function getEdgeColorForEngine(theme: Themes) {
+  const resolvedTheme = getResolvedTheme(theme)
+  const dark = DARK_EDGE_COLOR / 255
+  const light = LIGHT_EDGE_COLOR / 255
+  return resolvedTheme === Themes.Dark
+    ? { r: dark, g: dark, b: dark, a: 1 }
+    : { r: light, g: light, b: light, a: 1 }
+}
+
+const DARK_BASE_VOLUME_COLOR = 28
+const LIGHT_BASE_VOLUME_COLOR = 249
+const DARK_EDGE_COLOR = 0
+const LIGHT_EDGE_COLOR = 28
+
 /**
  * ThreeJS uses hex values for colors
  * @param theme
  * @returns
  */
-export function getThemeColorForThreeJs(theme: Themes) {
+export function getVolumeColorForThreeJs(theme: Themes) {
   const resolvedTheme = getResolvedTheme(theme)
   const dark = 0x1c1c1c
   const light = 0xf9f9f9

src/network/connectionManager.ts

@@ -2,8 +2,9 @@ import type { SettingsViaQueryString } from '@src/lib/settings/settingsTypes'
 import { Connection } from '@src/network/connection'
 import {
   darkModeMatcher,
+  getEdgeColorForEngine,
   getOppositeTheme,
-  getThemeColorForEngine,
+  getVolumeColorForEngine,
   Themes,
 } from '@src/lib/theme'
 import { withWebSocketURL } from '@src/lib/withBaseURL'
@@ -421,7 +422,7 @@ export class ConnectionManager extends EventTarget {
       metadata: {
         cmd: {
           type: 'set_background_color',
-          color: getThemeColorForEngine(theme),
+          color: getVolumeColorForEngine(theme),
         },
       },
     })
@@ -430,7 +431,7 @@ export class ConnectionManager extends EventTarget {
       type: 'modeling_cmd_req',
       cmd: {
         type: 'set_background_color',
-        color: getThemeColorForEngine(theme),
+        color: getVolumeColorForEngine(theme),
       },
     })
     EngineDebugger.addLog({
@@ -439,7 +440,7 @@ export class ConnectionManager extends EventTarget {
       metadata: {
         cmd: {
           type: 'set_background_color',
-          color: getThemeColorForEngine(theme),
+          color: getVolumeColorForEngine(theme),
         },
       },
     })
@@ -452,7 +453,7 @@ export class ConnectionManager extends EventTarget {
       metadata: {
         cmd: {
           type: 'set_default_system_properties',
-          color: getThemeColorForEngine(opposingTheme),
+          color: getEdgeColorForEngine(opposingTheme),
         },
       },
     })
@@ -461,7 +462,7 @@ export class ConnectionManager extends EventTarget {
       type: 'modeling_cmd_req',
       cmd: {
         type: 'set_default_system_properties',
-        color: getThemeColorForEngine(opposingTheme),
+        color: getEdgeColorForEngine(opposingTheme),
       },
     })
     EngineDebugger.addLog({
@@ -470,7 +471,7 @@ export class ConnectionManager extends EventTarget {
       metadata: {
         cmd: {
           type: 'set_default_system_properties',
-          color: getThemeColorForEngine(opposingTheme),
+          color: getEdgeColorForEngine(opposingTheme),
         },
       },
     })