Feature: Add monochromatic Service icons option with Dim adjustment

5 files changed, 51 insertions, 0 deletions

diff --git a/src/components/settings/settings/EditSettingsForm.js b/src/components/settings/settings/EditSettingsForm.js
index 2ea9272b0..600345117 100644
--- a/src/components/settings/settings/EditSettingsForm.js
+++ b/src/components/settings/settings/EditSettingsForm.js
@@ -210,6 +210,7 @@ class EditSettingsForm extends Component {
     automaticUpdates: PropTypes.bool.isRequired,
     isDarkmodeEnabled: PropTypes.bool.isRequired,
     isAdaptableDarkModeEnabled: PropTypes.bool.isRequired,
+    isUseGrayscaleServicesEnabled: PropTypes.bool.isRequired,
     openProcessManager: PropTypes.func.isRequired,
     isSplitModeEnabled: PropTypes.bool.isRequired,
     hasAddedTodosAsService: PropTypes.bool.isRequired,
@@ -249,6 +250,7 @@ class EditSettingsForm extends Component {
       form,
       isCheckingForUpdates,
       isAdaptableDarkModeEnabled,
+      isUseGrayscaleServicesEnabled,
       isUpdateAvailable,
       noUpdateAvailable,
       updateIsReadyToInstall,
@@ -604,6 +606,16 @@ class EditSettingsForm extends Component {
 
                 <Toggle field={form.$('showDisabledServices')} />
                 <Toggle field={form.$('showServiceName')} />
+                <Toggle field={form.$('useGrayscaleServices')} />
+
+                {isUseGrayscaleServicesEnabled && (
+                  <Input
+                      type="number"
+                      onChange={e => this.submit(e)}
+                      field={form.$('grayscaleServicesDim')}
+                    />
+                )}
+
                 <Toggle field={form.$('showMessageBadgeWhenMuted')} />
                 <Toggle field={form.$('enableLongPressServiceHint')} />
                 <Select field={form.$('iconSize')} />
diff --git a/src/config.ts b/src/config.ts
index 495a07026..8dff85a6f 100644
--- a/src/config.ts
+++ b/src/config.ts
@@ -254,6 +254,8 @@ export const DEFAULT_APP_SETTINGS = {
   searchEngine: SEARCH_ENGINE_DDG,
   useVerticalStyle: false,
   hideRecipesButton: false,
+  useGrayscaleServices: false,
+  grayscaleServicesDim: 50,
   hideWorkspacesButton: false,
   hideNotificationsButton: false,
   hideSettingsButton: false,
diff --git a/src/containers/settings/EditSettingsScreen.js b/src/containers/settings/EditSettingsScreen.js
index 4c5e6d921..cf3d7b32f 100644
--- a/src/containers/settings/EditSettingsScreen.js
+++ b/src/containers/settings/EditSettingsScreen.js
@@ -210,6 +210,14 @@ const messages = defineMessages({
     id: 'settings.app.form.hideRecipesButton',
     defaultMessage: 'Hide Recipes button',
   },
+  useGrayscaleServices: {
+    id: 'settings.app.form.useGrayscaleServices',
+    defaultMessage: 'Use grayscale services',
+  },
+  grayscaleServicesDim: {
+    id: 'settings.app.form.grayscaleServicesDim',
+    defaultMessage: 'Input grayscale dim level (%)',
+  },
   hideWorkspacesButton: {
     id: 'settings.app.form.hideWorkspacesButton',
     defaultMessage: 'Hide Workspace Drawer button',
@@ -356,6 +364,8 @@ class EditSettingsScreen extends Component {
         ),
         useVerticalStyle: Boolean(settingsData.useVerticalStyle),
         hideRecipesButton: Boolean(settingsData.hideRecipesButton),
+        useGrayscaleServices: Boolean(settingsData.useGrayscaleServices),
+        grayscaleServicesDim: Number(settingsData.grayscaleServicesDim),
         hideWorkspacesButton: Boolean(settingsData.hideWorkspacesButton),
         hideNotificationsButton: Boolean(settingsData.hideNotificationsButton),
         hideSettingsButton: Boolean(settingsData.hideSettingsButton),
@@ -721,6 +731,16 @@ class EditSettingsScreen extends Component {
           value: settings.all.app.hideRecipesButton,
           default: DEFAULT_APP_SETTINGS.hideRecipesButton,
         },
+        useGrayscaleServices: {
+          label: intl.formatMessage(messages.useGrayscaleServices),
+          value: settings.all.app.useGrayscaleServices,
+          default: DEFAULT_APP_SETTINGS.useGrayscaleServices,
+        },
+        grayscaleServicesDim: {
+          label: intl.formatMessage(messages.grayscaleServicesDim),
+          value: settings.all.app.grayscaleServicesDim,
+          default: DEFAULT_APP_SETTINGS.grayscaleServicesDim,
+        },
         hideWorkspacesButton: {
           label: intl.formatMessage(messages.hideWorkspacesButton),
           value: settings.all.app.hideWorkspacesButton,
@@ -828,6 +848,7 @@ class EditSettingsScreen extends Component {
           isAdaptableDarkModeEnabled={
             this.props.stores.settings.app.adaptableDarkMode
           }
+          isUseGrayscaleServicesEnabled={this.props.stores.settings.app.useGrayscaleServices}
           isSplitModeEnabled={this.props.stores.settings.app.splitMode}
           isTodosActivated={this.props.stores.todos.isFeatureEnabledByUser}
           isUsingCustomTodoService={
diff --git a/src/features/appearance/index.ts b/src/features/appearance/index.ts
index 04b4b059d..aa569af73 100644
--- a/src/features/appearance/index.ts
+++ b/src/features/appearance/index.ts
@@ -132,6 +132,8 @@ function generateServiceRibbonWidthStyle(
   vertical,
   isLabelEnabled,
   sidebarServicesLocation,
+  useGrayscaleServices,
+  grayscaleServicesDim,
 ) {
   const width = Number(widthStr);
   const iconSize = Number(iconSizeStr) - iconSizeBias;
@@ -205,6 +207,10 @@ function generateServiceRibbonWidthStyle(
       break;
   }
 
+  const graysacleServices =
+  `filter: grayscale(1);
+  opacity: ${grayscaleServicesDim}%;`
+
   return vertical
     ? `
     .sidebar {
@@ -222,6 +228,7 @@ function generateServiceRibbonWidthStyle(
     }
     .tab-item .tab-item__icon {
       width: ${minimumAdjustedIconSize}px !important;
+      ${useGrayscaleServices ? graysacleServices : null},
     }
     .sidebar__button {
       font-size: ${width / 3}px !important;
@@ -258,6 +265,7 @@ function generateServiceRibbonWidthStyle(
     }
     .tab-item .tab-item__icon {
       width: ${minimumAdjustedIconSize}px !important;
+      ${useGrayscaleServices ? graysacleServices : null},
     }
     .sidebar__button {
       font-size: ${width / 3}px !important;
@@ -342,6 +350,8 @@ function generateStyle(settings) {
     accentColor,
     serviceRibbonWidth,
     sidebarServicesLocation,
+    useGrayscaleServices,
+    grayscaleServicesDim,
     iconSize,
     showDragArea,
     useVerticalStyle,
@@ -361,6 +371,8 @@ function generateStyle(settings) {
     useVerticalStyle,
     showServiceName,
     sidebarServicesLocation,
+    useGrayscaleServices,
+    grayscaleServicesDim,
   );
 
   if (showDragArea) {
@@ -397,6 +409,8 @@ export default function initAppearance(stores) {
       settings.all.app.iconSize,
       settings.all.app.showDragArea,
       settings.all.app.sidebarServicesLocation,
+      settings.all.app.useGrayscaleServices,
+      settings.all.app.grayscaleServicesDim,
       settings.all.app.useVerticalStyle,
       settings.all.app.alwaysShowWorkspaces,
       settings.all.app.showServiceName,
diff --git a/src/i18n/locales/en-US.json b/src/i18n/locales/en-US.json
index 22061fc9c..68268b70a 100644
--- a/src/i18n/locales/en-US.json
+++ b/src/i18n/locales/en-US.json
@@ -216,6 +216,8 @@
   "settings.app.form.hibernationStrategy": "Hibernation strategy",
   "settings.app.form.hideNotificationsButton": "Hide Notifications & Sound button",
   "settings.app.form.hideRecipesButton": "Hide Recipes button",
+  "settings.app.form.useGrayscaleServices": "Use grayscale services",
+  "settings.app.form.grayscaleServicesDim": "Input grayscale dim level (%)",
   "settings.app.form.hideSettingsButton": "Hide Settings button",
   "settings.app.form.hideWorkspacesButton": "Hide Workspace Drawer button",
   "settings.app.form.iconSize": "Service icon size",