3D color dependent on the theme

Author: martinRenou

packages/jupytercad-app/style/base.css

@@ -1,11 +1,13 @@
 body[data-jp-theme-light='false'] {
+  --jp-brand-color0: #0fa8b0 !important;
   --jp-brand-color1: #0fa8b0 !important;
   --jp-inverse-layout-color3: #0fa8b0 !important;
   --jp-accept-color-normal: #0fa8b0 !important;
   --jc-brand-color: #032122 !important;
 }
 
 body[data-jp-theme-light='true'] {
+  --jp-brand-color0: #09777c !important;
   --jp-brand-color1: #09777c !important;
   --jp-inverse-layout-color3: #09777c !important;
   --jp-accept-color-normal: #09777c !important;

packages/jupytercad-extension/src/mainview.tsx

@@ -31,16 +31,18 @@ import {
   WorkerAction
 } from './types';
 import { FloatingAnnotation } from './annotation/view';
-import { throttle } from './tools';
+import { getCSSVariableColor, throttle } from './tools';
 import { Vector2 } from 'three';
 
 // Apply the BVH extension
 THREE.BufferGeometry.prototype.computeBoundsTree = computeBoundsTree;
 THREE.BufferGeometry.prototype.disposeBoundsTree = disposeBoundsTree;
 THREE.Mesh.prototype.raycast = acceleratedRaycast;
 
-const DEFAULT_MESH_COLOR = new THREE.Color('#434442');
-const SELECTED_MESH_COLOR = new THREE.Color('#AB5118');
+const DEFAULT_MESH_COLOR = () => new THREE.Color(getCSSVariableColor('--jp-inverse-layout-color4'));
+const DEFAULT_EDGE_COLOR = () => new THREE.Color(getCSSVariableColor('--jp-inverse-layout-color2'));
+const SELECTED_MESH_COLOR = () => new THREE.Color(getCSSVariableColor('--jp-brand-color0'));
+
 
 export type BasicMesh = THREE.Mesh<
   THREE.BufferGeometry,
@@ -491,7 +493,7 @@ export class MainView extends React.Component<IProps, IStates> {
     if (selection) {
       // Deselect old selection
       if (this._selectedMesh) {
-        let originalColor = DEFAULT_MESH_COLOR;
+        let originalColor = DEFAULT_MESH_COLOR();
         if (
           guidata &&
           guidata[this._selectedMesh.name] &&
@@ -517,7 +519,7 @@ export class MainView extends React.Component<IProps, IStates> {
       }
 
       if (this._selectedMesh) {
-        this._selectedMesh.material.color = SELECTED_MESH_COLOR;
+        this._selectedMesh.material.color = SELECTED_MESH_COLOR();
         this._model.syncSelectedObject(this._selectedMesh.name, this.state.id);
       } else {
         this._model.syncSelectedObject(undefined, this.state.id);
@@ -568,7 +570,7 @@ export class MainView extends React.Component<IProps, IStates> {
 
       const objdata = guidata ? guidata?.[objName] : null;
 
-      let color = DEFAULT_MESH_COLOR;
+      let color = DEFAULT_MESH_COLOR();
       let visible = true;
       if (objdata) {
         if (Object.prototype.hasOwnProperty.call(objdata, 'color')) {
@@ -618,12 +620,12 @@ export class MainView extends React.Component<IProps, IStates> {
 
       if (this._selectedMesh?.name === objName) {
         this._selectedMesh = mesh;
-        mesh.material.color = SELECTED_MESH_COLOR;
+        mesh.material.color = SELECTED_MESH_COLOR();
       }
 
       const edgeMaterial = new THREE.LineBasicMaterial({
         linewidth: 5,
-        color: 'black'
+        color: DEFAULT_EDGE_COLOR()
       });
       edgeList.forEach(edge => {
         const edgeVertices = new THREE.Float32BufferAttribute(
@@ -732,7 +734,7 @@ export class MainView extends React.Component<IProps, IStates> {
 
     if (selected) {
       this._selectedMesh = selected as BasicMesh;
-      this._selectedMesh.material.color = SELECTED_MESH_COLOR;
+      this._selectedMesh.material.color = SELECTED_MESH_COLOR();
     }
   }
 
@@ -741,7 +743,7 @@ export class MainView extends React.Component<IProps, IStates> {
       return;
     }
 
-    let originalColor = DEFAULT_MESH_COLOR;
+    let originalColor = DEFAULT_MESH_COLOR();
     const guidata = this._model.sharedModel.getOption('guidata');
     if (
       guidata &&
@@ -986,7 +988,7 @@ export class MainView extends React.Component<IProps, IStates> {
 
         // Draw lines
         const material = new THREE.LineBasicMaterial({
-          color: 'black',
+          color: DEFAULT_EDGE_COLOR(),
           linewidth: 2
         });
         const geometry = new THREE.BufferGeometry().setFromPoints([

packages/jupytercad-extension/src/tools.ts

@@ -1,3 +1,5 @@
+const d3Color: any = require('d3-color');
+
 import { LabIcon } from '@jupyterlab/ui-components';
 
 import jvControlLight from '../style/icon/jvcontrol.svg';
@@ -196,3 +198,9 @@ export function nearest(n: number, tol: number): number {
     return n;
   }
 }
+
+export function getCSSVariableColor(name: string): string {
+  const color = window.getComputedStyle(document.body).getPropertyValue(name) || '#ffffff';
+
+  return d3Color.rgb(color).formatHex();
+}