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

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;