From 0c0e0d09601e128249d586b0dfc8fd774eac9788 Mon Sep 17 00:00:00 2001
From: btzr-io <btzr.io@gmail.com>
Date: Sat, 18 Aug 2018 18:59:14 -0600
Subject: [PATCH] add adaptive theme for dat.gui controls

---
 .../component/viewers/threeViewer/index.jsx   |  7 +-
 src/renderer/scss/all.scss                    |  1 +
 src/renderer/scss/component/_dat-gui.scss     | 89 +++++++++++++++++++
 src/renderer/scss/component/_file-render.scss | 13 ---
 4 files changed, 96 insertions(+), 14 deletions(-)
 create mode 100644 src/renderer/scss/component/_dat-gui.scss

diff --git a/src/renderer/component/viewers/threeViewer/index.jsx b/src/renderer/component/viewers/threeViewer/index.jsx
index 9b9e293ae..020a3b1b7 100644
--- a/src/renderer/component/viewers/threeViewer/index.jsx
+++ b/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"
diff --git a/src/renderer/scss/all.scss b/src/renderer/scss/all.scss
index b8db82c0b..4b9bae942 100644
--- a/src/renderer/scss/all.scss
+++ b/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';
diff --git a/src/renderer/scss/component/_dat-gui.scss b/src/renderer/scss/component/_dat-gui.scss
new file mode 100644
index 000000000..4cc69cdf3
--- /dev/null
+++ b/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;
+  }
+}
diff --git a/src/renderer/scss/component/_file-render.scss b/src/renderer/scss/component/_file-render.scss
index ffbe90b47..42efe940f 100644
--- a/src/renderer/scss/component/_file-render.scss
+++ b/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;
-  }
-}