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, 16 insertions, 1 deletions

diff --git a/src/components/settings/services/EditServiceForm.js b/src/components/settings/services/EditServiceForm.js
index 98051d78f..bb4f4a76f 100644
--- a/src/components/settings/services/EditServiceForm.js
+++ b/src/components/settings/services/EditServiceForm.js
@@ -12,6 +12,7 @@ import Service from '../../../models/Service';
 import Tabs, { TabItem } from '../../ui/Tabs';
 import Input from '../../ui/Input';
 import Toggle from '../../ui/Toggle';
+import Slider from '../../ui/Slider';
 import Button from '../../ui/Button';
 import ImageUpload from '../../ui/ImageUpload';
 import Select from '../../ui/Select';
@@ -105,6 +106,10 @@ const messages = defineMessages({
     id: 'settings.service.form.headlineGeneral',
     defaultMessage: '!!!General',
   },
+  headlineDarkReaderSettings: {
+    id: 'settings.service.form.headlineDarkReaderSettings',
+    defaultMessage: '!!!DarkReader Settings',
+  },
   iconDelete: {
     id: 'settings.service.form.iconDelete',
     defaultMessage: '!!!Delete',
@@ -359,8 +364,18 @@ export default @observer class EditServiceForm extends Component {
 
                 <div className="settings__settings-group">
                   <h3>{intl.formatMessage(messages.headlineGeneral)}</h3>
-                  <Toggle field={form.$('isDarkModeEnabled')} />
                   <Toggle field={form.$('isEnabled')} />
+                  <Toggle field={form.$('isDarkModeEnabled')} />
+                  {form.$('isDarkModeEnabled').value
+                    && (
+                      <>
+                        <h3>{intl.formatMessage(messages.headlineDarkReaderSettings)}</h3>
+                        <Slider field={form.$('darkReaderBrightness')} />
+                        <Slider field={form.$('darkReaderContrast')} />
+                        <Slider field={form.$('darkReaderSepia')} />
+                      </>
+                    )
+                  }
                 </div>
               </div>
               <div className="service-icon">