feat(App): Add option to enable dark mode for supported services

1 files changed, 11 insertions, 0 deletions

diff --git a/src/containers/settings/EditServiceScreen.js b/src/containers/settings/EditServiceScreen.js
index 1fc6bc85e..e69c2c2a8 100644
--- a/src/containers/settings/EditServiceScreen.js
+++ b/src/containers/settings/EditServiceScreen.js
@@ -6,6 +6,7 @@ import { defineMessages, intlShape } from 'react-intl';
 import UserStore from '../../stores/UserStore';
 import RecipesStore from '../../stores/RecipesStore';
 import ServicesStore from '../../stores/ServicesStore';
+import SettingsStore from '../../stores/SettingsStore';
 import Form from '../../lib/Form';
 import { gaPage } from '../../lib/analytics';
 
@@ -50,6 +51,10 @@ const messages = defineMessages({
     id: 'settings.service.form.icon',
     defaultMessage: '!!!Custom icon',
   },
+  enableDarkMode: {
+    id: 'settings.service.form.enableDarkMode',
+    defaultMessage: '!!!Enable Dark Mode',
+  },
 });
 
 export default @inject('stores', 'actions') @observer class EditServiceScreen extends Component {
@@ -111,6 +116,11 @@ export default @inject('stores', 'actions') @observer class EditServiceScreen ex
           default: null,
           type: 'file',
         },
+        isDarkModeEnabled: {
+          label: intl.formatMessage(messages.enableDarkMode),
+          value: service.isDarkModeEnabled,
+          default: this.props.stores.settings.all.app.darkMode,
+        },
       },
     };
 
@@ -238,6 +248,7 @@ EditServiceScreen.wrappedComponent.propTypes = {
     user: PropTypes.instanceOf(UserStore).isRequired,
     recipes: PropTypes.instanceOf(RecipesStore).isRequired,
     services: PropTypes.instanceOf(ServicesStore).isRequired,
+    settings: PropTypes.instanceOf(SettingsStore).isRequired,
   }).isRequired,
   router: PropTypes.shape({
     params: PropTypes.shape({