Added support for dark mode (#184)

src/Action.js

@@ -61,15 +61,9 @@ class Action extends Component {
       return getIcon('suggested', altMessage)
     })
 
-    Handlebars.registerHelper('okIcon', label => {
-      return getIcon('done', label)
-    })
-
-    Handlebars.registerHelper('warnIcon', label => {
-      return getIcon('critical', label)
-    })
-
-    Handlebars.registerHelper('securitySetting', (key) => {
+    Handlebars.registerHelper('okIcon', label => getIcon('done', label))
+    Handlebars.registerHelper('warnIcon', label => getIcon('critical', label))
+    Handlebars.registerHelper('securitySetting', key => {
       return new Handlebars.SafeString(
         ReactDOMServer.renderToStaticMarkup(
           <table style={{ width: 'auto' }}>
@@ -110,11 +104,18 @@ class Action extends Component {
       )
     })
   }
-
-  getPlatformAndVersionSpecificFlags (device) {
+  /**
+   * Provides variables to use in the instructions template. The returned keys
+   * can be used in conditionals in instructions.yml
+   * e.g. {{#if mojaveOrLater}}
+   * @param  {String} platform  destructed off of Device
+   * @param  {String} osVersion destructed off of Device
+   * @return {Object}
+   */
+  getPlatformAndVersionSpecificFlags ({ platform, osVersion }) {
     return {
-      mojave: (
-        device.platform === 'darwin' && semver.satisfies(device.osVersion, '>=10.14.0')
+      mojaveOrLater: (
+        platform === 'darwin' && semver.satisfies(osVersion, '>=10.14.0')
       )
     }
   }

src/App.css

@@ -66,6 +66,7 @@ footer {
   background-color: #f3f2f2;
   border-top: 1px solid #e8e8e8;
   width: 100%;
+  transition: background-color .5s linear, border-color .5s linear;
 }
 
 footer button span {
@@ -120,3 +121,11 @@ progress[value]::-webkit-progress-value {
   background-color: #478cc8;
   transition: width .75s ease;
 }
+
+@media (prefers-color-scheme: dark) {
+  footer {
+    color: #ddd;
+    background-color: #222;
+    border-top: 1px solid #333;
+  }
+}

src/Device.css

@@ -6,6 +6,7 @@
   box-sizing: border-box;
   display: inline-block;
 }
+
 .panel.device {
   box-sizing: border-box;
   display: inline-block;
@@ -57,7 +58,8 @@ ul.mac-addresses {
   color: rgba(40,40,40, 0.3);
   opacity: 0.3;
 }
-.device-info-toggle.closed, .show-description.closed {
+.device-info-toggle.closed,
+.show-description.closed, {
   -ms-transform: rotate(-90deg); /* IE 9 */
   -webkit-transform: rotate(-90deg); /* Chrome, Safari, Opera */
   transform: rotate(90deg);
@@ -78,8 +80,16 @@ ul.mac-addresses {
 div.action-list > ul > li {
   border-bottom: 1px solid #eee;
   padding: 5px 0;
+  /* display: flex;
+  justify-content: space-between;
+  align-items: center; */
 }
 
+/* div.action-list > ul > li > span {
+  display: flex;
+  align-items: center;
+} */
+
 li.done, a.show-description {
   color: #aaa;
   transform: rotate(0deg);
@@ -104,6 +114,7 @@ a {
   color: #656464;
   margin-bottom: 5px;
   font-size: 18px;
+  transition: color 1s linear;
 }
 
 div.description,
@@ -245,3 +256,37 @@ a.btn:hover {
   flex-direction: column;
   justify-content: space-between;
 }
+
+.device-info-toggle-closed,
+.show-description.closed {
+  -ms-transform: rotate(-90deg); /* IE 9 */
+  -webkit-transform: rotate(-90deg); /* Chrome, Safari, Opera */
+  transform: rotate(90deg);
+  transition: transform 0.2s ease;
+}
+
+@media (prefers-color-scheme: dark) {
+  a {
+    color: #9fbdf3;
+  }
+  a.show-description {
+    float: right;
+    text-decoration: none;
+    color: #aaa;
+    transform: rotate(0deg);
+    transition: transform 0.1s ease;
+  }
+  .device-wrapper h4 {
+    color: #efefef;
+  }
+  div.action-list > ul > li  {
+    border-bottom: 1px solid #333;
+  }
+  .device-info-toggle-closed,
+  .show-description.closed {
+    -ms-transform: rotate(-90deg); /* IE 9 */
+    -webkit-transform: rotate(-90deg); /* Chrome, Safari, Opera */
+    transform: rotate(90deg);
+    transition: transform 0.2s ease;
+  }
+}

src/Loader.css

@@ -120,3 +120,12 @@
   text-align: left;
   border: 1px solid #efefef;
 }
+
+@media (prefers-color-scheme: dark) {
+  .App.loading,
+  .loader,
+  .loader:before,
+  .loader:after {
+    background-color: #222;
+  }
+}

src/index.css

@@ -2,11 +2,10 @@ body {
   margin: 0;
   padding: 0;
   font-family: sans-serif;
-  border: 1px solid #eee;
-  border-radius: 5px;
   height: 100%;
   background-color: #fff;
   overflow-y: auto;
+  transition: background-color .5s linear;
 }
 
 *:focus {
@@ -167,7 +166,9 @@ nav .right li.close {
   background-color: #FFFFFF;
   border-radius: 3px;
   padding: 20px;
+  transition: background-color .5s linear;
 }
+
 .panel header {
   background-color: #f1f1f1;
   padding: 25px 20px;
@@ -269,3 +270,17 @@ a.nf-button:hover {
 }
 
 ::-webkit-scrollbar { display: none; }
+@media (prefers-color-scheme: dark) {
+  .panel.warning, .panel.critical {
+    color: #fff;
+  }
+  .panel {
+    background-color: #222;
+  }
+}
+
+@media (prefers-color-scheme: dark) {
+  body {
+    background-color: #222;
+  }
+}

src/practices/instructions.en.yaml

@@ -125,7 +125,7 @@ practices:
     directions:
       darwin: |
         1. Choose System Preferences from the Apple menu.
-        {{#if mojave}}
+        {{#if mojaveOrLater}}
         1. Click [Software Update](x-apple.systempreferences:com.apple.preferences.softwareupdate)
         {{else}}
         1. Click [App Store](prefs://com.apple.preferences.appstore).

src/start.js

@@ -15,7 +15,7 @@
  *    - 'download:completed' - update has finished downloading
  */
 import path from 'path'
-import { app, ipcMain, dialog, BrowserWindow, session, Tray, nativeImage } from 'electron'
+import { app, ipcMain, dialog, BrowserWindow, nativeTheme, session, Tray, nativeImage } from 'electron'
 import url from 'url'
 import log from './lib/logger'
 import initMenu from './Menu'