Dark Mode 🎉 (#644)

* Add dark mode styles to the preferences window * Add dark mode to exports window * Add vibrancy to the editor * Aadd dark mode support to the about window * Add dark mode support to the config page * Add dark mode support to the cropper * Update yarn lock * Small fixes and make kap-blue a bit lighter for dark mode * Add dark mode version to the editor slider * Fix color * Editor style updates * Preferences updates * Style config window * Give the cropper an initial size (#671) * Fix editor controls (#683) * Fix record button dark mode colors * Fix advanced controls styles * Enable scroll bar flag * Fix settings colors * Switch the link color in the about windows * Fix config button color
wulkano · Jul 8, 2019 · c0f357a · c0f357a · hubConnect · Jul 8, 2019
1 parent 83b774d
commit c0f357a
Show file tree

Hide file tree

Showing 35 changed files with 388 additions and 115 deletions.
diff --git a/main/editor.js b/main/editor.js
@@ -38,12 +38,13 @@ const openEditorWindow = async (filePath, {recordedFps, isNewRecording, original
     minHeight: MIN_WINDOW_HEIGHT,
     width: MIN_VIDEO_WIDTH,
     height: MIN_WINDOW_HEIGHT,
-    frame: false,
     webPreferences: {
       nodeIntegration: true,
       webSecurity: !is.development // Disable webSecurity in dev to load video over file:// protocol while serving over insecure http, this is not needed in production where we use file:// protocol for html serving.
     },
+    frame: false,
     transparent: true,
+    vibrancy: 'dark',
     show: false
   });
 
@@ -68,12 +69,14 @@ const openEditorWindow = async (filePath, {recordedFps, isNewRecording, original
 
       if (buttonIndex === 1) {
         event.preventDefault();
-      } else {
-        editors.delete(filePath);
       }
     });
   }
 
+  editorWindow.on('closed', () => {
+    editors.delete(filePath);
+  });
+
   editorWindow.on('blur', () => {
     editorEmitter.emit('blur');
     ipc.callRenderer(editorWindow, 'blur');

diff --git a/main/exports.js b/main/exports.js
@@ -20,6 +20,9 @@ const openExportsWindow = async () => {
       fullscreenable: false,
       titleBarStyle: 'hiddenInset',
       show: false,
+      frame: false,
+      transparent: true,
+      vibrancy: 'ultra-dark',
       webPreferences: {
         nodeIntegration: true
       }

diff --git a/main/index.js b/main/index.js
@@ -21,6 +21,8 @@ require('./utils/sentry');
 
 const filesToOpen = [];
 
+app.commandLine.appendSwitch('--enable-features', 'OverlayScrollbar');
+
 app.on('open-file', (event, path) => {
   event.preventDefault();
 

diff --git a/main/preferences.js b/main/preferences.js
@@ -29,6 +29,9 @@ const openPrefsWindow = async options => {
     fullscreenable: false,
     titleBarStyle: 'hiddenInset',
     show: false,
+    frame: false,
+    transparent: true,
+    vibrancy: 'ultra-dark',
     webPreferences: {
       nodeIntegration: true
     }

diff --git a/renderer/components/action-bar/controls/advanced.js b/renderer/components/action-bar/controls/advanced.js
@@ -35,8 +35,9 @@ const advancedStyles = css`
 
 const {className: keyboardInputClass, styles: keyboardInputStyles} = css.resolve`
   height: 32px;
-  border: 1px solid #ddd;
-  background: white;
+  border: 1px solid var(--input-border-color);
+  background: var(--input-background-color);
+  color: var(--title-color);
   text-align: left;
   font-size: 12px;
   transition: border 0.12s ease-in-out;
@@ -48,7 +49,11 @@ const {className: keyboardInputClass, styles: keyboardInputStyles} = css.resolve
 
   :focus {
     outline: none;
-    border: 1px solid #007aff;
+    border: 1px solid var(--input-focus-border-color);
+  }
+
+  :hover {
+    border-color: var(--input-hover-border-color);
   }
 `;
 
@@ -118,7 +123,9 @@ class Left extends React.Component {
           }
 
           .select {
-            border: 1px solid #dbdbdb;
+            border: 1px solid var(--input-border-color);
+            background: var(--input-background-color);
+            color: var(--title-color);
             border-radius: 4px;
             font-size: 0.7rem;
             width: 96px;
@@ -133,7 +140,7 @@ class Left extends React.Component {
 
           .select:focus {
             outline: none;
-            border: 1px solid #007aff;
+            border: 1px solid var(--input-focus-border-color);
           }
 
           .select span {
@@ -143,22 +150,22 @@ class Left extends React.Component {
           }
 
           .select:hover {
-            border-color: #ccc;
+            border-color: var(--input-hover-border-color);
           }
 
           .link {
             width: 32px;
             height: 32px;
             padding: 3px 3px;
             box-sizing: border-box;
-            background: ${ratioLocked ? '#f7f7f7' : 'transparent'};
-            border: 1px solid #dbdbdb;
+            background: ${ratioLocked ? 'var(--button-active-color)' : 'var(--cropper-button-background-color)'};
+            border: 1px solid var(--input-border-color);
             border-radius: 4px;
           }
 
           .link:focus {
             outline: none;
-            border: 1px solid #007aff;
+            border: 1px solid var(--input-focus-border-color);
           }
         `}</style>
       </div>
@@ -283,15 +290,16 @@ class Right extends React.Component {
             width: 32px;
             height: 32px;
             padding: 3px 3px;
+            background: var(--cropper-button-background-color);
             box-sizing: border-box;
-            border: 1px solid #dbdbdb;
+            border: 1px solid var(--input-border-color);
             border-radius: 4px;
             margin-right: 8px;
           }
 
           .swap:focus {
             outline: none;
-            border: 1px solid #007aff;
+            border: 1px solid var(--input-focus-border-color);
           }
         `}</style>
       </div>

diff --git a/renderer/components/action-bar/index.js b/renderer/components/action-bar/index.js
@@ -57,9 +57,10 @@ class ActionBar extends React.Component {
               position: fixed;
               height: ${height}px;
               width: ${width}px;
-              background: white;
+              background: var(--action-bar-background);
+              border: var(--action-bar-border);
               border-radius: 4px;
-              box-shadow: 0 20px 40px 0 rgba(0, 0, 0, .2);
+              box-shadow: var(--action-bar-box-shadow);
               z-index: 10;
               top: ${y}px;
               left: ${x}px;

diff --git a/renderer/components/action-bar/record-button.js b/renderer/components/action-bar/record-button.js
@@ -129,8 +129,8 @@ class RecordButton extends React.Component {
               height: 48px;
               padding: 8px;
               border-radius: 50%;
-              background: #ff6059 radial-gradient(ellipse 100% 0% at 50% 0%, #ff6159 0%, #ff5f52 50%, #ff3a30 100%);
-              border: 2px solid #ff3b30;
+              background: var(--record-button-background);
+              border: 2px solid var(--record-button-border-color);
               display: flex;
               align-items: center;
               justify-content: center;
@@ -142,22 +142,23 @@ class RecordButton extends React.Component {
               width: 24px;
               height: 24px;
               border-radius: 50%;
-              background: #fff;
+              background: var(--record-button-inner-background${cropperExists ? '-cropper' : ''});
+              ${cropperExists ? '' : 'border: var(--record-button-inner-border-width) solid var(--record-button-inner-border);'}
               box-sizing: border-box;
             }
 
             .fill {
               width: 20px;
               height: 20px;
               border-radius: 50%;
-              background: #ff6059 radial-gradient(ellipse 100% 0% at 50% 0%, #ff6159 0%, #ff5f52 50%, #ff3a30 100%);
+              background: var(--record-button-fill-background);
               margin: 2px;
             }
 
             .ripple {
               box-sizing: border-box;
               border-radius: 50%;
-              border: 1px solid #ff5e57;
+              border: 1px solid var(--record-button-ripple-color);
               background: transparent;
               position: absolute;
               width: 100%;
@@ -173,16 +174,17 @@ class RecordButton extends React.Component {
             }
 
             .container.cropper-exists:focus .outer {
-              background: #fff;
+              border: 2px solid var(--record-button-focus-outter-border);
+              background: var(--record-button-focus-outter-background);
             }
 
             .container.cropper-exists:focus .inner {
-              border: 2px solid #ff3b30;
-              background: radial-gradient(ellipse 100% 0% at 50% 0%, #ff6159 0%, #ff5f52 50%, #ff3a30 100%);
+              border-color: var(--record-button-border-color);
+              background: var(--record-button-focus-background${cropperExists ? '-cropper' : ''});
             }
 
             .container.cropper-exists:focus .fill {
-              background: #fff;
+              background: var(--record-button-fill-background);
             }
 
             @keyframes ripple {

diff --git a/renderer/components/config/index.js b/renderer/components/config/index.js
@@ -91,7 +91,7 @@ class Config extends React.Component {
             justify-content: center;
             padding-bottom: 2px;
             font-size: 1.2rem;
-            color: #007aff;
+            color: var(--kap);
             font-weight: 500;
             width: 64px;
           }
@@ -101,7 +101,7 @@ class Config extends React.Component {
           }
 
           .service-nav .selected {
-            border-bottom: 2px solid #007aff;
+            border-bottom: 2px solid var(--kap);
             padding-bottom: 0;
           }
 
@@ -131,7 +131,7 @@ class Config extends React.Component {
 
           footer .fade {
             position: absolute;
-            background: linear-gradient(-180deg, rgba(255,255,255,0) 0%, #fff 100%);
+            background: linear-gradient(-180deg, rgba(255,255,255,0) 0%, var(--background-color) 100%);
             width: 100%;
             height: 16px;
             top: 0;
@@ -142,14 +142,15 @@ class Config extends React.Component {
             height: 32px;
             line-height: 16px;
             margin: 0 16px 16px 16px;
-            background: #007aff;
+            background: var(--button-color);
             border-radius: 3px;
             color: #fff;
             display: flex;
             align-items: center;
             justify-content: center;
             flex: 1;
             outline: none;
+            border: none;
           }
         `}</style>
       </div>

diff --git a/renderer/components/config/tab.js b/renderer/components/config/tab.js
@@ -16,7 +16,9 @@ const ConfigInput = ({name, type, schema, value, onChange, hasErrors}) => {
           input {
             outline: none;
             width: 100%;
-            border: 1px solid #ddd;
+            border: 1px solid var(--input-border-color);
+            background: var(--input-background-color);
+            color: var(--title-color);
             border-radius: 3px;
             box-sizing: border-box;
             height: 32px;
@@ -25,6 +27,7 @@ const ConfigInput = ({name, type, schema, value, onChange, hasErrors}) => {
             font-size: 12px;
             margin-top: 16px;
             outline: none;
+            box-shadow: var(--input-shadow);
           }
 
           .has-errors {
@@ -33,7 +36,7 @@ const ConfigInput = ({name, type, schema, value, onChange, hasErrors}) => {
           }
 
           input:focus {
-            border-color: #007aff;
+            border-color: var(--kap);
           }
 
           div {
@@ -102,10 +105,10 @@ class Tab extends React.Component {
           })
         }
         <Item subtitle="Open config file" onClick={openConfig}>
-          <div className="icon-container"><OpenConfigIcon fill="#007aff" hoverFill="#007aff" onClick={openConfig}/></div>
+          <div className="icon-container"><OpenConfigIcon fill="var(--kap)" hoverFill="var(--kap)" onClick={openConfig}/></div>
         </Item>
         <Item last subtitle="View plugin on GitHub" onClick={viewOnGithub}>
-          <div className="icon-container"><OpenOnGithubIcon size="20px" fill="#007aff" hoverFill="#007aff" onClick={viewOnGithub}/></div>
+          <div className="icon-container"><OpenOnGithubIcon size="20px" fill="var(--kap)" hoverFill="var(--kap)" onClick={viewOnGithub}/></div>
         </Item>
         <style jsx>{`
           .container {

diff --git a/renderer/components/editor/options/left.js b/renderer/components/editor/options/left.js
@@ -7,7 +7,7 @@ import Slider from './slider';
 
 const {className: keyboardInputClass, styles: keyboardInputStyles} = css.resolve`
   height: 24px;
-  background: hsla(0, 0%, 100%, 0.1);
+  background: rgba(255, 255, 255, 0.1);
   text-align: center;
   font-size: 12px;
   box-sizing: border-box;
@@ -17,6 +17,7 @@ const {className: keyboardInputClass, styles: keyboardInputStyles} = css.resolve
   border-top-left-radius: 4px;
   width: 48px;
   color: white;
+  box-shadow: inset 0px 1px 0px 0px rgba(255, 255, 255, 0.04), 0px 1px 2px 0px rgba(0, 0, 0, 0.2);
 
   input + input {
     border-bottom-left-radius: 0;

diff --git a/renderer/components/editor/options/right.js b/renderer/components/editor/options/right.js
@@ -55,14 +55,15 @@ class RightOptions extends React.Component {
 
           button {
             padding: 4px 8px;
-            background: hsla(0, 0%, 100%, 0.1);
+            background: rgba(255, 255, 255, 0.1);
             font-size: 12px;
             color: white;
             height: 24px;
             border-radius: 4px;
             text-align: center;
             width: 72px;
             border: none;
+            box-shadow: inset 0px 1px 0px 0px rgba(255, 255, 255, 0.04), 0px 1px 2px 0px rgba(0, 0, 0, 0.2);
           }
 
           button:hover,

diff --git a/renderer/components/editor/options/select.js b/renderer/components/editor/options/select.js
@@ -47,10 +47,11 @@ class Select extends React.Component {
             left: 0;
             width: 100%;
             height: 100%;
-            background: hsla(0, 0%, 100%, 0.1);
+            background: rgba(255, 255, 255, 0.1);
             border: none;
             outline: none;
             color: transparent;
+            box-shadow: inset 0px 1px 0px 0px rgba(255, 255, 255, 0.04), 0px 1px 2px 0px rgba(0, 0, 0, 0.2);
           }
 
           select:hover,