feat: allow the user to enable/disable dark mode

(from the sidebar context menu)

11 files changed, 122 insertions, 27 deletions

diff --git a/src/actions/service.js b/src/actions/service.js
index 578fdeca8..e56513f8f 100644
--- a/src/actions/service.js
+++ b/src/actions/service.js
@@ -91,6 +91,9 @@ export default {
   toggleAudio: {
     serviceId: PropTypes.string.isRequired,
   },
+  toggleDarkMode: {
+    serviceId: PropTypes.string.isRequired,
+  },
   openDevTools: {
     serviceId: PropTypes.string.isRequired,
   },
diff --git a/src/components/layout/Sidebar.js b/src/components/layout/Sidebar.js
index a3dbc3539..daa5642c3 100644
--- a/src/components/layout/Sidebar.js
+++ b/src/components/layout/Sidebar.js
@@ -61,6 +61,7 @@ export default @inject('stores', 'actions') @observer class Sidebar extends Comp
     reload: PropTypes.func.isRequired,
     toggleNotifications: PropTypes.func.isRequired,
     toggleAudio: PropTypes.func.isRequired,
+    toggleDarkMode: PropTypes.func.isRequired,
     showMessageBadgeWhenMutedSetting: PropTypes.bool.isRequired,
     showMessageBadgesEvenWhenMuted: PropTypes.bool.isRequired,
     deleteService: PropTypes.func.isRequired,
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)}
diff --git a/src/containers/layout/AppLayoutContainer.js b/src/containers/layout/AppLayoutContainer.js
index fff628946..32b1f1cf7 100644
--- a/src/containers/layout/AppLayoutContainer.js
+++ b/src/containers/layout/AppLayoutContainer.js
@@ -54,6 +54,7 @@ export default @inject('stores', 'actions') @observer class AppLayoutContainer e
       reload,
       toggleNotifications,
       toggleAudio,
+      toggleDarkMode,
       deleteService,
       updateService,
       hibernate,
@@ -109,6 +110,7 @@ export default @inject('stores', 'actions') @observer class AppLayoutContainer e
         reload={reload}
         toggleNotifications={toggleNotifications}
         toggleAudio={toggleAudio}
+        toggleDarkMode={toggleDarkMode}
         deleteService={deleteService}
         updateService={updateService}
         hibernateService={hibernate}
diff --git a/src/i18n/locales/defaultMessages.json b/src/i18n/locales/defaultMessages.json
index 4279ba079..683ec4628 100644
--- a/src/i18n/locales/defaultMessages.json
+++ b/src/i18n/locales/defaultMessages.json
@@ -1771,81 +1771,107 @@
         }
       },
       {
-        "defaultMessage": "!!!Disable Service",
+        "defaultMessage": "!!!Enable Dark mode",
         "end": {
           "column": 3,
           "line": 47
         },
         "file": "src/components/services/tabs/TabItem.js",
-        "id": "tabs.item.disableService",
+        "id": "tabs.item.enableDarkMode",
         "start": {
           "column": 18,
           "line": 44
         }
       },
       {
-        "defaultMessage": "!!!Enable Service",
+        "defaultMessage": "!!!Disable Dark mode",
         "end": {
           "column": 3,
           "line": 51
         },
         "file": "src/components/services/tabs/TabItem.js",
+        "id": "tabs.item.disableDarkMode",
+        "start": {
+          "column": 19,
+          "line": 48
+        }
+      },
+      {
+        "defaultMessage": "!!!Disable Service",
+        "end": {
+          "column": 3,
+          "line": 55
+        },
+        "file": "src/components/services/tabs/TabItem.js",
+        "id": "tabs.item.disableService",
+        "start": {
+          "column": 18,
+          "line": 52
+        }
+      },
+      {
+        "defaultMessage": "!!!Enable Service",
+        "end": {
+          "column": 3,
+          "line": 59
+        },
+        "file": "src/components/services/tabs/TabItem.js",
         "id": "tabs.item.enableService",
         "start": {
           "column": 17,
-          "line": 48
+          "line": 56
         }
       },
       {
         "defaultMessage": "!!!Hibernate Service",
         "end": {
           "column": 3,
-          "line": 55
+          "line": 63
         },
         "file": "src/components/services/tabs/TabItem.js",
         "id": "tabs.item.hibernateService",
         "start": {
           "column": 20,
-          "line": 52
+          "line": 60
         }
       },
       {
         "defaultMessage": "!!!Wake Up Service",
         "end": {
           "column": 3,
-          "line": 59
+          "line": 67
         },
         "file": "src/components/services/tabs/TabItem.js",
         "id": "tabs.item.wakeUpService",
         "start": {
           "column": 17,
-          "line": 56
+          "line": 64
         }
       },
       {
         "defaultMessage": "!!!Delete Service",
         "end": {
           "column": 3,
-          "line": 63
+          "line": 71
         },
         "file": "src/components/services/tabs/TabItem.js",
         "id": "tabs.item.deleteService",
         "start": {
           "column": 17,
-          "line": 60
+          "line": 68
         }
       },
       {
         "defaultMessage": "!!!Do you really want to delete the {serviceName} service?",
         "end": {
           "column": 3,
-          "line": 68
+          "line": 76
         },
         "file": "src/components/services/tabs/TabItem.js",
         "id": "tabs.item.confirmDeleteService",
         "start": {
           "column": 24,
-          "line": 64
+          "line": 72
         }
       }
     ],
diff --git a/src/i18n/locales/en-US.json b/src/i18n/locales/en-US.json
index 1705d20e8..002ea5655 100644
--- a/src/i18n/locales/en-US.json
+++ b/src/i18n/locales/en-US.json
@@ -434,10 +434,12 @@
   "tabs.item.confirmDeleteService": "Do you really want to delete the {serviceName} service?",
   "tabs.item.deleteService": "Delete service",
   "tabs.item.disableAudio": "Disable audio",
+  "tabs.item.disableDarkMode": "Disable Dark mode",
   "tabs.item.disableNotifications": "Disable notifications",
   "tabs.item.disableService": "Disable service",
   "tabs.item.edit": "Edit",
   "tabs.item.enableAudio": "Enable audio",
+  "tabs.item.enableDarkMode": "Enable Dark mode",
   "tabs.item.enableNotification": "Enable notifications",
   "tabs.item.enableService": "Enable service",
   "tabs.item.hibernateService": "Hibernate service",
diff --git a/src/i18n/messages/src/components/services/tabs/TabItem.json b/src/i18n/messages/src/components/services/tabs/TabItem.json
index 60cfde52d..92ff6fb14 100644
--- a/src/i18n/messages/src/components/services/tabs/TabItem.json
+++ b/src/i18n/messages/src/components/services/tabs/TabItem.json
@@ -78,8 +78,8 @@
     }
   },
   {
-    "id": "tabs.item.disableService",
-    "defaultMessage": "!!!Disable Service",
+    "id": "tabs.item.enableDarkMode",
+    "defaultMessage": "!!!Enable Dark mode",
     "file": "src/components/services/tabs/TabItem.js",
     "start": {
       "line": 44,
@@ -91,15 +91,41 @@
     }
   },
   {
+    "id": "tabs.item.disableDarkMode",
+    "defaultMessage": "!!!Disable Dark mode",
+    "file": "src/components/services/tabs/TabItem.js",
+    "start": {
+      "line": 48,
+      "column": 19
+    },
+    "end": {
+      "line": 51,
+      "column": 3
+    }
+  },
+  {
+    "id": "tabs.item.disableService",
+    "defaultMessage": "!!!Disable Service",
+    "file": "src/components/services/tabs/TabItem.js",
+    "start": {
+      "line": 52,
+      "column": 18
+    },
+    "end": {
+      "line": 55,
+      "column": 3
+    }
+  },
+  {
     "id": "tabs.item.enableService",
     "defaultMessage": "!!!Enable Service",
     "file": "src/components/services/tabs/TabItem.js",
     "start": {
-      "line": 48,
+      "line": 56,
       "column": 17
     },
     "end": {
-      "line": 51,
+      "line": 59,
       "column": 3
     }
   },
@@ -108,11 +134,11 @@
     "defaultMessage": "!!!Hibernate Service",
     "file": "src/components/services/tabs/TabItem.js",
     "start": {
-      "line": 52,
+      "line": 60,
       "column": 20
     },
     "end": {
-      "line": 55,
+      "line": 63,
       "column": 3
     }
   },
@@ -121,11 +147,11 @@
     "defaultMessage": "!!!Wake Up Service",
     "file": "src/components/services/tabs/TabItem.js",
     "start": {
-      "line": 56,
+      "line": 64,
       "column": 17
     },
     "end": {
-      "line": 59,
+      "line": 67,
       "column": 3
     }
   },
@@ -134,11 +160,11 @@
     "defaultMessage": "!!!Delete Service",
     "file": "src/components/services/tabs/TabItem.js",
     "start": {
-      "line": 60,
+      "line": 68,
       "column": 17
     },
     "end": {
-      "line": 63,
+      "line": 71,
       "column": 3
     }
   },
@@ -147,11 +173,11 @@
     "defaultMessage": "!!!Do you really want to delete the {serviceName} service?",
     "file": "src/components/services/tabs/TabItem.js",
     "start": {
-      "line": 64,
+      "line": 72,
       "column": 24
     },
     "end": {
-      "line": 68,
+      "line": 76,
       "column": 3
     }
   }
diff --git a/src/internal-server/app/Controllers/Http/ServiceController.js b/src/internal-server/app/Controllers/Http/ServiceController.js
index e4a7f0295..d98ba146e 100644
--- a/src/internal-server/app/Controllers/Http/ServiceController.js
+++ b/src/internal-server/app/Controllers/Http/ServiceController.js
@@ -52,7 +52,7 @@ class ServiceController {
         isNotificationEnabled: true,
         isBadgeEnabled: true,
         isMuted: false,
-        isDarkModeEnabled: '',
+        isDarkModeEnabled: false,
         spellcheckerLanguage: '',
         order: 1,
         customRecipe: false,
@@ -79,7 +79,7 @@ class ServiceController {
         customRecipe: false,
         hasCustomIcon: false,
         isBadgeEnabled: true,
-        isDarkModeEnabled: '',
+        isDarkModeEnabled: false,
         isEnabled: true,
         isMuted: false,
         isNotificationEnabled: true,
@@ -253,7 +253,7 @@ class ServiceController {
         customRecipe: false,
         hasCustomIcon: false,
         isBadgeEnabled: true,
-        isDarkModeEnabled: '',
+        isDarkModeEnabled: false,
         isEnabled: true,
         isMuted: false,
         isNotificationEnabled: true,
diff --git a/src/stores/ServicesStore.js b/src/stores/ServicesStore.js
index 499495d08..4ccb995ae 100644
--- a/src/stores/ServicesStore.js
+++ b/src/stores/ServicesStore.js
@@ -97,6 +97,7 @@ export default class ServicesStore extends Store {
       this._toggleNotifications.bind(this),
     );
     this.actions.service.toggleAudio.listen(this._toggleAudio.bind(this));
+    this.actions.service.toggleDarkMode.listen(this._toggleDarkMode.bind(this));
     this.actions.service.openDevTools.listen(this._openDevTools.bind(this));
     this.actions.service.openDevToolsForActiveService.listen(
       this._openDevToolsForActiveService.bind(this),
@@ -916,6 +917,18 @@ export default class ServicesStore extends Store {
     });
   }
 
+  @action _toggleDarkMode({ serviceId }) {
+    const service = this.one(serviceId);
+
+    this.actions.service.updateService({
+      serviceId,
+      serviceData: {
+        isDarkModeEnabled: !service.isDarkModeEnabled,
+      },
+      redirect: false,
+    });
+  }
+
   @action _openDevTools({ serviceId }) {
     const service = this.one(serviceId);
     if (service.isTodosService) {