From 92fd112da880e066750625156756386bc941f051 Mon Sep 17 00:00:00 2001
From: martinRenou <martin.renou@gmail.com>
Date: Wed, 5 Oct 2022 16:05:16 +0200
Subject: [PATCH] Improve theme handling 3D view and tree view

---
 src/mainview.tsx             | 42 +++++++++++++++++-------------------
 src/panelview/objecttree.tsx | 20 +++++++++++++++--
 2 files changed, 38 insertions(+), 24 deletions(-)

diff --git a/src/mainview.tsx b/src/mainview.tsx
index c1c37dd7..35e04cf1 100644
--- a/src/mainview.tsx
+++ b/src/mainview.tsx
@@ -18,18 +18,10 @@ import {
   WorkerAction
 } from './types';
 
-type THEME_TYPE = 'JupyterLab Dark' | 'JupyterLab Light';
-const DARK_THEME: THEME_TYPE = 'JupyterLab Dark';
-const LIGHT_THEME: THEME_TYPE = 'JupyterLab Light';
-
-const BG_COLOR = {
-  [DARK_THEME]: 'linear-gradient(rgb(0, 0, 42), rgb(82, 87, 110))',
-  [LIGHT_THEME]: 'radial-gradient(#efeded, #8f9091)'
-};
-const GRID_COLOR = {
-  [DARK_THEME]: 0x4f6882,
-  [LIGHT_THEME]: 0x888888
-};
+const DARK_BG_COLOR = 'linear-gradient(rgb(0, 0, 42), rgb(82, 87, 110))';
+const LIGHT_BG_COLOR = 'radial-gradient(#efeded, #8f9091)';
+const DARK_GRID_COLOR = 0x4f6882;
+const LIGHT_GRID_COLOR = 0x888888;
 
 interface IProps {
   context: DocumentRegistry.IContext<JupyterCadModel>;
@@ -38,7 +30,7 @@ interface IProps {
 interface IStates {
   id: string;
   loading: boolean;
-  theme: THEME_TYPE;
+  lightTheme: boolean;
 }
 
 export class MainView extends React.Component<IProps, IStates> {
@@ -54,11 +46,13 @@ export class MainView extends React.Component<IProps, IStates> {
     // this.computedScene = {};
     // this.progressData = { time_step: -1, data: {} };
     this._resizeTimeout = null;
-    const theme = ((window as any).jupyterlabTheme ||
-      LIGHT_THEME) as THEME_TYPE;
+
+    const lightTheme =
+      document.body.getAttribute('data-jp-theme-light') === 'true';
+
     this.state = {
       id: uuid(),
-      theme,
+      lightTheme,
       loading: true
     };
 
@@ -77,11 +71,12 @@ export class MainView extends React.Component<IProps, IStates> {
         this._messageChannel.port2
       );
       this._model.themeChanged.connect((_, arg) => {
-        this.handleThemeChange(arg.newValue as THEME_TYPE);
+        this.handleThemeChange();
       });
       this._model.cameraChanged.connect(this._onCameraChanged);
     });
   }
+
   componentDidMount(): void {
     window.addEventListener('resize', this.handleWindowResize);
     this.generateScene();
@@ -103,9 +98,12 @@ export class MainView extends React.Component<IProps, IStates> {
     });
   }
 
-  handleThemeChange = (newTheme: THEME_TYPE): void => {
-    this.setState(old => ({ ...old, theme: newTheme }));
+  handleThemeChange = (): void => {
+    const lightTheme =
+      document.body.getAttribute('data-jp-theme-light') === 'true';
+    this.setState(old => ({ ...old, lightTheme }));
   };
+
   handleWindowResize = () => {
     clearTimeout(this._resizeTimeout);
     this._resizeTimeout = setTimeout(() => {
@@ -168,8 +166,8 @@ export class MainView extends React.Component<IProps, IStates> {
       this._gridHelper = new THREE.GridHelper(
         size,
         divisions,
-        GRID_COLOR[this.state.theme],
-        GRID_COLOR[this.state.theme]
+        this.state.lightTheme ? LIGHT_GRID_COLOR : DARK_GRID_COLOR,
+        this.state.lightTheme ? LIGHT_GRID_COLOR : DARK_GRID_COLOR
         // 0x888888,
         // 0x888888
       );
@@ -503,7 +501,7 @@ export class MainView extends React.Component<IProps, IStates> {
           style={{
             width: '100%',
             height: 'calc(100%)',
-            background: BG_COLOR[this.state.theme] //"radial-gradient(#efeded, #8f9091)"
+            background: this.state.lightTheme ? LIGHT_BG_COLOR : DARK_BG_COLOR
           }}
         />
       </div>
diff --git a/src/panelview/objecttree.tsx b/src/panelview/objecttree.tsx
index d8ce0967..c4299222 100644
--- a/src/panelview/objecttree.tsx
+++ b/src/panelview/objecttree.tsx
@@ -24,6 +24,7 @@ interface IStates {
   jcadOption?: IDict;
   filePath?: string;
   jcadObject?: IJCadModel;
+  lightTheme: boolean;
 }
 
 interface IProps {
@@ -31,12 +32,18 @@ interface IProps {
   // jcadModel?: JupyterCadModel;
   cpModel: IControlPanelModel;
 }
+
 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()
+      jcadObject: this.props.cpModel.jcadModel?.getAllObject(),
+      lightTheme
     };
     this.props.cpModel.jcadModel?.sharedModelChanged.connect(
       this.sharedJcadModelChanged
@@ -47,6 +54,9 @@ class ObjectTreeReact extends React.Component<IProps, IStates> {
         changed.context.model.sharedModelChanged.connect(
           this.sharedJcadModelChanged
         );
+        changed.context.model.themeChanged.connect((_, arg) => {
+          this.handleThemeChange();
+        });
         this.setState(old => ({
           ...old,
           filePath: changed.context.localPath,
@@ -62,6 +72,12 @@ class ObjectTreeReact extends React.Component<IProps, IStates> {
     });
   }
 
+  handleThemeChange = (): void => {
+    const lightTheme =
+      document.body.getAttribute('data-jp-theme-light') === 'true';
+    this.setState(old => ({ ...old, lightTheme }));
+  };
+
   sharedJcadModelChanged = (_, changed: IJupyterCadDocChange): void => {
     this.setState(old => ({
       ...old,
@@ -118,7 +134,7 @@ class ObjectTreeReact extends React.Component<IProps, IStates> {
       <div className="jpcad-treeview-wrapper">
         <Tree
           nodes={data}
-          theme="light"
+          theme={this.state.lightTheme ? 'light' : 'dark'}
           onSelect={id => {
             if (id && id.length > 0) {
               this.props.cpModel.set('activatedObject', id[0]);