3 files changed, 22 insertions, 0 deletions

diff --git a/src/components/services/tabs/TabBarSortableList.js b/src/components/services/tabs/TabBarSortableList.js
index 117d799d7..1a389991d 100644
--- a/src/components/services/tabs/TabBarSortableList.js
+++ b/src/components/services/tabs/TabBarSortableList.js
@@ -14,6 +14,7 @@ class TabBarSortableList extends Component {
     reload: PropTypes.func.isRequired,
     toggleNotifications: PropTypes.func.isRequired,
     toggleAudio: PropTypes.func.isRequired,
+    toggleDarkMode: PropTypes.func.isRequired,
     deleteService: PropTypes.func.isRequired,
     disableService: PropTypes.func.isRequired,
     enableService: PropTypes.func.isRequired,
@@ -30,6 +31,7 @@ class TabBarSortableList extends Component {
       reload,
       toggleNotifications,
       toggleAudio,
+      toggleDarkMode,
       deleteService,
       disableService,
       enableService,
@@ -54,6 +56,7 @@ class TabBarSortableList extends Component {
             reload={() => reload({ serviceId: service.id })}
             toggleNotifications={() => toggleNotifications({ serviceId: service.id })}
             toggleAudio={() => toggleAudio({ serviceId: service.id })}
+            toggleDarkMode={() => toggleDarkMode({ serviceId: service.id })}
             deleteService={() => deleteService({ serviceId: service.id })}
             disableService={() => disableService({ serviceId: service.id })}
             enableService={() => enableService({ serviceId: service.id })}
diff --git a/src/components/services/tabs/TabItem.js b/src/components/services/tabs/TabItem.js
index d4a4048eb..3c27cca73 100644
--- a/src/components/services/tabs/TabItem.js
+++ b/src/components/services/tabs/TabItem.js
@@ -41,6 +41,14 @@ const messages = defineMessages({
     id: 'tabs.item.enableAudio',
     defaultMessage: '!!!Enable audio',
   },
+  enableDarkMode: {
+    id: 'tabs.item.enableDarkMode',
+    defaultMessage: '!!!Enable Dark mode',
+  },
+  disableDarkMode: {
+    id: 'tabs.item.disableDarkMode',
+    defaultMessage: '!!!Disable Dark mode',
+  },
   disableService: {
     id: 'tabs.item.disableService',
     defaultMessage: '!!!Disable Service',
@@ -118,6 +126,7 @@ class TabItem extends Component {
     reload: PropTypes.func.isRequired,
     toggleNotifications: PropTypes.func.isRequired,
     toggleAudio: PropTypes.func.isRequired,
+    toggleDarkMode: PropTypes.func.isRequired,
     openSettings: PropTypes.func.isRequired,
     deleteService: PropTypes.func.isRequired,
     disableService: PropTypes.func.isRequired,
@@ -169,6 +178,7 @@ class TabItem extends Component {
       reload,
       toggleNotifications,
       toggleAudio,
+      toggleDarkMode,
       deleteService,
       disableService,
       enableService,
@@ -216,6 +226,12 @@ class TabItem extends Component {
         click: () => toggleAudio(),
       },
       {
+        label: service.isDarkModeEnabled
+          ? intl.formatMessage(messages.enableDarkMode)
+          : intl.formatMessage(messages.disableDarkMode),
+        click: () => toggleDarkMode(),
+      },
+      {
         label: intl.formatMessage(
           service.isEnabled ? messages.disableService : messages.enableService,
         ),
diff --git a/src/components/services/tabs/Tabbar.js b/src/components/services/tabs/Tabbar.js
index 0f608c415..ab1e46c9f 100644
--- a/src/components/services/tabs/Tabbar.js
+++ b/src/components/services/tabs/Tabbar.js
@@ -15,6 +15,7 @@ export default @observer class TabBar extends Component {
     reload: PropTypes.func.isRequired,
     toggleNotifications: PropTypes.func.isRequired,
     toggleAudio: PropTypes.func.isRequired,
+    toggleDarkMode: PropTypes.func.isRequired,
     deleteService: PropTypes.func.isRequired,
     updateService: PropTypes.func.isRequired,
     hibernateService: PropTypes.func.isRequired,
@@ -78,6 +79,7 @@ export default @observer class TabBar extends Component {
       reload,
       toggleNotifications,
       toggleAudio,
+      toggleDarkMode,
       deleteService,
       showMessageBadgeWhenMutedSetting,
       showMessageBadgesEvenWhenMuted,
@@ -94,6 +96,7 @@ export default @observer class TabBar extends Component {
           reload={reload}
           toggleNotifications={toggleNotifications}
           toggleAudio={toggleAudio}
+          toggleDarkMode={toggleDarkMode}
           deleteService={deleteService}
           disableService={(args) => this.disableService(args)}
           enableService={(args) => this.enableService(args)}