add adaptive theme for dat.gui controls

src/renderer/component/viewers/threeViewer/index.jsx

@@ -1,6 +1,7 @@
 // @flow
 import * as React from 'react';
 import * as dat from 'dat.gui';
+import classNames from 'classnames';
 import LoadingScreen from 'component/common/loading-screen';
 
 // ThreeJS
@@ -378,16 +379,20 @@ class ThreeViewer extends React.PureComponent<Props, State> {
   }
 
   render() {
+    const { theme } = this.props;
     const { error, isReady, isLoading } = this.state;
     const loadingMessage = __('Loading 3D model.');
     const showViewer = isReady && !error;
     const showLoading = isLoading && !error;
 
+    // Adaptive theme for gui controls
+    const containterClass = classNames('gui-container', { light: theme === 'light' });
+
     return (
       <React.Fragment>
         {error && <LoadingScreen status={error} spinner={false} />}
         {showLoading && <LoadingScreen status={loadingMessage} spinner />}
-        <div ref={this.guiContainer} className="gui-container" />
+        <div ref={this.guiContainer} className={containterClass} />
         <div
           style={{ opacity: showViewer ? 1 : 0 }}
           className="three-viewer file-render__viewer"

src/renderer/scss/all.scss

@@ -28,3 +28,4 @@
 @import 'component/_search.scss';
 @import 'component/_toggle.scss';
 @import 'component/_search.scss';
+@import 'component/_dat-gui.scss';

src/renderer/scss/component/_dat-gui.scss

@@ -0,0 +1,89 @@
+/*
+* dat.gui component
+*/
+
+.gui-container {
+  position: absolute;
+  top: 0;
+  right: 0;
+  z-index: 2;
+
+  .dg.main {
+    padding: 0;
+    margin: 0;
+    overflow: inherit;
+  }
+}
+
+/*
+*  Light theme:
+*  https://github.com/liabru/dat-gui-light-theme
+*/
+
+.gui-container.light {
+  .dg.main.taller-than-window .close-button {
+    border-top: 1px solid #ddd;
+  }
+
+  .dg.main .close-button {
+    background-color: #e8e8e8;
+  }
+
+  .dg.main .close-button:hover {
+    background-color: #ddd;
+  }
+
+  .dg {
+    color: #555;
+    text-shadow: none !important;
+  }
+
+  .dg.main::-webkit-scrollbar {
+    background: #fafafa;
+  }
+
+  .dg.main::-webkit-scrollbar-thumb {
+    background: #bbb;
+  }
+
+  .dg li:not(.folder) {
+    background: #fafafa;
+    border-bottom: 1px solid #ddd;
+  }
+
+  .dg li.save-row .button {
+    text-shadow: none !important;
+  }
+
+  .dg li.title {
+    background: #e8e8e8
+      url(data:image/gif;base64,R0lGODlhBQAFAJEAAP////Pz8////////yH5BAEAAAIALAAAAAAFAAUAAAIIlI+hKgFxoCgAOw==)
+      6px 10px no-repeat;
+  }
+
+  .dg .cr.function:hover,
+  .dg .cr.boolean:hover {
+    background: #fff;
+  }
+
+  .dg .c input[type='text'] {
+    background: #e9e9e9;
+  }
+
+  .dg .c input[type='text']:hover {
+    background: #eee;
+  }
+
+  .dg .c input[type='text']:focus {
+    background: #eee;
+    color: #555;
+  }
+
+  .dg .c .slider {
+    background: #e9e9e9;
+  }
+
+  .dg .c .slider:hover {
+    background: #eee;
+  }
+}

src/renderer/scss/component/_file-render.scss

@@ -85,16 +85,3 @@
     display: none;
   }
 }
-
-.gui-container {
-  position: absolute;
-  top: 0;
-  right: 0;
-  z-index: 2;
-
-  .dg.main {
-    padding: 0;
-    margin: 0;
-    overflow: inherit;
-  }
-}