Expose Dark Reader settings (#568)

* feat: Expose DarkReader settings to users
  - In the service model, expose an object darkReaderSetting which contains  brightness, contrast and sepia values.
  - In EditServiceScreen, provide 3 form options for brightness, contrast and Sepia. Additionally onSubmit() form, capture the darkreader settings data onto formdata.darkReaderSettings to update in the service
  - In EditServiceForm, if darkModeEnabled is checked, show 3 sliders for controlling darkreader settings
  - Create a new Slider control and customize it according to the application's theme and dark theme.
  - In Webview Recipe, load the darkReader settings from service settings and pass it to the darkReader library.

* feat: Darkreader settings
 - Lint fixes

* feat: DarkReader settings
  - refactor code in editservicescreen.js

Co-Authored-By: Sampath Kumar Krishnan <sampath3493@gmail.com>

* feat: Darkreader settings
 - Fix a crash where service.darkReaderSettings is null while creating a new service
 - Remove isDarkModeEnabled prop to EditServiceForm as it is no longer required.

* fix: Update EditServiceScreen

- Set the default value of darkReader Brightness, Contrast and Sepia to undefined as per @vantezzen 's suggestion.
- Updated the check provided by @mahadevans87

Co-authored-by: Sampath Kumar Krishnan <sampath3493@gmail.com>
Co-authored-by: Sampath Kumar Krishnan <sampathBlam@users.noreply.github.com>

1 files changed, 35 insertions, 0 deletions

diff --git a/src/containers/settings/EditServiceScreen.js b/src/containers/settings/EditServiceScreen.js
index a7d33a3ea..560068efc 100644
--- a/src/containers/settings/EditServiceScreen.js
+++ b/src/containers/settings/EditServiceScreen.js
@@ -65,6 +65,18 @@ const messages = defineMessages({
     id: 'settings.service.form.enableDarkMode',
     defaultMessage: '!!!Enable Dark Mode',
   },
+  darkReaderBrightness: {
+    id: 'settings.service.form.darkReaderBrightness',
+    defaultMessage: '!!!Darkreader Brightness',
+  },
+  darkReaderContrast: {
+    id: 'settings.service.form.darkReaderContrast',
+    defaultMessage: '!!!Darkreader Contrast',
+  },
+  darkReaderSepia: {
+    id: 'settings.service.form.darkReaderSepia',
+    defaultMessage: '!!!Darkreader Sepia',
+  },
   enableProxy: {
     id: 'settings.service.form.proxy.isEnabled',
     defaultMessage: '!!!Use Proxy',
@@ -96,6 +108,14 @@ export default @inject('stores', 'actions') @observer class EditServiceScreen ex
     const { action } = this.props.router.params;
     const { recipes, services } = this.props.stores;
     const { createService, updateService } = this.props.actions.service;
+    data.darkReaderSettings = {
+      brightness: data.darkReaderBrightness,
+      contrast: data.darkReaderContrast,
+      sepia: data.darkReaderSepia,
+    };
+    delete data.darkReaderContrast;
+    delete data.darkReaderBrightness;
+    delete data.darkReaderSepia;
 
     const serviceData = data;
     serviceData.isMuted = !serviceData.isMuted;
@@ -166,6 +186,21 @@ export default @inject('stores', 'actions') @observer class EditServiceScreen ex
           value: service.isDarkModeEnabled,
           default: stores.settings.app.darkMode,
         },
+        darkReaderBrightness: {
+          label: intl.formatMessage(messages.darkReaderBrightness),
+          value: service.darkReaderSettings ? service.darkReaderSettings.brightness : undefined,
+          default: 100,
+        },
+        darkReaderContrast: {
+          label: intl.formatMessage(messages.darkReaderContrast),
+          value: service.darkReaderSettings ? service.darkReaderSettings.contrast : undefined,
+          default: 90,
+        },
+        darkReaderSepia: {
+          label: intl.formatMessage(messages.darkReaderSepia),
+          value: service.darkReaderSettings ? service.darkReaderSettings.sepia : undefined,
+          default: 10,
+        },
         spellcheckerLanguage: {
           label: intl.formatMessage(globalMessages.spellcheckerLanguage),
           value: service.spellcheckerLanguage,