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>

9 files changed, 187 insertions, 2 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">
diff --git a/src/components/ui/Slider.js b/src/components/ui/Slider.js
new file mode 100644
index 000000000..b00a6a3f8
--- /dev/null
+++ b/src/components/ui/Slider.js
@@ -0,0 +1,65 @@
+import React, { Component } from 'react';
+import PropTypes from 'prop-types';
+import { observer } from 'mobx-react';
+import classnames from 'classnames';
+import { Field } from 'mobx-react-form';
+
+export default @observer class Slider extends Component {
+    static propTypes = {
+      field: PropTypes.instanceOf(Field).isRequired,
+      className: PropTypes.string,
+      showLabel: PropTypes.bool,
+      disabled: PropTypes.bool,
+    };
+
+    static defaultProps = {
+      className: '',
+      showLabel: true,
+      disabled: false,
+    };
+
+    onChange(e) {
+      const { field } = this.props;
+
+      field.onChange(e);
+    }
+
+    render() {
+      const {
+        field,
+        className,
+        showLabel,
+        disabled,
+      } = this.props;
+
+      if (field.value === '' && field.default !== '') {
+        field.value = field.default;
+      }
+
+      return (
+        <div
+          className={classnames([
+            'franz-form__field',
+            'franz-form__slider-wrapper',
+            className,
+          ])}
+        >
+          <div className="slider-container">
+            <input
+              className="slider"
+              type="range"
+              id={field.id}
+              name={field.name}
+              value={field.value}
+              min="1"
+              max="100"
+              onChange={e => (!disabled ? this.onChange(e) : null)}
+            />
+          </div>
+
+          {field.error && <div className={field.error}>{field.error}</div>}
+          {field.label && showLabel && <label className="franz-form__label" htmlFor={field.id}>{field.label}</label>}
+        </div>
+      );
+    }
+}
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,
diff --git a/src/i18n/locales/en-US.json b/src/i18n/locales/en-US.json
index 9f19ad742..947f927e7 100644
--- a/src/i18n/locales/en-US.json
+++ b/src/i18n/locales/en-US.json
@@ -370,6 +370,10 @@
   "settings.service.form.enableAudio": "Enable audio",
   "settings.service.form.enableBadge": "Show unread message badges",
   "settings.service.form.enableDarkMode": "Enable Dark Mode",
+  "settings.service.form.darkReaderBrightness": "Brightness",
+  "settings.service.form.darkReaderContrast": "Contrast",
+  "settings.service.form.darkReaderSepia": "Sepia",
+  "settings.service.form.headlineDarkReaderSettings": "Dark Reader Settings",
   "settings.service.form.enableNotification": "Enable notifications",
   "settings.service.form.enableService": "Enable service",
   "settings.service.form.headlineBadges": "Unread message badges",
diff --git a/src/i18n/locales/en.json b/src/i18n/locales/en.json
index ff0d57435..544ad997d 100644
--- a/src/i18n/locales/en.json
+++ b/src/i18n/locales/en.json
@@ -300,6 +300,10 @@
   "settings.service.form.enableAudio": "Cumasaigh fuaim",
   "settings.service.form.enableBadge": "Taispeáin comhartha do theachtaireachtaí neamhléite",
   "settings.service.form.enableDarkMode": "Enable Dark Mode",
+  "settings.service.form.darkReaderBrightness": "Darkreader Brightness",
+  "settings.service.form.darkReaderContrast": "Darkreader Contrast",
+  "settings.service.form.darkReaderSepia": "Darkreader Sepia",
+  "settings.service.form.headlineDarkReaderSettings": "Dark Reader Settings",
   "settings.service.form.enableNotification": "Cumasaigh fógraí",
   "settings.service.form.enableService": "Cumasaigh seirbhís",
   "settings.service.form.headlineBadges": "Comhartha do theachtaireachtaí neamhléite",
diff --git a/src/models/Service.js b/src/models/Service.js
index 12a2d4af9..f073ac9fc 100644
--- a/src/models/Service.js
+++ b/src/models/Service.js
@@ -56,6 +56,8 @@ export default class Service {
 
   @observable isDarkModeEnabled = false;
 
+  @observable darkReaderSettings = { brightness: 100, contrast: 90, sepia: 10 };
+
   @observable spellcheckerLanguage = null;
 
   @observable isFirstLoad = true;
@@ -109,6 +111,8 @@ export default class Service {
 
     this.isDarkModeEnabled = data.isDarkModeEnabled !== undefined ? data.isDarkModeEnabled : this.isDarkModeEnabled;
 
+    this.darkReaderSettings = data.darkReaderSettings !== undefined ? data.darkReaderSettings : this.darkReaderSettings;
+
     this.hasCustomUploadedIcon = data.hasCustomIcon !== undefined ? data.hasCustomIcon : this.hasCustomUploadedIcon;
 
     this.proxy = data.proxy !== undefined ? data.proxy : this.proxy;
@@ -136,6 +140,7 @@ export default class Service {
       id: this.id,
       spellcheckerLanguage: this.spellcheckerLanguage,
       isDarkModeEnabled: this.isDarkModeEnabled,
+      darkReaderSettings: this.darkReaderSettings,
       team: this.team,
       url: this.url,
       hasCustomIcon: this.hasCustomIcon,
diff --git a/src/styles/main.scss b/src/styles/main.scss
index 1e9ed5714..ceec4a95e 100644
--- a/src/styles/main.scss
+++ b/src/styles/main.scss
@@ -40,3 +40,4 @@ $mdi-font-path: '../node_modules/mdi/fonts';
 @import './searchInput.scss';
 @import './select.scss';
 @import './image-upload.scss';
+@import './slider.scss';
\ No newline at end of file
diff --git a/src/styles/slider.scss b/src/styles/slider.scss
new file mode 100644
index 000000000..36e0638c4
--- /dev/null
+++ b/src/styles/slider.scss
@@ -0,0 +1,54 @@
+@import './config.scss';
+
+.theme__dark .franz-form .franz-form__slider-wrapper .slider {
+  border: 1px solid $dark-theme-gray;
+  background: $dark-theme-gray;
+
+}
+
+
+.franz-form {
+  .franz-form__slider-wrapper { 
+    display: flex;
+    flex-direction: row;
+
+    .franz-form__label { margin-left: 20px; }
+
+    .slider-container {
+      width: 100%; /* Width of the outside container */ 
+    }
+      
+    /* The slider itself */
+    .slider {
+      -webkit-appearance: none;
+      width: 100%;
+      height: 14px;
+      border-radius: $theme-border-radius;  
+      background: $theme-gray-lighter;
+      outline: none;
+      opacity: 1.0;
+      -webkit-transition: .2s;
+      transition: opacity .2s;
+    }
+    
+    .slider::-webkit-slider-thumb {
+      -webkit-appearance: none;
+      appearance: none;
+      width: 14px;
+      height: 14px;
+      border-radius: 50%; 
+      background: $theme-brand-primary;
+      box-shadow: 0 1px 4px rgba(0, 0, 0, .3);
+      cursor: pointer;
+    }
+    
+    .slider::-moz-range-thumb {
+      width: 14px;
+      height: 14px;
+      border-radius: 50%;
+      background: $theme-brand-primary;
+      box-shadow: 0 1px 4px rgba(0, 0, 0, .3);
+      cursor: pointer;
+    }
+    }
+}
diff --git a/src/webview/recipe.js b/src/webview/recipe.js
index 7b762af17..8125ec064 100644
--- a/src/webview/recipe.js
+++ b/src/webview/recipe.js
@@ -157,6 +157,7 @@ class RecipeController {
     debug('isDarkModeEnabled', this.settings.service.isDarkModeEnabled);
     debug('System spellcheckerLanguage', this.settings.app.spellcheckerLanguage);
     debug('Service spellcheckerLanguage', this.settings.service.spellcheckerLanguage);
+    debug('darkReaderSettigs', this.settings.service.darkReaderSettings);
 
     if (this.userscript && this.userscript.internal_setSettings) {
       this.userscript.internal_setSettings(this.settings);
@@ -233,7 +234,8 @@ class RecipeController {
         console.log('Injecting DarkReader');
 
         // Use darkreader instead
-        enableDarkMode({}, {
+        const { brightness, contrast, sepia } = this.settings.service.darkReaderSettings;
+        enableDarkMode({ brightness, contrast, sepia }, {
           css: customDarkModeCss[window.location.host] || '',
         });
         this.universalDarkModeInjected = true;