Fix handling of theme change (#505)

Author: arjxn-py

packages/base/src/3dview/mainview.tsx

@@ -25,7 +25,7 @@ import { STLLoader } from 'three/examples/jsm/loaders/STLLoader';
 import { ViewHelper } from 'three/examples/jsm/helpers/ViewHelper';
 
 import { FloatingAnnotation } from '../annotation';
-import { getCSSVariableColor, isLightTheme, throttle } from '../tools';
+import { getCSSVariableColor, throttle } from '../tools';
 import {
   AxeHelper,
   CameraSettings,
@@ -63,7 +63,6 @@ interface IStates {
   id: string; // ID of the component, it is used to identify which component
   //is the source of awareness updates.
   loading: boolean;
-  lightTheme: boolean;
   remoteUser?: User.IIdentity | null;
   annotations: IDict<IAnnotation>;
   firstLoad: boolean;
@@ -107,7 +106,6 @@ export class MainView extends React.Component<IProps, IStates> {
 
     this.state = {
       id: this._mainViewModel.id,
-      lightTheme: isLightTheme(),
       loading: true,
       annotations: {},
       firstLoad: true,
@@ -1435,15 +1433,11 @@ export class MainView extends React.Component<IProps, IStates> {
   }
 
   private _handleThemeChange = (): void => {
-    const lightTheme = isLightTheme();
-
     DEFAULT_MESH_COLOR.set(getCSSVariableColor(DEFAULT_MESH_COLOR_CSS));
     DEFAULT_EDGE_COLOR.set(getCSSVariableColor(DEFAULT_EDGE_COLOR_CSS));
     BOUNDING_BOX_COLOR.set(getCSSVariableColor(BOUNDING_BOX_COLOR_CSS));
 
     this._clippingPlaneMeshControl.material.color = DEFAULT_MESH_COLOR;
-
-    this.setState(old => ({ ...old, lightTheme }));
   };
 
   private _handleWindowResize = (): void => {

packages/base/src/panelview/objecttree.tsx

@@ -85,7 +85,6 @@ interface IStates {
   filePath?: string;
   jcadObject?: IJCadModel;
   options?: JSONObject;
-  lightTheme: boolean;
   selectedNodes: string[];
   clientId: number | null; // ID of the yjs client
   id: string; // ID of the component, it is used to identify which component
@@ -142,13 +141,9 @@ class ObjectTreeReact extends React.Component<IProps, IStates> {
   constructor(props: IProps) {
     super(props);
 
-    const lightTheme =
-      document.body.getAttribute('data-jp-theme-light') === 'true';
-
     this.state = {
       filePath: this.props.cpModel.filePath,
       jcadObject: this.props.cpModel.jcadModel?.getAllObject(),
-      lightTheme,
       selectedNodes: [],
       clientId: null,
       id: uuid(),
@@ -160,13 +155,11 @@ class ObjectTreeReact extends React.Component<IProps, IStates> {
     this.props.cpModel.documentChanged.connect((_, document) => {
       if (document) {
         this.props.cpModel.disconnect(this._sharedJcadModelChanged);
-        this.props.cpModel.disconnect(this._handleThemeChange);
         this.props.cpModel.disconnect(this._onClientSharedStateChanged);
 
         document.context.model.sharedObjectsChanged.connect(
           this._sharedJcadModelChanged
         );
-        document.context.model.themeChanged.connect(this._handleThemeChange);
         document.context.model.clientStateChanged.connect(
           this._onClientSharedStateChanged
         );
@@ -231,12 +224,6 @@ class ObjectTreeReact extends React.Component<IProps, IStates> {
     }
   }
 
-  private _handleThemeChange = (): void => {
-    const lightTheme =
-      document.body.getAttribute('data-jp-theme-light') === 'true';
-    this.setState(old => ({ ...old, lightTheme }));
-  };
-
   handleNodeClick = (objectId: string) => {
     const object = this.getObjectFromName(objectId);
 

packages/base/src/sketcher/sketcherwidget.tsx

@@ -526,6 +526,5 @@ export class SketcherReactWidget extends React.Component<IProps, IState> {
   private _divRef = React.createRef<HTMLDivElement>();
   private _canvasRef = React.createRef<HTMLCanvasElement>();
   private _panZoom: PanZoom;
-  // private _lightTheme =
   //   document.body.getAttribute('data-jp-theme-light') === 'true';
 }

packages/base/src/tools.ts

@@ -270,7 +270,3 @@ export async function requestAPI<T>(
 
   return data;
 }
-
-export function isLightTheme(): boolean {
-  return document.body.getAttribute('data-jp-theme-light') === 'true';
-}