Update stylesheets and added darkMode variable and toggle.

2 files changed, 14 insertions, 2 deletions

diff --git a/src/containers/layout/AppLayoutContainer.js b/src/containers/layout/AppLayoutContainer.js
index 9212f809f..8b23e6984 100644
--- a/src/containers/layout/AppLayoutContainer.js
+++ b/src/containers/layout/AppLayoutContainer.js
@@ -32,6 +32,7 @@ export default class AppLayoutContainer extends Component {
       settings,
       globalError,
       requests,
+      darkMode,
     } = this.props.stores;
 
     const {
@@ -121,6 +122,7 @@ export default class AppLayoutContainer extends Component {
         areRequiredRequestsSuccessful={requests.areRequiredRequestsSuccessful}
         retryRequiredRequests={retryRequiredRequests}
         areRequiredRequestsLoading={requests.areRequiredRequestsLoading}
+        darkMode={settings.all.app.darkMode}
       >
         {React.Children.count(children) > 0 ? children : null}
       </AppLayout>
diff --git a/src/containers/settings/EditSettingsScreen.js b/src/containers/settings/EditSettingsScreen.js
index 018ce663f..4e77a9c97 100644
--- a/src/containers/settings/EditSettingsScreen.js
+++ b/src/containers/settings/EditSettingsScreen.js
@@ -39,6 +39,10 @@ const messages = defineMessages({
     id: 'settings.app.form.language',
     defaultMessage: '!!!Language',
   },
+  darkMode: {
+    id: 'settings.app.form.darkMode',
+    defaultMessage: '!!!Dark Mode',
+  },
   showDisabledServices: {
     id: 'settings.app.form.showDisabledServices',
     defaultMessage: '!!!Display disabled services tabs',
@@ -84,17 +88,18 @@ export default class EditSettingsScreen extends Component {
     });
 
     settings.update({
-      type: 'app',
+      type: "app",
       data: {
         runInBackground: settingsData.runInBackground,
         enableSystemTray: settingsData.enableSystemTray,
         minimizeToSystemTray: settingsData.minimizeToSystemTray,
         enableGPUAcceleration: settingsData.enableGPUAcceleration,
         showDisabledServices: settingsData.showDisabledServices,
+        darkMode: settingsData.darkMode,
         showMessageBadgeWhenMuted: settingsData.showMessageBadgeWhenMuted,
         enableSpellchecking: settingsData.enableSpellchecking,
         beta: settingsData.beta, // we need this info in the main process as well
-        locale: settingsData.locale, // we need this info in the main process as well
+        locale: settingsData.locale // we need this info in the main process as well
       },
     });
 
@@ -160,6 +165,11 @@ export default class EditSettingsScreen extends Component {
           value: settings.all.app.enableSpellchecking,
           default: DEFAULT_APP_SETTINGS.enableSpellchecking,
         },
+        darkMode: {
+          label: intl.formatMessage(messages.darkMode),
+          value: settings.all.app.darkMode,
+          default: DEFAULT_APP_SETTINGS.darkMode,
+        },
         enableGPUAcceleration: {
           label: intl.formatMessage(messages.enableGPUAcceleration),
           value: settings.all.app.enableGPUAcceleration,