1 files changed, 30 insertions, 1 deletions

diff --git a/src/components/settings/services/EditServiceForm.js b/src/components/settings/services/EditServiceForm.js
index 98051d78f..4fd1f99ef 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';
@@ -93,6 +94,10 @@ const messages = defineMessages({
     id: 'settings.service.form.isMutedInfo',
     defaultMessage: '!!!When disabled, all notification sounds and audio playback are muted',
   },
+  disableHibernationInfo: {
+    id: 'settings.service.form.disableHibernationInfo',
+    defaultMessage: '!!!You currently have hibernation enabled but you can disable hibernation for individual services using this option.',
+  },
   headlineNotifications: {
     id: 'settings.service.form.headlineNotifications',
     defaultMessage: '!!!Notifications',
@@ -105,6 +110,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',
@@ -149,6 +158,7 @@ export default @observer class EditServiceForm extends Component {
     isProxyFeatureEnabled: PropTypes.bool.isRequired,
     isServiceProxyIncludedInCurrentPlan: PropTypes.bool.isRequired,
     isSpellcheckerIncludedInCurrentPlan: PropTypes.bool.isRequired,
+    isHibernationFeatureActive: PropTypes.bool.isRequired,
   };
 
   static defaultProps = {
@@ -214,6 +224,7 @@ export default @observer class EditServiceForm extends Component {
       isProxyFeatureEnabled,
       isServiceProxyIncludedInCurrentPlan,
       isSpellcheckerIncludedInCurrentPlan,
+      isHibernationFeatureActive,
     } = this.props;
     const { intl } = this.context;
 
@@ -359,8 +370,26 @@ 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')} />
+                  {isHibernationFeatureActive && (
+                    <>
+                      <Toggle field={form.$('disableHibernation')} />
+                      <p className="settings__help">
+                        {intl.formatMessage(messages.disableHibernationInfo)}
+                      </p>
+                    </>
+                  )}
+                  <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">