Update stylesheets and added darkMode variable and toggle.

src/components/auth/AuthLayout.js

@@ -20,6 +20,7 @@ export default class AuthLayout extends Component {
     isAPIHealthy: PropTypes.bool.isRequired,
     retryHealthCheck: PropTypes.func.isRequired,
     isHealthCheckLoading: PropTypes.bool.isRequired,
+    darkMode: PropTypes.bool.isRequired
   };
 
   static contextTypes = {
@@ -35,11 +36,12 @@ export default class AuthLayout extends Component {
       isAPIHealthy,
       retryHealthCheck,
       isHealthCheckLoading,
+      darkMode
     } = this.props;
     const { intl } = this.context;
 
     return (
-      <div className="auth">
+      <div className={"auth" + (darkMode ? 'theme__dark' : '')}>
         {!isOnline && (
           <InfoBar
             type="warning"

src/components/layout/AppLayout.js

@@ -58,6 +58,7 @@ export default class AppLayout extends Component {
     areRequiredRequestsSuccessful: PropTypes.bool.isRequired,
     retryRequiredRequests: PropTypes.func.isRequired,
     areRequiredRequestsLoading: PropTypes.bool.isRequired,
+    darkMode: PropTypes.bool.isRequired
   };
 
   static defaultProps = {
@@ -85,12 +86,13 @@ export default class AppLayout extends Component {
       areRequiredRequestsSuccessful,
       retryRequiredRequests,
       areRequiredRequestsLoading,
+      darkMode
     } = this.props;
 
     const { intl } = this.context;
 
     return (
-      <div>
+      <div className={(darkMode ? 'theme__dark' : '')}>
         <div className="app">
           {isWindows && !isFullScreen && <TitleBar menu={window.franz.menu.template} icon={'assets/images/logo.svg'} />}
           <div className="app__content">

src/components/settings/settings/EditSettingsForm.js

@@ -161,6 +161,7 @@ export default class EditSettingsForm extends Component {
             <h2 id="apperance">{intl.formatMessage(messages.headlineAppearance)}</h2>
             <Toggle field={form.$('showDisabledServices')} />
             <Toggle field={form.$('showMessageBadgeWhenMuted')} />
+            <Toggle field={form.$('darkMode')} />
 
             {/* Language */}
             <h2 id="language">{intl.formatMessage(messages.headlineLanguage)}</h2>

src/config.js

@@ -17,6 +17,7 @@ export const DEFAULT_APP_SETTINGS = {
   showDisabledServices: true,
   showMessageBadgeWhenMuted: true,
   enableSpellchecking: true,
+  darkMode: false,
   locale: '',
   fallbackLocale: 'en-US',
   beta: false,

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>

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,

src/i18n/locales/en-US.json

@@ -158,6 +158,7 @@
   "settings.app.form.autoLaunchOnStart": "Launch Franz on start",
   "settings.app.form.autoLaunchInBackground": "Open in background",
   "settings.app.form.enableSystemTray": "Show Franz in system tray",
+  "settings.app.form.darkMode": "Join the Dark Side",
   "settings.app.form.minimizeToSystemTray": "Minimize Franz to system tray",
   "settings.app.form.enableMenuBar": "Show Franz in Menu Bar",
   "settings.app.form.hideDockIcon": "Hide Franz icon in Dock",

src/index.js

@@ -82,7 +82,8 @@ const createWindow = () => {
     minHeight: 500,
     titleBarStyle: isMac ? 'hidden' : '',
     frame: isLinux,
-    backgroundColor: '#3498db',
+    // backgroundColor: '#3498db',
+    backgroundColor: '#1E1E1E',
   });
 
   // Initialize System Tray

src/styles/animations.scss

@@ -1,49 +1,41 @@
 // FadeIn
-.fadeIn-appear {
-  opacity: 0.01;
-}
+.fadeIn-appear { opacity: .01; }
 
 .fadeIn-appear.fadeIn-appear-active {
   opacity: 1;
-  transition: opacity 0.5s ease-out;
+  transition: opacity .5s ease-out;
 }
 
 .fadeIn-enter {
-  opacity: 0.01;
-  transition: opacity 0.5s ease-out;
+  opacity: .01;
+  transition: opacity .5s ease-out;
 }
 
-.fadeIn-leave {
-  opacity: 1;
-}
+.fadeIn-leave { opacity: 1; }
 
 .fadeIn-leave.fadeIn-leave-active {
-  opacity: 0.01;
+  opacity: .01;
   transition: opacity 300ms ease-in;
 }
 
 // FadeIn Fast
-.fadeIn-fast-appear {
-  opacity: 0.01;
-}
+.fadeIn-fast-appear { opacity: .01; }
 
 .fadeIn-fast-appear.fadeIn-fast-appear-active {
   opacity: 1;
-  transition: opacity 0.25s ease-out;
+  transition: opacity .25s ease-out;
 }
 
 .fadeIn-fast-enter {
-  opacity: 0.01;
-  transition: opacity 0.25s ease-out;
+  opacity: .01;
+  transition: opacity .25s ease-out;
 }
 
-.fadeIn-fast-leave {
-  opacity: 1;
-}
+.fadeIn-fast-leave { opacity: 1; }
 
 .fadeIn-fast-leave.fadeIn-fast-leave-active {
-  opacity: 0.01;
-  transition: opacity 0.25s ease-in;
+  opacity: .01;
+  transition: opacity .25s ease-in;
 }
 
 // Slide down
@@ -54,37 +46,35 @@
 
 .slideDown-appear.slideDown-appear-active {
   max-height: 500px;
-  transition: max-height 0.5s ease-out;
+  transition: max-height .5s ease-out;
 }
 
 .slideDown-enter {
   max-height: 0;
-  transition: max-height 0.5s ease-out;
+  transition: max-height .5s ease-out;
 }
 
 // Slide up
 .slideUp-appear {
-  transform: translateY(20px);
   opacity: 0;
+  transform: translateY(20px);
 }
 
 .slideUp-appear.slideUp-appear-active {
-  transform: translateY(0px);
   opacity: 1;
-  transition: all 0.3s ease-out;
+  transform: translateY(0px);
+  transition: all .3s ease-out;
 }
 
 .slideUp-enter {
-  transform: translateY(20px);
   opacity: 0;
-  transition: all 0.3s ease-out;
+  transform: translateY(20px);
+  transition: all .3s ease-out;
 }
 
-.slideUp-leave {
-  opacity: 1;
-}
+.slideUp-leave { opacity: 1; }
 
 .slideUp-leave.slideUp-leave-active {
-  opacity: 0.01;
+  opacity: .01;
   transition: opacity 300ms ease-in;
 }